vue實(shí)現(xiàn)自定義組件掛載原型上
更新時(shí)間：2022年08月09日 10:26:39 作者：Mosowe
這篇文章主要介紹了vue實(shí)現(xiàn)自定義組件掛載原型上方式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
自定義組件掛載原型上
以elementUI二次分裝dialog舉例
PageDialog.vue
<!-- 頁面提示彈框 -->
<template>
? ? <el-dialog
? ? ? :visible.sync="show"
? ? ? class="page-dialog-wrapper"
? ? ? custom-class="page-dialog-component"
? ? ? :width="width"
? ? ? :append-to-body="true"
? ? ? :show-close="false"
? ? ? :close-on-click-modal="false">
? ? ? <div class="container">
? ? ? ? <div class="title">
? ? ? ? ? <slot name='title-icon'>
? ? ? ? ? ? <i
? ? ? ? ? ? ? :class="titleIcon"
? ? ? ? ? ? ? v-if="titleIcon">
? ? ? ? ? ? </i>
? ? ? ? ? </slot>
? ? ? ? ? {{title}}
? ? ? ? ? <i
? ? ? ? ? ? class="el-icon-close close-btn"
? ? ? ? ? ? @click="close"
? ? ? ? ? ? v-if="showClose">
? ? ? ? ? </i>
? ? ? ? </div>
? ? ? ? <div class="content">
? ? ? ? ? <slot>
? ? ? ? ? ? <div class="text" v-html="message"></div>
? ? ? ? ? </slot>
? ? ? ? ? <div class="btns" v-if="showConfirm || showCancel">
? ? ? ? ? ? <el-button
? ? ? ? ? ? ? class="btn cancel"
? ? ? ? ? ? ? @click="close"
? ? ? ? ? ? ? v-if="showCancel">
? ? ? ? ? ? ? {{cancelText}}
? ? ? ? ? ? </el-button>
? ? ? ? ? ? <el-button
? ? ? ? ? ? ? class="btn"
? ? ? ? ? ? ? @click="confirm"
? ? ? ? ? ? ? v-if="showConfirm">
? ? ? ? ? ? ? {{confirmText}}
? ? ? ? ? ? </el-button>
? ? ? ? ? </div>
? ? ? ? </div>
? ? ? </div>
? ? </el-dialog>
</template><script>
/**
?* slot：
?* ?default：提示文本區(qū)域，默認(rèn)
?* ?title-icon：標(biāo)題前面的icon
?* function：
?* ?confirm：確認(rèn)按鈕點(diǎn)擊
?* ?close：取消及關(guān)閉按鈕點(diǎn)擊
?*/
export default {
? name: 'PageDialogComponent',
? components: {},
? props: {
? ? show: { // 隱藏顯示
? ? ? type: Boolean,
? ? ? default: false,
? ? },
? ? width: { // 寬度
? ? ? type: String,
? ? ? default: '600px',
? ? },
? ? title: { // 標(biāo)題
? ? ? type: String,
? ? ? default: '提示',
? ? },
? ? titleIcon: { // 標(biāo)題icon
? ? ? type: String,
? ? ? default: '',
? ? },
? ? showCancel: { // 是否顯示取消按鈕
? ? ? type: Boolean,
? ? ? default: false,
? ? },
? ? cancelText: { // 取消按鈕文本
? ? ? type: String,
? ? ? default: '取消',
? ? },
? ? showConfirm: { // 是否顯示確認(rèn)按鈕
? ? ? type: Boolean,
? ? ? default: true,
? ? },
? ? confirmText: { // 確認(rèn)按鈕文本
? ? ? type: String,
? ? ? default: '確定',
? ? },
? ? message: { // 提示內(nèi)容
? ? ? type: String,
? ? ? default: '這里是提示語',
? ? },
? ? showClose: { // 是否顯示關(guān)閉按鈕
? ? ? type: Boolean,
? ? ? default: true,
? ? },
? },
? methods: {
? ? // 確定
? ? confirm() {
? ? ? this.$emit('confirm');
? ? },
? ? // 關(guān)閉
? ? close() {
? ? ? this.$emit('close');
? ? },
? },
};
</script><style lang='less' scoped> // 樣式區(qū) </style>
同目錄新建index.js
import vue from 'vue';
// 這里就是我們剛剛創(chuàng)建的那個(gè)靜態(tài)組件
import pageDialog from './PageDialog.vue';
// 返回一個(gè) 擴(kuò)展實(shí)例構(gòu)造器
const DialogConstructor = vue.extend(pageDialog);
// 定義彈出組件的函數(shù)
function showDialog(options) {
? return new Promise((resolve, reject) => {
? ? const dialogDom = new DialogConstructor({
? ? ? el: document.createElement('div'),
? ? });
? ? dialogDom.width = options.width || dialogDom.width;
? ? dialogDom.title = options.title || dialogDom.title;
? ? dialogDom.titleIcon = options.titleIcon || dialogDom.titleIcon;
? ? dialogDom.showCancel = options.showCancel || dialogDom.showCancel;
? ? dialogDom.cancelText = options.cancelText || dialogDom.cancelText;
? ? dialogDom.showConfirm = options.showConfirm || dialogDom.showConfirm;
? ? dialogDom.confirmText = options.confirmText || dialogDom.confirmText;
? ? dialogDom.message = options.message || dialogDom.message;
? ? dialogDom.showClose = options.showClose || dialogDom.showClose;
? ? dialogDom.show = true;
? ? document.body.appendChild(dialogDom.$el);
? ? dialogDom.confirm = function () { // 確定按鈕
? ? ? resolve();
? ? ? dialogDom.show = false;
? ? };
? ? dialogDom.close = function () { // 取消按鈕
? ? ? reject();
? ? ? dialogDom.show = false;
? ? };
? });
}
// 注冊為全局組件的函數(shù)
function registryDialog() {
? // 將組件注冊到 vue 的 原型鏈里去,
? // 這樣就可以在所有 vue 的實(shí)例里面使用 this.$pageDialog()
? vue.prototype.$pageDialog = showDialog;
}
export default registryDialog;main.js中引入
import pageDialog from '../components/page-dialog/index'; Vue.use(pageDialog)
可以html組件使用
? ? <!-- 刪除前提示 --> ? ? <page-dialog ? ? :show="showDialog" ? ? showCancel ? ? message="確認(rèn)刪除已選產(chǎn)品？" ? ? @confirm="deleteChoose" ? ? @close="showDialog = false"/>
或者在js中使用
? ? ? ? this.$pageDialog({
? ? ? ? ? message: '審核后的訂單有部分發(fā)生變化，確定按調(diào)整后訂單支付？',
? ? ? ? ? showCancel: true,
? ? ? ? ? cancelText: '我在想想',
? ? ? ? }).then(() => {
? ? ? ? // 搞事情
? ? ? ? }).catch(() => {
? ? ? ? // 搞事情
? ? ? ? });在原型上掛載方法和組件
掛在方法,在main.js中
Vue.prototype.langs = function lang(en, id, zh) {
? const L = this.language
? switch (L) {
? ? case 'en':
? ? ? return en || ''
? ? case 'id':
? ? ? return id || ''
? ? case 'zh':
? ? ? return zh || ''
? }
}使用：this.langs()
注意：
1、如當(dāng)前頁面中的方法與原型方法名字一致，則會(huì)覆蓋原型的方法
2、如果原型方法太多寫在main.js中會(huì)贅余，所以一般在另外創(chuàng)建一個(gè)js文件，這個(gè)js文件都是全部寫原型的方法，然后引入到main.js當(dāng)中，然后把它放在這個(gè)位置
new Vue({
? el: '#app',
? router,
? store,
? test, // 比如這個(gè)就是js文件,放到vue上面
? components: { App },
? template: '<App/>'
})掛載組件
import testA from '@/A'
Vue.component('testA ', testA )使用：<testA></testA>或者<test-a><test-a/>
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
眾所周知組合式API是一系列API的集合,使我們可以使用函數(shù)而不是聲明選項(xiàng)的方式書寫Vue組件,這篇文章主要給大家介紹了關(guān)于Vue組合式API的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-04-04
vue打印功能實(shí)現(xiàn)的兩種方法總結(jié)
在項(xiàng)目中,有時(shí)需要打印頁面的表格,所以下面這篇文章主要給大家介紹了關(guān)于vue打印功能實(shí)現(xiàn)的兩種方法,以及批量打印的完整代碼,需要的朋友可以參考下2021-06-06
vue中使用keep-alive動(dòng)態(tài)刪除已緩存組件方式
這篇文章主要介紹了vue中使用keep-alive動(dòng)態(tài)刪除已緩存組件方式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
vue實(shí)現(xiàn)關(guān)鍵字高亮效果的示例代碼
這篇文章主要為大家詳細(xì)介紹了如何使用vue實(shí)現(xiàn)關(guān)鍵字高亮效果,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-11-11
淺談vue中改elementUI默認(rèn)樣式引發(fā)的static與assets的區(qū)別
下面小編就為大家分享一篇淺談vue中改elementUI默認(rèn)樣式引發(fā)的static 與assets的區(qū)別，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
vue實(shí)現(xiàn)移動(dòng)端原生小球滑塊
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)移動(dòng)端原生小球滑塊，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
Vue項(xiàng)目保持element組件同行,設(shè)置組件不自動(dòng)換行問題
這篇文章主要介紹了Vue項(xiàng)目保持element組件同行,設(shè)置組件不自動(dòng)換行問題。具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-02-02
這篇文章主要為大家介紹了vue3 diff 的算法示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
解決Element ui導(dǎo)航欄選中背景色刷新消失的問題
這篇文章主要介紹了解決Element ui導(dǎo)航欄選中背景色刷新消失的問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
在本篇內(nèi)容里小編給大家整理了關(guān)于Vue用cmd創(chuàng)建項(xiàng)目的方法講解，有興趣的朋友們跟著學(xué)習(xí)下。2019-02-02