Vue+Element實現(xiàn)封裝抽屜彈框

更新時間：2023年06月12日 09:00:54 作者：山水有輕音

這篇文章主要為大家詳細介紹了如何利用Vue和Element實現(xiàn)簡單的抽屜彈框效果，文中的示例代碼講解詳細，感興趣的小伙伴可以跟隨小編一起學習一下

一進行showDrawer()封裝

新建dialog.js

// 彈框模板
import Vue from 'vue';
import { Drawer } from 'element-ui';
const modalTemplate = `
  <el-drawer :visible.sync="visible" :title="title" :size="size" :direction="direction">
    <component :is="component" v-bind="props" @ok="handleOk" @cancel="handleCancel"></component>
  </el-drawer>
`
// 彈框構(gòu)造函數(shù)
const ModalConstructor = Vue.extend({
  template: modalTemplate,
  data() {
    return {
      visible: false,
      title: '',
      size: '70%',
      direction: 'rtl',
      component: null,
      props: null,
      resolve: null,
      reject: null,
    }
  },
  methods: {
    show(component, props, options) {
      this.visible = true
      this.component = component
      this.props = props || {}
      this.title = options.title || '提示'
      this.size = options.width || '70%'
      this.direction = options.direction || 'rtl'
      return new Promise((resolve, reject) => {
        this.resolve = resolve
        this.reject = reject
      })
    },
    hide() {
      this.visible = false
    },
    handleOk(res) {
      this.resolve(res)
      this.hide()
    },
    handleCancel() {
      this.reject()
      this.hide()
    },
  },
})
// 創(chuàng)建組件實例并掛載到文檔中
const Modal = new ModalConstructor().$mount()
document.body.appendChild(Modal.$el)
// $showDrawer 方法
Vue.prototype.$showDrawer = function (component, props, options) {
  return Modal.show(component, props, options)
}
// $showDialog 方法
Vue.prototype.$showDialog = function (component, props, options) {
  return new Promise((resolve, reject) => {
    let MyDialogConstructor = Vue.extend({
      components: {
        'my-dialog': component
      },
      template: `<el-dialog :visible.sync="visible" :title="title" :width="width" :before-close="beforeClose">
                    <my-dialog :props="props" @ok="handleOk" @cancel="handleCancel"></my-dialog>
                  </el-dialog>`,
      data() {
        return {
          visible: true,
          title: options.title || '提示',
          width: options.width || '50%',
          props: props,
          resolve: resolve,
          reject: reject,
        }
      },
      methods: {
        hide() {
          this.visible = false
        },
        handleOk(res) {
          this.resolve(res)
          this.hide()
        },
        handleCancel() {
          this.reject()
          this.hide()
        },
        beforeClose(done) {
          ElementUI.MessageBox.confirm('確認關(guān)閉？').then(() => {
            done()
          }).catch(() => {})
        },
      },
    })
    let MyDialog = new MyDialogConstructor().$mount()
    document.body.appendChild(MyDialog.$el)
  })
}

在上面的代碼中，我們首先定義了一個 modalTemplate 模板，使用 Element UI 的 Drawer 和組件插槽來實現(xiàn)彈框內(nèi)容的展示，并添加了一些我們需要的屬性和方法。然后定義了一個 ModalConstructor 構(gòu)造函數(shù)，通過 show 方法來打開彈框，并返回 Promise 來等待用戶的操作，最后返回用戶的操作結(jié)果。

在 show 方法中，我們通過傳入組件和 props 的方式來動態(tài)渲染組件，并設置其他選項，如彈框的標題、大小、方向等。

## 2在main.js里引入dialog.js
```js
import '@util/dialog'

如何使用

// 調(diào)用 $showDrawer 方法
this.$showDrawer(ExamDetail, {
  examId: rowId
}, {
  title: '考試詳情',
  width: '1200px',
}).then(() => {
  this.searchForm()
})
// 調(diào)用 $showDialog 方法
this.$showDialog(ExamDetail, {
  examId: rowId
}, {
  title: '考試詳情',
  width: '1200px',
}).then(() => {
  this.searchForm()
})

到此這篇關(guān)于Vue+Element實現(xiàn)封裝抽屜彈框的文章就介紹到這了,更多相關(guān)Vue Element抽屜彈框內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: