公共弹窗组件

公共弹窗组件

<template>
  <el-dialog class="super-dialog" :class="title ? 'c-bm1-mwhite-dialog' : ''" :visible.sync="show" :width="width" :top="top" :show-close="showClose" :close-on-click-modal="closeOnClickModel" :custom-class="customClass" :modal-append-to-body="modalAppendToBody" :append-to-body="appendToBody" :before-close="handleClose">
    <div slot="title" v-if="title">
      <slot name="title">
        <span class="c-fs-16 c-fc-333">{{title}}</span>
      </slot>
    </div>
    <div v-if="scroll" :style='{"height":maxHeight}'>
      <el-scrollbar style="height:100%">
        <slot name="content"></slot>
      </el-scrollbar>
    </div>
    <div v-else>
      <slot name="content"></slot>
    </div>
    <div slot="footer" v-if="showButton">
      <el-button v-if="showCloseButton" @click="handleClose" plain style="width: 80px;">{{cancelText}}</el-button>
      <el-button v-if="showConfirmButton" @click="handleConfirm" :disabled="btnLoading" v-loading.fullscreen="btnLoading" type="primary" style="width: 80px;">{{confirmText}}</el-button>
    </div>
  </el-dialog>
</template>
<script>
export default {
  name: 'superDialog',
  props: {
    show: { // 是否显示
      type: Boolean,
      default: false
    },
    scroll: {
      type: Boolean,
      default: false
    },
    maxHeight: {
      type: String,
      default: '400px'
    },
    title: {
      type: String,
      default: ''
    },
    width: { // 宽度
      type: String,
      default: '50%'
    },
    closeOnClickModel: { // 是否点击遮罩层关闭
      type: Boolean,
      default: true
    },
    top: { // 距离顶部距离
      type: String,
      default: '15vh'
    },
    showClose: { // 显示关闭按钮
      type: Boolean,
      default: true
    },
    customClass: { // 自定义样式类名
      type: String,
      default: ''
    },
    modalAppendToBody: {
      type: Boolean,
      default: true
    },
    appendToBody: {
      type: Boolean,
      default: false
    },
    confirmText: { // 确定按钮文字
      type: String,
      default: '确定'
    },
    cancelText: { // 取消按钮文字
      type: String,
      default: '关闭'
    },
    showButton: { // 是否显示按钮
      type: Boolean,
      default: true
    },
    showConfirmButton: { // 显示确定按钮
      type: Boolean,
      default: true
    },
    showCloseButton: { // 显示取消按钮
      type: Boolean,
      default: true
    },
    loading: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
    }
  },
  computed: {
    btnLoading() {
      return this.loading
    }
  },
  watch: {
    loading() {
      this.btnLoading = this.loading
    }
  },
  created() {
  },
  methods: {
    handleClose(done) {
      this.$emit('close')
    },
    handleConfirm() {
      this.$emit('confirm')
    }
  }
}
</script>
<style lang="scss" scoped>
.super-dialog ::v-deep .el-dialog__header {
  padding: 15px 15px;
}
::v-deep {
  .el-dialog__header {
    background-color: #E0E0E0;
    color: #000;
    font-weight: 600;
  }
}
.super-dialog ::v-deep .el-dialog {
  margin-bottom: 50px;
}
.super-dialog ::v-deep .el-dialog__footer {
  padding: 20px;
  border-top: 1px solid rgb(228, 228, 228);
}
</style>

引用方式

 <super-dialog :show="show" @close="close" title="添加消息模板" cancelText="取消" @confirm="confirm" width="35%">
      <div slot="title">
        {{dialogType==="add" ? "添加" : "编辑"}}消息模板
      </div>
      <div slot="content">
        <el-form ref="form" :model="form" :rules="rules" label-width="90px">
          <el-form-item label="模板键值:" prop="primaryKey">
            <el-input v-model="form.primaryKey" placeholder="请填写参数名称"></el-input>
          </el-form-item>
          <el-form-item label="模板名称:" prop="templateName">
            <el-input v-model="form.templateName" placeholder="请填写参数键名"></el-input>
          </el-form-item>
          <el-form-item label="模板内容:" prop="keyValue">
            <el-input placeholder="请填写参数键值" v-model="form.keyValue"></el-input>
          </el-form-item>
          <el-form-item label="备注:" prop="remark">
            <div class="desc relative">
              <el-input type="textarea" rows="7" class="word-limit-textarea" placeholder="输入备注" v-model="form.remark" maxlength="300"></el-input>
              <span class="word-limit-tips word-limit-textareaTips">已输入 {{form.remark ? getLength(form.remark) : 0}}/300</span>
            </div>
          </el-form-item>
        </el-form>
      </div>
    </super-dialog>