vue实现自定义组件挂载原型上
作者：Mosowe
这篇文章主要介绍了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/>
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。