order-ui-pc/src/components/globalComponents/open-msg/main.vue

<template>
  <el-dialog
    :title="title"
    :center="true"
    align="left"
    top="18vh"
    append-to-body
    :close-on-click-modal="false"
    :visible.sync="showModelThis"
    @close="showModelThis = false"
    @closed="closed"
  >
    <span v-html="msg"></span>
    <span slot="footer" class="dialog-footer">
      <b>{{ nums }}s&nbsp;后自动关闭</b>
      <el-button class="fr" type="primary" @click="showModelThis = false" size="mini"
        >确 定</el-button
      >
    </span>
  </el-dialog>
</template>

<script>
export default {
  name: "OpenMsg",
  props: ["showModel", "title", "msg", "num"],

  watch: {
    showModel: function (val) {
      this.showModelThis = val;
      if (val) {
        this.initForm();
      }
    },
    showModelThis(val) {
      if (!val) {
        this.$emit("cancel");
      }
    },
  },
  data() {
    return {
      nums: this.num,
      timer: null,
      // title: "",
      showModelThis: this.showModel,
    };
  },
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer);
    }
  },
  methods: {
    closed() {
      if (this.timer) {
        clearInterval(this.timer);
      }
    },
    initForm() {
      this.timer = null;
      this.nums = Number(this.num);
      this.timer = setInterval(() => {
        if (this.nums !== 0) {
          this.nums--;
        } else {
          clearInterval(this.timer);
          this.$emit("cancel");
        }
      }, 1000);
    },
  },
};
</script>

<style lang="scss" scoped>
.select-area {
  .loading-input {
    background-color: transparent;
    border: 1px solid #dfe4ed;
    color: #c0c4cc;
    width: 100%;
    height: 36px;
    line-height: 36px;
    padding: 0 30px 0 12px;
    border-radius: 4px;
    &.disabled {
      background-color: #f5f7fa;
    }
    span {
      font-size: 16px;
      height: 36px;
      line-height: 36px;
      padding: 0 0 0 3px;
      vertical-align: top;
    }
  }
}
</style>