封装element的dialog组件

<template>
  <div>
    <!-- 创建卡券模态框start-->
      <el-dialog :title.sync="dialogTitle" :center="center" :custom-class="customClass"         :visible="visible" :append-to-body="appendToBody" :width="width" @close="$emit('handleClose','')">
          <slot name="content"></slot>
          <div slot="footer" class="dialog-footer" v-if="showCancel || showSure">
            <el-button v-if="showCancel" @click="$emit('handleClose','')">{{ cancelText }}</el-button>
            <el-button v-if="showSure" type="primary" @click="handleSure">{{ sureText }}</el-button>
          </div>
        </el-dialog>

    <!-- 创建卡券模态框end -->
  </div>
</template>

<script>

export default {
  name: 'e-dialog',
  props: {
    visible:{
      type:Boolean,
      default:false,
    },
    width:{
      type:String,
      default:() => '50%',
    },
    appendToBody:{
      type:Boolean,
      default:false
    },
    showCancel:{
      type:Boolean,
      default:true
    },
    showSure:{
      type:Boolean,
      default:true
    },
    center:{
      type:Boolean,
      default:false
    },
    type:{
      type:String,
      default:''
    },
    dialogTitle:{
      type:String,
      default:''
    },
    customClass:{
      type:String,
      default:'card-dialog'
    },
    
    sureText:{
      type:String,
      default:'确 定'
    },
    cancelText:{
      type:String,
      default:'取 消'
    },
  },
  },
  methods: {
  /**
   * @description: 确定
   * @param {*}
   * @return {*}
   */   
  handleSure(){
    let _this = this;
    this.$emit('handleSure','')
  },
  },
}
</script>
<style scoped lang="less">
  /deep/.el-button--primary{
    background-color:rgb(87, 95, 177);
    border-color: rgb(87, 95, 177);
  }
</style>