Blazor组件自做三 : 使用JS隔离封装ZXing扫码 本文基础步骤参考前两篇文章 Blazor组件自做一 : 使用JS隔离封装viewerjs库 Blazor组件自做二 : 使用JS隔离制作手写签名组件 1. 在文件夹wwwroot/lib,添加zxing子文件夹,里面下载库文件(文件文末源码里可复制) qrcode.min.js和zxing.min.js复制到此文件夹. 最终版本参考如下 +zxing |-qrcode.min.js |-zxing.min.js 2. 添加zxingjs…

1. 运行截图 演示地址 2. 在文件夹wwwroot/lib,添加kioskboard子文件夹,添加kioskboards.js文件 2.1 常规操作,懒加载js库, export function addScript(url) { let scriptsIncluded = false; let scriptTags = document.querySelectorAll('head > script'); scriptTags.forEach(scriptTag => { if (scr…

Viewer.js库是一个实用的js库,用于图片浏览,放大缩小翻转幻灯片播放等实用操作 本文相关参考链接 JavaScript 模块中的 JavaScript 隔离 Viewer.js工程 Blazor JS 隔离优势 导入的 JS 不再污染全局命名空间. 库和组件的使用者不需要导入相关的 JS.即不需要再在ssr的 Pages/_Host.cshtml 或 Pages/_Layout.cshtml ,wasm的 wwwroot/index.html 里写 第一遍载入静态资产请求包含值为 no-…

Blazor组件自做二 : 使用JS隔离制作手写签名组件 本文相关参考链接 JavaScript 模块中的 JavaScript 隔离 Viewer.js工程 Blazor组件自做一 : 使用JS隔离封装viewerjs库 Blazor JS 隔离优势 导入的 JS 不再污染全局命名空间. 库和组件的使用者不需要导入相关的 JS.即不需要再在ssr的 Pages/_Host.cshtml 或 Pages/_Layout.cshtml ,wasm的 wwwroot/index.html 里写 第一…

运行截图 演示地址 响应式演示 感谢szimek写的棒棒的signature_pad.js项目, 来源: https://github.com/szimek/signature_pad 正式开始 1. 在文件夹wwwroot/lib,添加signature_pad子文件夹,里面下载库文件(文件文末源码里可复制) signature_pad.umd.js复制到此文件夹. 最终版本参考如下 +signature_pad |-signature_pad.umd.js 2. 添加app.js文件 +si…

Blazor组件自做五: 使用JS隔离封装Google地图 运行截图 演示地址 正式开始 1. 谷歌地图API 谷歌开发文档 开始学习 Maps JavaScript API 的最简单方法是查看一个简单示例.以下示例显示以澳大利亚新南威尔士州悉尼为中心的地图. 异步加载例子 JS代码 let map; function initMap() { map = new google.maps.Map(document.getElementById("map"), { center: { la…

1. 运行截图 演示地址 2. 在文件夹wwwroot/lib,添加baidu子文件夹,添加baidumap.js文件 2.1 跟上一篇类似,用代码方式异步加载API,脚本生成新的 body > script 元素添加到页面文档,使用异步加载回调 initMapsG 方法初始化地图. var map = null; var containerid = null; export function addScript(key, elementId, dotnetRef, backgroundColo…

接上篇 Blazor组件自做九: 用20行代码实现文件上传,浏览目录功能 (2) 7. 使用配置文件指定监听地址 打开 appsettings.json 文件,加入一行 "UseUrls": "http://localhost:8000;http://0.0.0.0:8000;", 完整文件如下 { "UseUrls": "http://localhost:8000;http://0.0.0.0:8000;", //加入这句…

$(data).each(function(i, item) { // innerHTML += '<li type-id="'+item.id+'">'+ // '<img src="'+(item.imgs?item.imgs:'../../img/videoBg1.jpg')+'" alt="">'+ // '<p>'+item.name+'</p>'+ // '</li>'; i…

突发奇想的需求,要在官网上放一个一个半小时的视频教程…… 然而,加载成了问题,页面是cshtml的.net混合网站,不知道哪儿的限制,导致视频加不出来. 没有办法,只能前端想办法了. 于是将视频切割成4个 依次加载自动播放.效果还可以. 代码: 引入:<link rel="stylesheet" href="//cdn.bootcss.com/video.js/6.0.0-RC.5/alt/video-js-cdn.min.css"> <scrip…