基于element二次封装el-dialog

封装组件：

HTML：

<el-dialog
      :title="title"
      center
      :visible.sync="visible"
      :before-close="handleClose"
      :show-close="false"
      width="364px"
    >
      <span>{{ content }}</span>//内容区域
      <span slot="footer" class="dialog-footer">//底部按钮区域
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="handleSubmit">确定</el-button>
      </span>
    </el-dialog>

注意：:show-close="false"是去除×按钮的

props：

props: {
    visible: { default: false },//控制显示的需要default
    title: [String, Number],
    content: [String, Number],
    countDown: [String, Number],
  },

父组件：

HTML：

<countDownBox
        :visible.sync="detailsVisible"//控制显示隐藏
        title="标题"
        content="内容"
      ></countDownBox>

引入：

import countDownBox from "@/components/countDownBox";
export default {
  components: {
    countDownBox,
  },
  data() {
    return {
      detailsVisible: false, //弹框展示
    }
  }
}