快捷導(dǎo)航

vue自定義實(shí)例化modal彈窗功能的實(shí)現(xiàn)

更新時(shí)間：2022年09月27日 10:13:45 作者：37 degrees Celsius

這篇文章主要介紹了vue自定義實(shí)例化modal彈窗,Vue.extend 屬于Vue的全局 api，在實(shí)際業(yè)務(wù)開(kāi)發(fā)中我們很少使用，因?yàn)橄啾瘸Ｓ玫?nbsp;Vue.component寫(xiě)法使用 extend 步驟要更加繁瑣一些，本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友參考下

需求背景

使用iview時(shí)發(fā)現(xiàn)其定義的this.$Modal.confirm()不能進(jìn)行樣式修改，并且秉承著對(duì)新知識(shí)的追求，故此有了以下的開(kāi)發(fā)

按照我的文檔習(xí)慣：優(yōu)先上代碼

//  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)

下面進(jìn)行相關(guān)講解

1. 寫(xiě)一個(gè)相關(guān)的vue組件：index.vue

這里vue組件根據(jù)自己所需進(jìn)行書(shū)寫(xiě)，我這里就不進(jìn)行相關(guān)講解了;

2. 通過(guò)js文件將vue文件暴露出去

創(chuàng)建confirmModal實(shí)例，并掛載到一個(gè)dom實(shí)例上。

const Modal = Vue.extend(ConfirmModal)

Vue.extend 屬于Vue的全局 api，在實(shí)際業(yè)務(wù)開(kāi)發(fā)中我們很少使用，因?yàn)橄啾瘸Ｓ玫?Vue.component寫(xiě)法使用 extend 步驟要更加繁瑣一些。但是在一些獨(dú)立組件開(kāi)發(fā)場(chǎng)景中（例如：ElementUI庫(kù)），所以Vue.extend + $mount這對(duì)組合非常有必要需要我們了解下。

在這里插入圖片描述

再new一個(gè)instance對(duì)象，其中包含多個(gè)你所需要調(diào)用的方法，我這里定義了兩個(gè)，分別是confirm、 remove且在最初時(shí)需要將你掛載的instance1存起來(lái)，避免在其他function中需要使用

最后export default instance即可

3. 需要在main.js中使用Vue.use(ConfirmModal)進(jìn)行使用

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()
  }
})

到此這篇關(guān)于vue自定義實(shí)例化modal彈窗的文章就介紹到這了,更多相關(guān)vue自定義modal彈窗內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: