Vue2中公共组件模态框（modal）

modal组件(更新于2018.9.20)

在开发基于Vue2框架的项目时，项目需求一款模态框组件，因为没用使用UI框架，所以打算自己开发，在查询资料后，成功写出高度可定制化的modal组件，看具体代码

js部分

modal内部方法

有朋友给提出了之前使用promise方式的bug，本人也只用了一次这种方式，感觉很不好，所以之后都采用了下面这种方式

 props: {
    visible: { type: Boolean, default: false },
    options: {
      type: Object,
      default: {}
    }
  },
  // 采用v-bind将visible传入

 methods: {
    ConfirmHandler() {
      this.$emit('update:visible', false);	// 更新visible的值（可选，如果想点击确认之后，进行一些处理再决定关不关闭，可取消在这里更新visible）
      this.$emit('Confirm');	// 传递确认事件
    },
    CancelHandler() {
      this.$emit('update:visible', false);	// 更新visible的值
      this.$emit('Cancel');	// 传递取消事件
    }
  }

• 使用方式

一定要使用.sync，这能同步update更新的visible值
如果要使用v-model来绑定值控制显示隐藏，要把visible换成input，其余不变

• 接口定义

这里定义一些可以配置标题，按钮的接口

/**
 * modal 模态接口参数
 * @param {string} modal.title 模态框标题
 * @param {boolean} modal.showCancelButton 是否显示取消按钮
 * @param {string} modal.cancelButtonClass 取消按钮样式
 * @param {string} modal.cancelButtonText 取消按钮文字
 * @param {string} modal.showConfirmButton 是否显示确定按钮
 * @param {string} modal.confirmButtonClass 确定按钮样式
 * @param {string} modal.confirmButtonText 确定按钮标文字
 */
    computed: {
        /**
         * 格式化props进来的参数,对参数赋予默认值
         */
        modal() {
            let modal = this.options;
            if (modal) {
                modal = {
                    title: modal.title || '提示',
                    showCancelButton: typeof modal.showCancelButton == 'undefined' ? true : modal.showCancelButton,
                    cancelButtonClass: modal.cancelButtonClass ? modal.showCancelButton : 'btn-default',
                    cancelButtonText: modal.cancelButtonText ? modal.cancelButtonText : '取消',
                    showConfirmButton: typeof modal.showConfirmButton == 'undefined' ? true : modal.cancelButtonClass,
                    confirmButtonClass: modal.confirmButtonClass ? modal.confirmButtonClass : 'btn-active',
                    confirmButtonText: modal.confirmButtonText ? modal.confirmButtonText : '确定',
                };
            } else { // 使用时没有传递参数
                modal = {
                    title: '提示',
                    showCancelButton: true,
                    cancelButtonClass: 'btn-default',
                    cancelButtonText: '取消',
                    showConfirmButton: true,
                    confirmButtonClass: 'btn-active',
                    confirmButtonText: '确定',
                };
            }
            return modal;
        },
    },

HTML部分

使用slot插槽进行内容替换

样式