欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue3如何自定義js文件(插件或配置)

 更新時間：2022年08月09日 10:16:32   作者：Mosowe  
這篇文章主要介紹了vue3如何自定義js文件(插件或配置)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

vue3自定義js文件

在vue3中自定義的js文件，如果需要設置全局this.xxx調用方式的話，需要給方法、變量、常量export出去，調用install()方法

插件的功能范圍沒有嚴格的限制——一般有下面幾種：

添加全局方法或者 property。如：vue-custom-element

添加全局資源：指令/過濾器/過渡等。如：vue-touch

通過全局混入來添加一些組件選項。如：vue-router

添加全局實例方法，通過把它們添加到 config.globalProperties 上實現(xiàn)。

一個庫，提供自己的 API，同時提供上面提到的一個或多個功能。如 vue-router

export default {
? install: (app) => {
? }
?}

舉例騰訊防水墻js調用文件

v2

// TencentCaptcha.js
import Vue from 'vue';
const appId = '*********';
Vue.prototype.$txCaptcha = (cb) => {
? const t = new window.TencentCaptcha(appId, (rsp) => {
? ? t.destroy();
? ? cb(rsp);
? }, {});
? t.show();
};
// main.js
import './config/TencentCaptcha';

使用

export default {
// ...
methods:{
?? ?getCode () {
?? ??? ?this.$txCaptcha((res) => {
?? ??? ? ? ?this.txResult = res;
?? ??? ?});
?? ?}
}
}

v3

// TencentCaptcha.js
const appId = '*********';
export default {
? install: (app) => {
? ? const Vue = app;
? ? Vue.config.globalProperties.$txCaptcha = (cb) => {
? ? ? const t = new window.TencentCaptcha(appId, (rsp) => {
? ? ? ? t.destroy();
? ? ? ? cb(rsp);
? ? ? }, {});
? ? ? t.show();
? ? };
? },
};
// main.js
import { createApp } from 'vue';
import App from './App.vue';
import txCaptcha from './config/TencentCaptcha';
createApp(App).use(txCaptcha)

使用

<script setup lang="ts">
import {getCurrentInstance} from 'vue'
getCurrentInstance().appContext.config.globalProperties.$txCaptcha((res) => {
? ? this.txResult = res;
});
</script>

vue加載自定義的js文件

在做項目中需要自定義彈出框。就自己寫了一個。

效果圖

這里寫圖片描述

遇見的問題

怎么加載自定義的js文件

vue-插件這必須要看。然后就是自己寫了。

export default{
    install(Vue){
        var tpl;
        // 彈出框
        Vue.prototype.showAlter = (title,msg) =>{
            var alterTpl = Vue.extend({     // 1、創(chuàng)建構造器，定義好提示信息的模板
                    template: '<div id="bg">'
                         + '<div class="jfalter">'
                         + '<div class="jfalter-title" id="title">'+ title +'</div>'
                         + '<div class="jfalter-msg" id="message">'+ msg +'</div>'
                         + '<div class="jfalter-btn" id="sureBtn" v-on:click="hideAlter">確定</div>'
                         + '</div></div>'
            });
            tpl = new alterTpl().$mount().$el;  // 2、創(chuàng)建實例，掛載到文檔以后的地方
            document.body.appendChild(tpl);  
        }
        Vue.mixin({
          methods: {
            hideAlter: function () {
              document.body.removeChild(tpl);
            }
          }
        })
    }
}

使用

import jFAltre from '../../assets/jfAletr.js';
import Vue from 'vue';
Vue.use(jFAltre);
this.showAlter('提示','服務器請求失敗');

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

相關文章

最新評論