-
Notifications
You must be signed in to change notification settings - Fork 22
1. 使用JS隔离封装viewerjs库
Viewer.js库是一个实用的js库,用于图片浏览,放大缩小翻转幻灯片播放等实用操作
本文相关参考链接
导入的 JS 不再污染全局命名空间。 库和组件的使用者不需要导入相关的 JS。即不需要再在ssr的 Pages/_Host.cshtml 或 Pages/_Layout.cshtml ,wasm的 wwwroot/index.html 里写 <script src="_content/xxx.js"></script> 第一遍载入静态资产请求包含值为 no-cache 或 max-age(值为零 (0))的 标头。真正页面组件使用才载入真实大小文件。
4. 编写js文件. 首先在这个步骤我们使用在线版本的js库,这样操作和理解都比较简单. 然后是一个title函数,用于使用图片alt和索引信息生成viewer.js组件的标题, viewer.js组件初始化. 接下来是注销组件过程.
viewer.js代码
import 'https://cdnjs.cloudflare.com/ajax/libs/viewerjs/1.10.3/viewer.min.js';
var viewer = null;
export function initOptions(options) {
options.title = function (image) {
return image.alt + ' (' + (this.index + 1) + '/' + this.length + ')';
};
//options.hidden= function () {
// viewer.destroy();
//};
if (undefined !== options.toolbarlite && options.toolbarlite == true) {
options.toolbar = {
zoomIn: true,
zoomOut: true,
//rotateLeft: true,
rotateRight: true,
//prev: true,
//next: true,
};
}
if (undefined !== viewer && null !== viewer && options.id == viewer.element.id) {
viewer.destroy();
console.log(viewer.element.id, 'destroy');
}
viewer = new Viewer(document.getElementById(options.id), options);
console.log(viewer.element.id);
}
export function destroy(options) {
if (undefined !== viewer && null !== viewer && options.id == viewer.element.id) {
viewer.destroy();
console.log(viewer.element.id, 'destroy');
}
}
组件的命名空间统一使用Blazor100.Components,在razor文件和razor.cs都使用统一命名空间,这样不会受到文件夹嵌套各种影响.
Viewerjs.razor代码
@implements IAsyncDisposable
@inject IJSRuntime JS
@namespace Blazor100.Components
@if (UseBuiltinImageDiv)
{
<div class="docs-galley mb-3" style="height: @Height;width:@Width; ">
<ul id="@Options.id" class="docs-pictures clearfix">
@{
var i = 0;
foreach (var item in Images)
{
var alt = (Alts != null && Alts.Any() && Alts.Count > i) ? Alts[i] : (item.Split('/').Last());
<li><img src="@item" alt="@alt"></li>
i++;
}
}
</ul>
</div>
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/viewerjs/1.10.3/viewer.min.css" rel="stylesheet" />
@code{
/// <summary>
/// 使用内置图片DIV
/// </summary>
[Parameter] public bool UseBuiltinImageDiv { get; set; } = true;
/// <summary>
/// 图片列表
/// </summary>
[Parameter] public List<string> Images { get; set; } = new List<string>();
/// <summary>
/// 单图片
/// </summary>
[Parameter] public string? Src { get; set; }
/// <summary>
/// 图片名称列表
/// </summary>
[Parameter] public List<string>? Alts { get; set; }
/// <summary>
/// 组件初始化参数
/// </summary>
[Parameter] public ViewerOptions Options { get; set; } = new ViewerOptions();
/// <summary>
/// 简化版工具条
/// </summary>
[Parameter] public bool? toolbarlite { get; set; }
/// <summary>
/// 高
/// </summary>
[Parameter] public string? Height { get; set; } = "400px";
/// <summary>
/// 宽
/// </summary>
[Parameter] public string? Width { get; set; } = "400px";
/// <summary>
/// 组件ID
/// </summary>
[Parameter] public string? ID { get; set; }
private IJSObjectReference? module;
protected override void OnInitialized()
{
Options ??= new ViewerOptions();
if (toolbarlite != null) Options.toolbarlite = toolbarlite.Value;
if (!string.IsNullOrEmpty(ID)) Options.id = ID; else Options.id = Guid.NewGuid().ToString();
Images ??= new List<string>();
if (Src != null)
Images.Add(Src);
else if (!Images.Any())
{
for (int i = 1; i <= 9; i++)
{
Images.Add("./favicon.ico");
}
}
}
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
module = await JS.InvokeAsync<IJSObjectReference>("import", "/lib/viewerjs/viewerjs.js");
await module.InvokeVoidAsync("initOptions", Options);
}
}
public async Task OnOptionsChanged(ViewerOptions options) => await module!.InvokeVoidAsync("initOptions", options);
async ValueTask IAsyncDisposable.DisposeAsync()
{
if (module is not null)
{
await module.InvokeVoidAsync("destroy", Options);
await module.DisposeAsync();
}
}
}
Viewerjs.razor.css代码
.docs-galley {
padding: 10px;
width: 400px;
}
.docs-pictures {
list-style: none;
margin: 0;
padding: 0;
}
.docs-pictures > li {
border: 1px solid transparent;
float: left;
height: calc(100% / 3);
margin: 0 -1px -1px 0;
overflow: hidden;
width: calc(100% / 3);
}
.docs-pictures > li > img {
cursor: -webkit-zoom-in;
cursor: zoom-in;
width: 100%;
}
img {
vertical-align: middle;
border-style: none;
}
类命名空间统一使用Blazor100.Components,在.cs都使用统一命名空间.
Viewerjs.razor代码
using System.ComponentModel;
namespace Blazor100.Components;
/// <summary>
/// 图片浏览器选项类
/// </summary>
public class ViewerOptions
{
/// <summary>
/// 图片浏览器选项
/// </summary>
/// <param name="id"></param>
/// <param name="fullscreen"></param>
public ViewerOptions(string id = "images", bool fullscreen = true)
{
this.id = id;
this.fullscreen = fullscreen;
}
public string id { get; set; } = "images";
/// <summary>
/// 简化版工具条
/// </summary>
public bool toolbarlite { get; set; }
public string container { get; set; } = "body";
/// <summary>
/// 背景遮罩
/// </summary>
[DisplayName("背景遮罩")]
public bool backdrop { get; set; } = true;
/// <summary>
/// 右上角的关闭按钮
/// </summary>
[DisplayName("关闭按钮")]
public bool button { get; set; } = true;
public bool focus { get; set; } = true;
/// <summary>
/// 全屏
/// </summary>
[DisplayName("全屏")]
public bool fullscreen { get; set; } = true;
/// <summary>
/// 内联/模态模式
/// </summary>
[DisplayName("内联/模态模式")]
public bool inline { get; set; } = false;
/// <summary>
///
/// </summary>
public int interval { get; set; } = 5000;
/// <summary>
/// 键盘导航快捷键
/// </summary>
[DisplayName("键盘导航快捷键")]
public bool keyboard { get; set; } = true;
/// <summary>
///
/// </summary>
public bool loading { get; set; } = true;
/// <summary>
/// 循环播放
/// </summary>
[DisplayName("循环播放")]
public bool loop { get; set; } = true;
/// <summary>
///
/// </summary>
public int maxZoomRatio { get; set; } = 100;
/// <summary>
///
/// </summary>
public int minHeight { get; set; } = 100;
/// <summary>
///
/// </summary>
public int minWidth { get; set; } = 200;
/// <summary>
///
/// </summary>
public double minZoomRatio { get; set; } = 0.01;
/// <summary>
/// 可移动
/// </summary>
[DisplayName("可移动")]
public bool movable { get; set; } = true;
/// <summary>
/// 导航
/// </summary>
[DisplayName("导航")]
public bool navbar { get; set; } = true;
/// <summary>
/// 可旋转
/// </summary>
[DisplayName("可旋转")]
public bool rotatable { get; set; } = true;
/// <summary>
/// 可缩放
/// </summary>
[DisplayName("可缩放")]
public bool scalable { get; set; } = true;
/// <summary>
/// 滑动触摸
/// </summary>
[DisplayName("滑动触摸")]
public bool slideOnTouch { get; set; } = true;
/// <summary>
/// 标题
/// </summary>
[DisplayName("标题")]
public bool title { get; set; } = true;
/// <summary>
/// 双击切换
/// </summary>
[DisplayName("双击切换")]
public bool toggleOnDblclick { get; set; } = true;
/// <summary>
/// 工具栏
/// </summary>
[DisplayName("工具栏")]
public bool toolbar { get; set; } = true;
/// <summary>
/// 工具提示
/// </summary>
[DisplayName("工具提示")]
public bool tooltip { get; set; } = true;
/// <summary>
/// 过渡效果
/// </summary>
[DisplayName("过渡效果")]
public bool transition { get; set; } = true;
/// <summary>
/// 触摸缩放
/// </summary>
[DisplayName("触摸缩放")]
public bool zoomOnTouch { get; set; } = true;
/// <summary>
/// 滚轮缩放
/// </summary>
[DisplayName("触摸缩放")]
public bool zoomOnWheel { get; set; } = true;
/// <summary>
/// 缩放率
/// </summary>
[DisplayName("缩放率")]
public double zoomRatio { get; set; } = 0.1;
/// <summary>
/// 可缩放
/// </summary>
[DisplayName("可缩放")]
public bool zoomable { get; set; } = true;
}
Viewerjs.razor代码
@page "/viewer"
<Viewerjs Images="imagesList" />
@code{
List<string>? imagesList;
protected override void OnInitialized()
{
imagesList = new List<string>();
if (!imagesList.Any())
{
for (int i = 1; i <= 9; i++)
{
imagesList.Add($"https://fengyuanchen.github.io/viewerjs/images/thumbnails/tibet-{i}.jpg");
}
}
}
}
@using Blazor100.Components
如果需要断网环境使用此库,需要把库文件和css文件下载放到wwwroot/lib/viewerjs文件夹里面,上面两个文件需要修改一下: 步骤4的viewer.js代码
import 'https://cdnjs.cloudflare.com/ajax/libs/viewerjs/1.10.3/viewer.min.js';
import '/lib/viewerjs/viewer.min.js';
步骤5的Viewerjs.razor代码
href="https://cdnjs.cloudflare.com/ajax/libs/viewerjs/1.10.3/viewer.min.css"
href="/lib/viewerjs/viewer.min.css"
FreeSql QQ群:4336577(已满)、8578575(已满)、52508226(在线)
BA & Blazor QQ群:795206915、675147445
本作品采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议 进行许可。欢迎转载、使用、重新发布,但务必保留文章署名AlexChow(包含链接: https://github.com/densen2014 ),不得用于商业目的,基于本文修改后的作品务必以相同的许可发布。如有任何疑问,请与我联系 。