vue+element如何封装抽屉弹框

050

一进行showDrawer()封装

1.新建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>
`
// 弹框构造函数
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)
  })
}
// 弹框模板

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)
  })
}
// 弹框模板

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'
## 2在main.js里引入dialog.js
```js
import '@util/dialog'
## 2在main.js里引入dialog.js
```js
import '@util/dialog'

如何使用

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

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

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

© 版权声明
文章版权归作者所有，未经允许请勿转载，侵权请联系 admin@trc20.tw 删除。
THE END
前端
# 前端# Vue.js
喜欢就支持一下吧
点赞0

Warning: mysqli_query(): (HY000/3): Error writing file '/tmp/MYPObR0S' (Errcode: 28 - No space left on device) in /www/wwwroot/583.cn/wp-includes/class-wpdb.php on line 2345
admin的头像-五八三
相关推荐
评论 抢沙发
头像
欢迎您留下宝贵的见解！
提交
头像

昵称

图形验证码
取消
昵称

请填写用户信息：

  • 昵称(必填)
  • 邮箱(必填)
代码

请输入代码：

确认
图片
文章目录
文章目录
热门推荐