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