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

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

以上为个人经验,希望能给大家一个参考,也希望大家多多支持易知道(ezd.cc)。 

推荐阅读