vue之ele的dialog组件二次封装

vue之ele的dialog组件二次封装

Dialog.vue

<!-- 弹窗组件 Dialog.vue -->
<template>
  <el-dialog
    class="dialog-wrap"
    :title="title"
    :width="width"
    :top="top"
    :visible.sync="dialogVisible"
    :close-on-click-modal="clickModalClose"
  >
    <div>
      <slot name="content"></slot>
    </div>
    <span v-if="!footerSlot" slot="footer" class="dialog-footer">
      <el-button type="primary" @click="comfirmBtn" class="comfirmBtn">
        确 定
      </el-button>
      <el-button @click="dialogVisible = false" class="cancalBtn">
        取 消
      </el-button>
    </span>
    <span v-else slot="footer" class="dialog-footer">
      <slot name="footer"></slot>
    </span>
  </el-dialog>
</template>

<script>
// 弹窗组件 Dialog.vue -> props参数 与事件
/**
 * param -> 参数
 *** @param title {String} - 左上侧的标题
 *** @param width {String} - 弹窗的宽度 默认800px 支持 px与%
 *** @param top {String} - 弹窗距离顶部位置 默认15vh
 *** @param visible {Boolean} - 弹窗显示与隐藏 默认false
 *** @param footerSlot {Boolean} - 弹窗的底部是否是呀slot 默认false
 *** @param clickModalClose {Boolean} - 弹窗是否支持点击遮罩层关闭弹窗 默认true
 * event -> 事件
 *** @event changeDialog {Fun}} - 关闭事件
 *** @event comfirmBtn {Fun}} - 保存事件
	    <Dialog
      	@changeDialog="changeDialog2"
				@changeDialog="changeDialog"
    	>
 */
export default {
    
    
  name: "Dialog",
  components: {
    
    },
  props: {
    
    
    title: {
    
    
      type: String,
      default: "",
    },
    width: {
    
    
      type: String,
      default: "800px",
    },
    top: {
    
    
      type: String,
      default: "15vh",
    },
    visible: {
    
    
      type: Boolean,
      default: false,
    },
    footerSlot: {
    
    
      type: Boolean,
      default: false,
    },
    clickModalClose: {
    
    
      type: Boolean,
      default: true,
    },
  },
  data() {
    
    
    return {
    
    };
  },
  computed: {
    
    
    // 计算 父组件传递来的 visible
    dialogVisible: {
    
    
      get() {
    
    
        return this.visible;
      },
      set(value) {
    
    
        this.$emit("changeDialog", value);
      },
    },
  },
  methods: {
    
    
    // 提交
    comfirmBtn() {
    
    
      this.$emit("comfirmBtn", false);
    },
  },
};
</script>
<style  lang="scss" scoped>
.dialog-wrap {
    
    
  ::v-deep .el-dialog__header {
    
    
    height: 32px;
    line-height: 32px;
    padding: 0 15px;
    border-bottom: 1px solid #e5e5e5;
    .el-dialog__title {
    
    
      font-size: 16px;
      line-height: 32px;
      font-weight: 700;
    }
    .el-dialog__headerbtn {
    
    
      top: 10px;
      cursor: pointer;
    }
  }
  ::v-deep .el-dialog__body {
    
    
    padding: 10px 15px;
  }
  ::v-deep .el-dialog__footer {
    
    
    padding: 1px 15px;
    height: 40px;
    line-height: 40px;

    .dialog-footer {
    
    
      position: relative;
      display: inline-block;
      width: 100%;
      height: 100%;
      right: 0;
      left: 0;
      top: 0;
      bottom: 0;
      margin: auto;
      text-align: center;
      .el-button {
    
    
        padding: 6px 12px;
      }
    }
  }
}
</style>

使用Dialog组件1

• 常规使用
  

<template>
  <div>
    Dashboard 使用visible {
    
    {
    
     visible }}
    <Dialog
      :visible="visible"
      @changeDialog="changeDialog"
      @comfirmBtn="comfirmBtn"
    >
      <div slot="content" class="apply-wrap">
        我是content
        <el-select v-model="value" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
    </Dialog>
    <el-button @click="btn1">按钮</el-button>
  </div>
</template>

<script>
import Dialog from "./child/Dialog.vue";
export default {
    
    
  name: "Dashboard",
  components: {
    
    
    Dialog,
  },
  data() {
    
    
    return {
    
    
      visible: false,
      options: [
        {
    
    
          value: "选项1",
          label: "黄金糕",
        },
        {
    
    
          value: "选项2",
          label: "双皮奶",
        },
        {
    
    
          value: "选项3",
          label: "蚵仔煎",
        },
      ],
      value: "",
    };
  },
  methods: {
    
    
    btn1() {
    
    
      this.visible = true;
      this.resetData();
    },
    // 改变dialog状态
    changeDialog() {
    
    
      this.visible = false;
    },
    // 确定 -> 需要做提交等处理什么的 区别于取消！
    comfirmBtn(flag) {
    
    
      this.visible = flag;
    },
    // 重置表单数据
    resetData() {
    
    
      this.value = "";
    },
  },
};
</script>
<style  lang="scss" scoped>
.apply-wrap {
    
    
  height: 200px;
}
</style>

使用Dialog组件2

• 使用底部按钮插槽与title
  

<template>
  <div>
    Dashboard 使用visible {
    
    {
    
     visible }}
    <Dialog
      :footerSlot="true"
      :visible="visible2"
      @changeDialog="changeDialog2"
			width="65%"
			title="测试之dialog"
    >
      <div slot="content">我是content</div>
      <div slot="footer">
        <el-button @click="save">保存</el-button>
      </div>
    </Dialog>
    <el-button @click="btn2">按钮2</el-button>
  </div>
</template>

<script>
import Dialog from "./child/Dialog.vue";
export default {
    
    
  name: "Dashboard",
  components: {
    
    
    Dialog,
  },
  data() {
    
    
    return {
    
    
      visible2: false,
    };
  },
  methods: {
    
    
	// 按钮2
	btn2(){
    
    
	 this.visible2 = true;
    },
	// 保存
	save() {
    
    
     this.visible2 = false;
    },
    changeDialog2() {
    
    
      this.visible2 = false;
    },
  },
};
</script>