vue实现自定义组件挂载原型上

目录 自定义组件挂载原型上 以elementUI二次分装dialog举例 在原型上挂载方法和组件 挂在方法,在main.js中 挂载组件

自定义组件挂载原型上

以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/> 

以上为个人经验，希望能给大家一个参考，也希望大家多多支持。 

查看更多关于vue实现自定义组件挂载原型上的详细内容...