[油猴脚本开发指南]油猴引入Layui库
本帖最后由 Hangover 于 2022-3-17 19:46 编辑首先尝试正常通过require的方式引入js文件
// @require https://unpkg.com/layui@2.6.8/dist/layui.js
可以发现引入扩展模块的路径是根据当前域名来加载的
解决方法一：
创建script标签包含js文件再插入到body中
let script = document.createElement("script");
script.type = "text/javascript";
script.src="https://unpkg.com/layui@2.6.8/dist/layui.js";
document.body.appendChild(script);
unsafeWindow.onload = function () {
layer.msg('只想弱弱提示');
}
打开F12可以看到扩展模块按照正确的路径加载，并且layer组件的功能可以正常使用
解决方法二：
修改layui.js文件源码再发布：https://cdn.jsdelivr.net/npm/zhangsan-layui@1.0.3/layui.js
想自己修改发布的可以阅读>>>NPM发布魔改包：https://bbs.tampermonkey.net.cn/thread-1123-1-1.html
有时间的朋友可以仔细分析下，这里只修改了一行代码
就是源文件扩展模块的加载路径
现在再以require的方式引入js文件
// @require https://cdn.jsdelivr.net/npm/zhangsan-layui@1.0.3/layui.js
let myapp = document.createElement("div");
document.body.appendChild(myapp);
myapp.id = "my-app";
myapp.innerHTML = `
<link rel="stylesheet" href="https://unpkg.com/layui@2.6.8/dist/css/layui.css">
<div class="layui-inline">
<input type="text" class="layui-input" id="test">
</div>`
layui.use('laydate', function () {
var laydate = layui.laydate;
laydate.render({
elem: '#test',
value: new Date(),
zIndex: 99999999,
theme: '#328dd1',
ready: function (date) {
console.log(date)
},
change: function (value, date, endDate) {
console.log(value, date, endDate)
},
done: function (value, date, endDate) {
console.log(value, date, endDate)
}
})
})
上图是Layui库中的日期组件，可以看到js与css文件都成功加载，组件功能正常使用
完整demo：https://bbs.tampermonkey.net.cn/thread-1911-1-1.html
与个别网页的插件不兼容的话，可以再分析修改源码发布~
本文在李恒道大师指导下编写~
？李恒道不知道李恒道指导了 纳入油猴脚本开发指南！ 李恒道 发表于 2022-3-17 18:58
？李恒道不知道李恒道指导了
从零开始不都是你指导的？ Hangover 发表于 2022-3-17 19:18
从零开始不都是你指导的？
能改个名么，想改叫油猴引入Layui库 李恒道 发表于 2022-3-17 19:44
能改个名么，想改叫油猴引入Layui库
虽然layui的官网都下线了，但还有layui-vue
http://layui-vue.pearadmin.com/zh-CN/index 图片能修复一下吗？ 不知名用户 发表于 2022-4-16 22:14
图片能修复一下吗？
修复好了👌🏻 Hangover 发表于 2022-4-17 00:23
修复好了👌🏻
谢谢{:4_94:} 哥哥，我想咨询下，我引入layui库或者其他库，就会影响到页面的其他元素，比如字体变大，字体变黑之类的，有没有办法避免，或者只取框架中的其中一个功能出来用的
页:
[1]
2