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

Hangover

首先尝试正常通过require的方式引入js文件

1. // @require   https://unpkg.com/layui@2.6.8/dist/layui.js

复制代码

可以发现引入扩展模块的路径是根据当前域名来加载的

解决方法一：

创建script标签包含js文件再插入到body中

1. let script = document.createElement("script");
   
2. script.type = "text/javascript";
   
3. script.src="https://unpkg.com/layui@2.6.8/dist/layui.js";
   
4. document.body.appendChild(script);
   
5. unsafeWindow.onload = function () {
   
6.     layer.msg('只想弱弱提示');
   
7. }

复制代码

打开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文件

1. // @require      https://cdn.jsdelivr.net/npm/zhangsan-layui@1.0.3/layui.js
   
2. 
   
3. let myapp = document.createElement("div");
   
4. document.body.appendChild(myapp);
   
5. myapp.id = "my-app";
   
6. myapp.innerHTML = `
   
7. <link rel="stylesheet" href="https://unpkg.com/layui@2.6.8/dist/css/layui.css">
   
8. <div class="layui-inline">
   
9.     <input type="text" class="layui-input" id="test">
   
10. </div>`
    
11. layui.use('laydate', function () {
    
12.     var laydate = layui.laydate;
    
13. 
    
14.     laydate.render({
    
15.         elem: '#test',
    
16.         value: new Date(),
    
17.         zIndex: 99999999,
    
18.         theme: '#328dd1',
    
19.         ready: function (date) {
    
20.             console.log(date)
    
21.         },
    
22.         change: function (value, date, endDate) {
    
23.             console.log(value, date, endDate)
    
24.         },
    
25.         done: function (value, date, endDate) {
    
26.             console.log(value, date, endDate)
    
27.         }
    
28.     })
    
29. })

复制代码

上图是Layui库中的日期组件，可以看到js与css文件都成功加载，组件功能正常使用
完整demo：https://bbs.tampermonkey.net.cn/thread-1911-1-1.html

与个别网页的插件不兼容的话，可以再分析修改源码发布~

本文在李恒道大师指导下编写~

李恒道

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

李恒道

纳入油猴脚本开发指南！

Hangover

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

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

李恒道

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

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

Hangover

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

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

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

不知名用户

图片能修复一下吗？

Hangover

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

图片能修复一下吗？

修复好了👌🏻

不知名用户

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

谢谢

BlenderB

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