elementPlus的dialog组件封装

一、简介

公司业务可能需要进行一些组件的封装，基于第三方elementPlus框架，进行符合UI设计原型的组件封装，这篇主要讲解Dialog弹出框的封装。

二、环境准备

webpack+vue3+elementPlus

框架官方网址：https://element-plus.gitee.io/zh-CN/component/dialog.html

三、实现步骤

1，成果示例

2，需求分析

（1）弹出框的title支持自定义传入；

（2）提醒栏支持自定义文字内容和是否显示；

（3）dialog内容支持自定义编辑修改；

（4）按钮对齐方式和按钮触发事件支持自定义；

3，具体代码

（1）子组件

   <el-dialog v-model="is_Show" width="859px">
      <template #header>
        <div class="flex-header" :style="{color:titleColor}">
          <span class="flex-title" :style="{borderBottomColor:titleColor}">{{ title }}</span>
        </div>
      </template>
      <div class="flex-tip" :style="{color:tipColor,background:tipBackground}" v-if="tip">
        <el-icon><WarningFilled /></el-icon>
        {{ tipContent }}
      </div>
      <slot name="body"></slot>
      <template #footer>
        <div class="dialog-footer" :style="{textAlign:footerAlign}">
          <span>
            <slot name="button"></slot>
          </span>
        </div>
      </template>
   </el-dialog>

<script setup>
import {defineEmits, defineProps, computed} from 'vue'
const props = defineProps({
  //控制 dialog 显示
  isShow:{
    type:Boolean,
    default:false
  },
  //标题颜色
  titleColor:{
    type:String,
    default:'#3480FB'
  },
  //标题内容
  title:{
    type:String,
    default:'弹出框标题'
  },
  //提示栏字体颜色
  tipColor:{
    type:String,
    default:'#3480FB'
  },
  //提示栏内容
  tipContent:{
    type:String,
    default:'温馨提示'
  },
  //底部按钮对齐方式
  footerAlign:{
    type:String,
    default:'center'
  },
  //是否显示提醒行
  tip:Boolean
})
const emits = defineEmits(["update:isShow"]);
const is_Show = computed({
  get: () => props.isShow,
  set: (val) => {
    emits("update:isShow", val);
  },
});
const tipBackground = computed(()=>{
  let tipBackground = ''
  tipBackground = props.tipColor+'14'
  return tipBackground
})

（2）父组件

<template>
  <div>
    <el-button @click="showDialog">点击弹出框</el-button>
    <FlexDialog
      v-model:isShow="isShow"
      tip
      footerAlign="center"
      title="导航面板管理"
      tipContent="温馨提示：导航区域最多只可添加六个导航，并可拖拽该区域导航进行排序。"
    >
      <template v-slot:body>
        <div class="flex-dialog-body">
          <div class="flex-six-menus">
            <p>导航栏</p>
            <div class="flex-six-menus-list">
              <li v-for="item in 6" :key="item" style="background:#3480FB14">
                <i class="iconfont icon-xinxi" style="color:#3480FB"></i>论坛
              </li>
            </div>
          </div>
          <div class="flex-more-menus">
            <p>更多导航</p>
            <div class="flex-more-menus-list">
              <li v-for="item in 12" :key="item">
                <i class="iconfont icon-xinxi" style="color:#3480FB"></i>
                公文
              </li>
            </div>
          </div>
        </div>
      </template>
      <template v-slot:button>
        <el-button @click="cancel">取消</el-button>
        <el-button type="primary" @click="confirm">保存</el-button>
      </template>
    </FlexDialog>
  </div>
</template>

import { ref } from "vue";
import FlexDialog from "../../components/dialog/FlexDialog.vue";
const isShow = ref(false);
const showDialog = () => {
  isShow.value = true;
};
const cancel = () => {
  isShow.value = false;
}
const confirm = () => {
  isShow.value = false;
}

4，使用说明

（1）属性

（2）注意

• 内容和按钮支持自定义，通过插槽实现

<template v-slot:body></template>

<template v-slot:button></template>

• 提醒栏的背景色默认为传入色值透明度的92%

• 要实现弹出框正常显示，v-model不可省略 v-model:变量="变量"，这是弹出框显示隐藏的关键。原因：双向数据流绑定原理的vue3.2写法。

四、真实对接业务需求

具体需要数据请求，后续再更新。