[JavaScript知识库]简单封装一个element弹窗

简单封装一个element弹窗 适合在脚本和js里调用或者在vue页面函数内调用

import Vue from 'vue'

export default function(component, options = { dialog: {}}, cb) {
  return new Promise(async(resolve, reject) => {
    const dialog = {
      appendToBody: true, // 对话框遮罩层是否插入至 body 元素上
      scrollToTop: false,
      ...options.dialog
    }
    const template = Vue.extend({
      components: {
        'Mycomponent': component
      },
      data() {
        return {
          visible: true,
          wrap: null
        }
      },
      methods: {
        onSubmit(data) {
          resolve(this, data)
        },
        onCancel(data) {
          reject(this, data)
        },
        onClose(done) {
          done()
          this.onCancel()
        },
        scrollToTop() {
          if (this.wrap.scrollTop) {
            this.wrap.scrollTop -= 200
            requestAnimationFrame(this.scrollToTop)
          }
        },
        toTop() {
          this.wrap = document.querySelector('.el-dialog__wrapper')
          this.scrollToTop()
        }
      },
      render() {
        var h = arguments[0]
        return h('el-dialog', {
          'attrs': {
            ...dialog,
            class: dialog.className,
            visible: this.visible,
            beforeClose: this.onClose
          }
        }, [h('Mycomponent',
          {
            'on': {
              'submit': this.onSubmit,
              'cancel': this.onCancel
            }
          })]
        )
      }
    })
    cb && cb(template)
  })
}
 this.$dialog = dialog

//调用方式
this.$dialog({
          data(){
              return {
             readonly:form.readonly,  //必须在data里注册变量才能在template里传入props
             data:data
          }
          },
           template:'<multi-table-supplier  :data="data" :readonly="readonly" />'
      },{
        dialog:{
          appendToBody:true,
          width: '90%',
          top: '5vh',
          center: true,
          title: 'title',
       }
      },(tpl)=>{
        form.dialogTemplate =tpl 
      }).catch((_this)=>{ 
           _this.visible = false
        form.dialogTemplate = null 
      })