上一主题 下一主题
ScriptCat,新一代的脚本管理器脚本站,与全世界分享你的用户脚本油猴脚本开发指南教程目录
返回列表 发新帖

[油猴脚本开发指南]油猴脚本调用element plus

[复制链接]

159

主题

1105

帖子

618

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
618
发表于 2021-9-26 09:22:27 | 显示全部楼层 | 阅读模式

前言

我们还有现成的组件库可以使用,那么这节课我们尝试使用vue+element的组合,还是先以网页版直接注入script标签这个方式调用。

图片.png

我们查看官方文档发现引入一个element css文件,一个vue文件,一个element-plus的js文件,那么我们先引入vue吧

let script = document.createElement('script');
script.setAttribute('type', 'text/javascript');
script.src = "https://cdn.jsdelivr.net/npm/vue@next";
document.documentElement.appendChild(script);

然后上去再引入一套css

let link= document.createElement('link');
link.setAttribute('rel', 'stylesheet');
link.href= "https://unpkg.com/element-plus/dist/index.css";
document.documentElement.appendChild(link);

再上去引入一套element-plus的js!

let elscript= document.createElement('script');
elscript.setAttribute('type', 'text/javascript');
elscript.src = "https://unpkg.com/element-plus";
document.documentElement.appendChild(elscript);

接下来查看官方例子,在vue初始化的时候我们需要use一下

      const app = Vue.createApp(App);
      app.use(ElementPlus);
      app.mount("#app");

然后就可以直接使用啦!

并且把之前的代码改成(el-button相当于一个自己创建的标签)

    <div id="app">
      <el-button>{{ message }}</el-button>
    </div>

图片.png

代码如下

// ==UserScript==
// @name         组合使用Vue+Element plus
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @match        https://bbs.tampermonkey.net.cn/forum.php?mod=viewthread&tid=1030
// @icon         https://www.google.com/s2/favicons?domain=tampermonkey.net.cn
// @grant        none
// @run-at document-start
// ==/UserScript==

let script = document.createElement('script');
script.setAttribute('type', 'text/javascript');
script.src = "https://cdn.jsdelivr.net/npm/vue@next";
document.documentElement.appendChild(script);
let link= document.createElement('link');
link.setAttribute('rel', 'stylesheet');
link.href= "https://unpkg.com/element-plus/dist/index.css";
document.documentElement.appendChild(link);
let elscript= document.createElement('script');
elscript.setAttribute('type', 'text/javascript');
elscript.src = "https://unpkg.com/element-plus";
document.documentElement.appendChild(elscript);
window.onload=()=>{
let text=`<div id="app" style="position: absolute;top: 50vh;left: 50vw;background: #fb7d7d;width: 100px;height: 100px;">
           <el-button>{{ message }}</el-button>
    </div>`

var el=document.createElement('div')
el.innerHTML=text;
document.body.append(el)
      const App = {
        data() {
          return {
            message: "Hello Element Plus",
          };
        },
      };
      const app = Vue.createApp(App);
     app.use(ElementPlus);
      app.mount("#app");
}
混的人。

3

主题

12

帖子

7

积分

新手上路

Rank: 1

积分
7
发表于 2021-9-26 13:53:11 | 显示全部楼层
有意思,哪天我用我擅长的React玩下
回复

使用道具 举报

159

主题

1105

帖子

618

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
618
发表于 2021-9-26 14:13:35 | 显示全部楼层
gafish 发表于 2021-9-26 13:53
有意思,哪天我用我擅长的React玩下

哥哥可以试一下
理论React require进来很大概率也要魔改一下
出个教程!
混的人。
回复

使用道具 举报

81

主题

827

帖子

676

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
676

猫咪币纪念章热心会员活跃会员突出贡献三好学生中秋纪念章国庆纪念章

发表于 2021-9-26 14:29:42 | 显示全部楼层
出个webpack的!
上不慕古,下不肖俗。为疏为懒,不敢为狂。为拙为愚,不敢为恶。/ 微信公众号:一之哥哥
回复

使用道具 举报

159

主题

1105

帖子

618

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
618
发表于 2021-9-26 23:36:32 | 显示全部楼层

在准备了,这些讲完+css讲完
我想教webpack打包+webpack原理了
混的人。
回复

使用道具 举报

发表回复

本版积分规则

快速回复 返回顶部 返回列表