您现在的位置是：网站首页> 编程资料编程资料

vue自定义实例化modal弹窗功能的实现_vue.js_

2023-05-24 285人已围观

简介 vue自定义实例化modal弹窗功能的实现_vue.js_

需求背景

使用iview时发现其定义的this.$Modal.confirm()不能进行样式修改，并且秉承着对新知识的追求，故此有了以下的开发

按照我的文档习惯：优先上代码

// components/confirmModal/index.vue 
// components/confirmModal/index.js import Vue from 'vue' import ConfirmModal from './index.vue' const Modal = Vue.extend(ConfirmModal) let instance1 let instance = new Modal() instance.confirm = function (data) { instance1 = new Modal({ data }).$mount() document.body.appendChild(instance1.$el) if (data) { instance1.show(data) } return instance1 } instance.remove = function () { instance1.cancel() } export default { install: Vue => { Vue.prototype.$ConfirmModal = instance // 将ConfirmModal 组件暴露出去，并挂载在Vue的prototype上 } } 
// main.js import Vue from "vue"; import ConfirmModal from './components/shared/confirmModal/index.js' Vue.use(ConfirmModal)

下面进行相关讲解

1. 写一个相关的vue组件：index.vue

这里vue组件根据自己所需进行书写，我这里就不进行相关讲解了;

2. 通过js文件将vue文件暴露出去

创建confirmModal实例，并挂载到一个dom实例上。

const Modal = Vue.extend(ConfirmModal)

Vue.extend 属于Vue的全局 api，在实际业务开发中我们很少使用，因为相比常用的 Vue.component写法使用 extend 步骤要更加繁琐一些。但是在一些独立组件开发场景中（例如：ElementUI库），所以Vue.extend + $mount这对组合非常有必要需要我们了解下。

在这里插入图片描述

在这里插入图片描述

再new一个instance对象，其中包含多个你所需要调用的方法，我这里定义了两个，分别是confirm、 remove且在最初时需要将你挂载的instance1存起来，避免在其他function中需要使用

最后export default instance即可

3. 需要在main.js中使用Vue.use(ConfirmModal)进行使用

import Vue from "vue"; import ConfirmModal from './components/shared/confirmModal/index.js' Vue.use(ConfirmModal)

4. 用法

在任何vue中直接使用即可

this.$ConfirmModal.confirm({ title: '123', content: '12111', subFunc: () => { console.log('1111') console.log(this.$ConfirmModal) this.$ConfirmModal.remove() } })

到此这篇关于vue自定义实例化modal弹窗的文章就介绍到这了,更多相关vue自定义modal弹窗内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！

您可能感兴趣的文章:

上一篇：Javascript数组的 forEach 方法详细介绍_javascript技巧_

下一篇：Javascript数组的 splice 方法详细介绍_javascript技巧_

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网