[油猴脚本开发指南]油猴引入Layui库

Hangover · 发表于 2022-3-17 15:18:09

本帖最后由 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组件的功能可以正常使用
QQ图片20220317145532.png

解决方法二：

修改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

有时间的朋友可以仔细分析下，这里只修改了一行代码

就是源文件扩展模块的加载路径

QQ图片20220317150259.png

现在再以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:37

？李恒道不知道李恒道指导了

李恒道 · 发表于 2022-3-17 18:59:51

纳入油猴脚本开发指南！

Hangover · 发表于 2022-3-17 19:18:22

李恒道发表于 2022-3-17 18:58
？李恒道不知道李恒道指导了

从零开始不都是你指导的？

李恒道 · 发表于 2022-3-17 19:44:39

Hangover 发表于 2022-3-17 19:18
从零开始不都是你指导的？

能改个名么，想改叫油猴引入Layui库

Hangover · 发表于 2022-3-17 19:57:33

李恒道发表于 2022-3-17 19:44
能改个名么，想改叫油猴引入Layui库

虽然layui的官网都下线了，但还有layui-vue

http://layui-vue.pearadmin.com/zh-CN/index

不知名用户 · 发表于 2022-4-16 22:14:53

图片能修复一下吗？

Hangover · 发表于 2022-4-17 00:23:51

不知名用户发表于 2022-4-16 22:14

图片能修复一下吗？

修复好了👌🏻

不知名用户 · 发表于 2022-4-17 08:19:47

Hangover 发表于 2022-4-17 00:23
[md]修复好了👌🏻[/md]

谢谢

BlenderB · 发表于 2023-3-30 11:29:19

哥哥，我想咨询下，我引入layui库或者其他库，就会影响到页面的其他元素，比如字体变大，字体变黑之类的，有没有办法避免，或者只取框架中的其中一个功能出来用的

[油猴脚本开发指南]油猴引入Layui库

发表回复

浏览过的版块

荣誉开发者

油中2周年

生态建设者

喜迎中秋