分享下脚本引入Vuetify

yhzc2023

发现网上好像没有，所以分享出来
不是很懂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也行
等我明天凹一下