vue實現自定義組件掛載原型上
自定義組件掛載原型上
以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：提示文本區域，默認
* 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: { // 提示內容
type: String,
default: '這裡是提示語',
},
showClose: { // 是否顯示關閉按鈕
type: Boolean,
default: true,
},
},
methods: {
// 確定
confirm() {
this.$emit('confirm');
},
// 關閉
close() {
this.$emit('close');
},
},
};
</script>
<style lang='less' scoped> // 樣式區 </style>
同目錄新建index.js
import vue from 'vue';
// 這裡就是我們剛剛創建的那個靜態組件
import pageDialog from './PageDialog.vue';
// 返回一個 擴展實例構造器
const DialogConstructor = vue.extend(pageDialog);
// 定義彈出組件的函數
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;
};
});
}
// 註冊為全局組件的函數
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="確認刪除已選產品？" @confirm="deleteChoose" @close="showDialog = false"/>
或者在js中使用
this.$pageDialog({
message: '審核後的訂單有部分發生變化，確定按調整後訂單支付？',
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中會贅餘，所以一般在另外創建一個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/>
以上為個人經驗，希望能給大傢一個參考，也希望大傢多多支持WalkonNet。