您现在的位置是:网站首页> 编程资料编程资料
vue实现自定义组件挂载原型上_vue.js_
2023-05-24
336人已围观
简介 vue实现自定义组件挂载原型上_vue.js_
自定义组件挂载原型上
以elementUI二次分装dialog举例
PageDialog.vue
{{title}} {{cancelText}} {{confirmText}}
同目录新建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组件使用
或者在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: ' ' })挂载组件
import testA from '@/A' Vue.component('testA ', testA )使用:
以上为个人经验,希望能给大家一个参考,也希望大家多多支持。
您可能感兴趣的文章:
相关内容
- NPM配置私服构建内网中央仓库过程详解_node.js_
- vue3如何自定义js文件(插件或配置)_vue.js_
- vue3自定义组件之v-model实现父子组件双向绑定_vue.js_
- vue自定义加载指令v-loading占位图指令v-showimg_vue.js_
- vue3点击出现弹窗后背景变暗且不可操作的实现代码_vue.js_
- 三种在ES6中将非数组转换为数组的方法详情_javascript技巧_
- vue性能优化之cdn引入vue-Router的问题_vue.js_
- UMD的包导出TS 类型方法示例_JavaScript_
- Node多进程的实现方法_node.js_
- vue中对监听esc事件和退出全屏问题的解决方案_vue.js_
