vue自定义实例化modal弹窗功能的实现
作者：37 degrees Celsius
这篇文章主要介绍了vue自定义实例化modal弹窗,Vue.extend 属于Vue的全局 api，在实际业务开发中我们很少使用，因为相比常用的 Vue.component写法使用 extend 步骤要更加繁琐一些，本文结合实例代码给大家介绍的非常详细，需要的朋友参考下
需求背景
使用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弹窗内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！