element-ui 弹窗组件封装的步骤

下面是element-ui弹窗组件的封装步骤攻略：

1. 对element-ui弹窗组件的调研

在开始封装之前，需要对element-ui的弹窗组件有一定的了解。主要查看弹窗组件的使用方法、属性、事件等。

2. 封装弹窗组件的基本框架

在封装时，可以根据需求封装多个通用的弹窗组件和对应的API。需要注意的是，通用组件和API都应该具有可重用性和可维护性。

下面是一个基本的弹窗组件框架示例：

<template>
  <el-dialog
    :title="title"
    :visible.sync="visible"
    :before-close="beforeClose"
    :close-on-click-modal="false"
  >
    <slot></slot>
    <div slot="footer" class="dialog-footer">
      <el-button @click.native="visible = false">取消</el-button>
      <el-button type="primary" @click.native="handleConfirm">确定</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: ''
    },
    visible: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    handleConfirm() {
      this.$emit('confirm')
    },
    beforeClose(done) {
      this.$emit('close', done)
    }
  }
}
</script>

在这个组件中，我们定义了一个弹窗框架，它具有标题、可见性、确认和关闭的回调函数，而且可以展示一个footer的element-ui按钮组，以满足大部分开发需求。

3. 封装API

通过上面的组件封装，可以完成基本的弹窗展示，但可能存在一些场景需要使用复杂功能的弹窗，比如自定义按钮、表单提交等，因此，我们还需要封装一些API来满足特定的需求。

下面是一个API的示例：

import Vue from 'vue'

const Confirm = (options, callbacks = {}) => {
  const _options = Object.assign(
    {
      visible: true,
      title: '',
      message: '',
      confirmText: '确定',
      cancelText: '取消',
      beforeClose() {}
    },
    options
  )

  const ConfirmComponent = Vue.extend({
    template: `
      <el-dialog
        :visible.sync="visible"
        :before-close="beforeClose"
      >
        <div v-if="title" slot="title">
          {{ title }}
        </div>
        <div v-if="message" v-html="message" class="dialog-message"></div>
        <div slot="footer" v-if="!hideFooter" class="dialog-footer">
          <el-button @click.native="close('cancel')">{{ cancelText }}</el-button>
          <el-button type="primary" @click.native="close('confirm')">{{ confirmText }}</el-button>
        </div>
      </el-dialog>
    `,
    data() {
      return {
        visible: _options.visible,
        title: _options.title,
        message: _options.message,
        confirmText: _options.confirmText,
        cancelText: _options.cancelText,
        hideFooter: _options.hideFooter
      }
    },
    methods: {
      close(action) {
        callbacks[action] && callbacks[action]()
        this.visible = false

        if (typeof _options.beforeClose === 'function') {
          _options.beforeClose(action)
        }
      },

      beforeClose(done) {
        setTimeout(() => {
          done()
        }, 300)
      }
    },
    mounted() {
      if (this.$el && typeof _options.mounted === 'function') {
        _options.mounted(this.$el)
      }
    },
    destroyed() {
      document.body.removeChild(this.$el)
    }
  })

  const component = new ConfirmComponent().$mount()
  document.body.appendChild(component.$el)

  return component
}

export default {
  install(Vue) {
    Vue.prototype.$confirm = Confirm
  }
}

在这个API中，我们使用Vue.extend()来创建一个新的ConfirmComponent，然后将它实例化并插入到body中，最后暴露在Vue.prototype中。

使用这个API时，只需要全局安装它就行了，然后就可以直接在Vue实例中调用$confirm方法。如：

this.$confirm({
  title: '我是标题',
  message: '我是内容'
})
  .then(() => {
    console.log('确定')
  })
  .catch(() => {
    console.log('取消')
  })

这里通过then方法和catch方法实现对确定和取消按钮的回调。

总的来说，封装Element UI弹窗组件需要掌握Element UI的弹窗组件用法，具备Vue.js组件化开发、模块化开发的概念和技巧，并能根据具体的业务需求封装出符合自己产品的组件和API。