封装对话框组件（view ui）

入参：

        1、图标

        2、标题

        3、标题底部是否显示边框线

        4、右侧按钮文字，默认显示确认

        5、是否展示取消按钮

返回值：

        1、单击确定，返回给父组件操作逻辑代码

        2、单击取消，返回父组件操作逻辑代码

代码

<template>
  <div>
    <Modal
      width="400"
      v-model="showModal"
      draggable scrollable
      :mask="false"
      :closable="false"
      @on-cancel="handleReset">
      <!-- 标题区 -->
      <div class="title" :class="isTitleBorder && 'title-border-bottom'">
        <!-- 默认标题 -->
        <div v-if="title" class="title-box">
          <!-- 图标 -->
          <img v-if="img" :src="img" alt="">
          <!-- 标题 -->
          <div class="title-text">{{title}}</div>
        </div>
        <!-- 自定义标题 -->
        <slot v-else name="title">
        </slot>
      </div>
      <!-- 内容区 -->
      <div class="content">
        <slot name="content" ></slot>
      </div>
      <!-- 底部按钮区 -->
      <div slot="footer" class="footer">
        <!-- 取消按钮，有些对话框没有，通过 isCancel 来控制 -->
        <Button @click="handleReset" class="cancel" v-if="isCancel">取消</Button>
        <!-- 右侧按钮，自定义按钮内容 -->
        <Button type="primary" @click="handleSubmit" class="confirm">{{confirmText}}</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
export default {
  name: 'Dialog',
  props: {
    // 是否展示取消按钮
    isCancel: {
      type: Boolean,
      default: true
    },
    // 右侧按钮文字，默认显示确认
    confirmText: {
      type: String,
      default: '确认'
    },
    // 标题底部是否显示边框线
    isTitleBorder: {
      type: Boolean,
      default: false
    },
    // 标题文本
    title: {
      type: String,
      default: ''
    },
    // 图标
    img: {
      type: String,
      default: ''
    }
  },
  methods: {
    // 点击确定按钮
    handleSubmit () {
      this.$emit('ok', this.classCode);
    },

    // 取消创建课程的弹框：重置表单，传值给父组件关闭弹框
    handleReset () {
      this.$emit('cancel');
    }
  }

}
</script>

<style lang="stylus" scoped>
  /deep/ .ivu-modal-body {
    padding: 0px;
  }
  /deep/ .ivu-modal-footer {
    border: none;
  }
  .title {
    margin: 10px 20px 0 20px;
    .title-box {
      display: flex;
      img {
        width: 20px;
        margin-right: 10px;
      }
    }
  }
  .title-border-bottom {
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
  }
  .content{ 
    padding: 20px;
    font-size: 14px;
    color: #333333;
     /deep/ .ivu-input-wrapper {
      width: 100% !important;
    }
  }
  .footer{
    display: flex;
    justify-content: end;
    align-items: center;
    .cancel {
      border: none;
      background: #eee
    }
    .confirm {
      border: none;
      background: $base;
    }
  }
</style>