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