nw_admin/src/components/DialogSlot/index.vue

<template>
  <div class="dialogSlot-aa"
       :class="dialogClass">
    <el-dialog v-model="innerVisibleShow"
               @closeDlg="closeDlg"
               destroy-on-close
               show-close
               close-on-press-escape
               :width="dialogWidth"
               :close-on-click-modal="false">
      <template v-slot:title>
        <span class="dialogTitle">{{title}}</span>
      </template>
      <slot></slot>
      <div class="del-btn"
           v-if="btnShow">
        <el-button size="mini"
                   type="primary"
                   @click="searchSure"
                   style="color: #ffffff">确定</el-button>
        <el-button size="mini"
                   style="color: #5075FC"
                   @click="searchReset">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      // show: false,
    };
  },
  props: {
    content: String,
    innerVisible: {
      type: Boolean,
    },
    btnShow: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: "",
    },
    closeDlg: {
      type: Function,
    },
    dialogWidth: {
      type: String,
      default: "50%",
    },
    dialogClass: {
      type: String,
      default: "",
    },
  },
  // watch: {
  //   'innerVisible': function(newVal) {
  //     this.show = newVal
  //   }
  // },
  mounted() {},
  computed: {
    innerVisibleShow: {
      get: function () {
        return this.innerVisible;
      },
      set: function () {
        return this.$emit("DialogClose");
      },
    },
  },
  methods: {
    async searchSure() {
      this.$emit("searchSureClick"); // 此方法名字歧义  不建议使用 但是旧代码再用 还不能删除
      this.$emit("sureClick");
    },
    searchReset() {
      this.$emit("DialogFalse"); // 此方法名字歧义  不建议使用 但是旧代码再用 还不能删除
      this.$emit("cancelClick");
    },
  },
};
</script>

<style lang="less" >
.dialogSlot-aa {
  .dialogTitle:before {
    content: "";
    display: inline-block;
    width: 3px;
    height: 14px;
    background: #5075fc;
    margin-right: 8px;
  }
  .el-dialog {
    margin-top: 3%;
  }
  .el-dialog__body {
    height: 100%;
    background: #ffffff;
  }
}
.del-btn {
  //position: absolute;
  //left: 165px;
  //bottom: 20px;
  text-align: center;
  margin-top: 20px;
}
</style>