vue3如何自定義js文件(插件或配置)
更新時間：2022年08月09日 10:16:32 作者：Mosowe
這篇文章主要介紹了vue3如何自定義js文件(插件或配置)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
vue3自定義js文件
在vue3中自定義的js文件，如果需要設置全局this.xxx調(diào)用方式的話，需要給方法、變量、常量export出去，調(diào)用install()方法
插件的功能范圍沒有嚴格的限制——一般有下面幾種：
添加全局方法或者 property。如：vue-custom-element
添加全局資源：指令/過濾器/過渡等。如：vue-touch
通過全局混入來添加一些組件選項。如：vue-router
添加全局實例方法，通過把它們添加到 config.globalProperties 上實現(xiàn)。
一個庫，提供自己的 API，同時提供上面提到的一個或多個功能。如 vue-router
export default {
? install: (app) => {
? }
?}舉例騰訊防水墻js調(diào)用文件
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)建構(gòu)造器，定義好提示信息的模板
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)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue3 去除 vue warn 及生產(chǎn)環(huán)境去除console.log的方法
這篇文章主要介紹了Vue3 去除 vue warn 及生產(chǎn)環(huán)境去除console.log的方法，本文結(jié)合實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-06-06
python虛擬環(huán)境 virtualenv的簡單使用
virtualenv是一個創(chuàng)建隔絕的Python環(huán)境的工具。這篇文章主要介紹了python虛擬環(huán)境 virtualenv的簡單使用，本文給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2020-01-01
vue組件props不同數(shù)據(jù)類型傳參的默認值問題
這篇文章主要介紹了vue組件props不同數(shù)據(jù)類型傳參的默認值問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07
Vue結(jié)合echarts實現(xiàn)繪制水滴圖
這篇文章主要為大家詳細介紹了Vue如何結(jié)合echarts實現(xiàn)水滴圖的繪制，文中的示例代碼講解詳細，感興趣的小伙伴可以跟隨小編一起學習一下2023-07-07
在Vue項目中,你可以使用路由（vue-router）來實現(xiàn)頁面跳轉(zhuǎn)并傳遞參數(shù),這篇文章主要為大家整理了一些常用的方法,感興趣的小伙伴可以學習一下2023-11-11
本文主要介紹了vue調(diào)用攝像頭進行拍照并能保存到本地的方法，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
在Vue.js項目中使用vue-router的history模式時,直接訪問或刷新頁面可能會導致404錯誤,文中通過代碼介紹的非常詳細,對大家的學習或者工作具有一定參考借鑒價值,需要的朋友可以參考下2024-11-11
vue3中el-uplod結(jié)合ts實現(xiàn)圖片粘貼上傳
本文主要介紹了vue3中el-uplod結(jié)合ts實現(xiàn)圖片粘貼上傳,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2024-07-07
這篇文章主要為大家詳細介紹了VUE使用canvas實現(xiàn)簽名組件，兼容PC移動端，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
在Vue?3中，可以使用多種方式來使用SVG圖標，這篇文章主要為大家總結(jié)了五個常用的方式，文中的示例代碼講解詳細，感興趣的小伙伴可以了解下2023-08-08