分享下脚本引入Vuetify
发现网上好像没有，所以分享出来不是很懂vue有什么错误，麻烦大家指点。
部分网站挂载全屏，内容会显示不出来。不知道是为什么，所以最好给挂载的内容设置个长宽
```
function importVuetify() {
const vuetifyCSS = unsafeWindow.document.createElement('link');
vuetifyCSS.rel = 'stylesheet';
vuetifyCSS.href = 'https://cdn.jsdelivr.net/npm/vuetify@3.3.9/dist/vuetify.min.css';
unsafeWindow.document.head.appendChild(vuetifyCSS);
const script = unsafeWindow.document.createElement('script');
script.src = 'https://unpkg.com/vue@3/dist/vue.global.js';
unsafeWindow.document.head.appendChild(script);
script.onload = function () {
GM_xmlhttpRequest(
{
method: 'GET',
url: 'https://cdn.jsdelivr.net/npm/vuetify@3.3.9/dist/vuetify.min.js',
onload: function (response) {
let text = response.responseText;
text = text.replace('"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("vue")):"function"==typeof define&&define.amd?define(["exports","vue"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).Vuetify={},e.Vue)',
'e = unsafeWindow;t(e.Vuetify = {}, e.Vue);'
);
eval(text);
Vue = unsafeWindow.Vue;
Vuetify = unsafeWindow.Vuetify;
initApp();
}
}
);
};
}
function initApp() {
// 创建一个新的div元素来放置我们的Vue应用
let app = unsafeWindow.document.createElement('div');
app.id = 'vuetify-app1111';
app.style.position = 'fixed';
app.style.top = '20px';
app.style.right = '20px';
app.style.zIndex = '9999';
app.style.width = '300px';// 设置宽度
app.style.height = 'auto';// 高度自适应
app.style.backgroundColor = 'white';// 设置背景色
app.style.boxShadow = '0 0 10px rgba(0,0,0,0.1)';// 添加阴影效果
app.style.borderRadius = '8px';// 圆角
app.style.overflow = 'hidden';// 隐藏溢出内容
unsafeWindow.document.body.appendChild(app);
// 初始化Vue应用
const { createApp } = Vue;
const vuetify = Vuetify.createVuetify();
createApp({
data() {
return {
message: 'Hello Vuetify!'
};
},
template: `
<v-app>
<v-main>
<v-container>
<v-btn color="primary">{{ message }}</v-btn>
<v-text-field label="Input" variant="outlined" class="mt-4"></v-text-field>
<v-switch label="Toggle me" class="mt-4"></v-switch>
</v-container>
</v-main>
</v-app>
`
}).use(vuetify).mount('#vuetify-app1111');
const remove_popup_hander = (event) => {
if (!app.contains(event.target)) {
app.remove();
unsafeWindow.document.removeEventListener('click', remove_popup_hander);
}
};
unsafeWindow.document.addEventListener('click', remove_popup_hander);
}
``` 按道理来说直接require也行
等我明天凹一下
页:
[1]