全栈技术博客-文章详情

vue+element如何封装普通弹框和抽屉弹框

最后更新时间：2025-08-28 17:50:50

Dialog Element Vue

# 一进行showDrawer()封装
## 1.新建dialog.js
```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>
`

// 弹框构造函数
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()
    },
  },
})

// 创建组件实例并挂载到文档中
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('确认关闭？').then(() => {
            done()
          }).catch(() => {})
        },
      },
    })
    let MyDialog = new MyDialogConstructor().$mount()
    document.body.appendChild(MyDialog.$el)
  })
}
```

在上面的代码中，我们首先定义了一个 `modalTemplate` 模板，使用 Element UI 的 Drawer 和组件插槽来实现弹框内容的展示，并添加了一些我们需要的属性和方法。
然后定义了一个 ModalConstructor 构造函数，通过 `show` 方法来打开弹框，并返回 Promise 来等待用户的操作，最后返回用户的操作结果。
在 `show` 方法中，我们通过传入组件和 props 的方式来动态渲染组件，并设置其他选项，如弹框的标题、大小、方向等。
```
## 2在main.js里引入dialog.js
```js
import '@util/dialog'
```
# 如何使用
```js
// 调用 $showDrawer 方法
this.$showDrawer(ExamDetail, {
  examId: rowId
}, {
  title: '考试详情',
  width: '1200px',
}).then(() => {
  this.searchForm()
})

// 调用 $showDialog 方法
this.$showDialog(ExamDetail, {
  examId: rowId
}, {
  title: '考试详情',
  width: '1200px',
}).then(() => {
  this.searchForm()
})
```

vue+element如何封装普通弹框和抽屉弹框

留言条数·0