vue自定义modal弹窗
37 degrees Celsius 人气:0需求背景
使用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() } })
加载全部内容