如何实现Vue中自定义实例化一个长尾词弹窗功能？

本文共计705个文字，预计阅读时间需要3分钟。

目录需求背景下面进行相关讲解需求背景使用iview时发现自定义的this.$Modal.confirm()不能进行样式修改，且对新的知识有进一步追求已有以下开发根据我的文档和习惯，优先考虑以下方案：

目录

• 需求背景
• 下面进行相关讲解

需求背景

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

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

// components/confirmModal/index.vue <template> <Modal v-model="modal" :title="title"> <div>{{content}}</div> <div slot="footer"> <Button class="btn-primary" @click="onSubmit" :loading="loading">sure</Button> <Button class="btn-cancel" @click="cancel">cancel</Button> </div> </Modal> </template> <script> export default { name: 'confirm-modal', data() { return { modal: false, loading: false, title: '', content: '', subFunc: null, cancelFunc: null } }, methods: { show(data) { const { title, content, subFunc, cancelFunc } = data this.modal = true this.title = title this.content = content this.subFunc = subFunc this.cancelFunc = cancelFunc }, onSubmit() { this.subFunc.call() }, cancel() { this.modal = false } } } </script>

// 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弹窗内容请搜索易盾网络以前的文章或继续浏览下面的相关文章希望大家以后多多支持易盾网络！