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

2024-04-02 19:04:59 268人浏览独家记忆

摘要

目录需求背景下面进行相关讲解需求背景使用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弹窗内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: vue自定义实例化modal弹窗功能的实现

本文链接: https://www.lsjlt.com/news/168500.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341