vue3+ts+element-plus实际开发之统一掉用弹窗封装

vue3+ts+element-plus实际开发之统一掉用弹窗封装

    • 插槽
      • [1. 官网介绍](#1. 官网介绍)
        • [先理解 插槽、具名插槽、 作用域插槽、动态插槽名、具名作用域插槽属性和使用方法](#先理解 插槽、具名插槽、 作用域插槽、动态插槽名、具名作用域插槽属性和使用方法)
      • [2. 统一调用弹窗封装dome实战](#2. 统一调用弹窗封装dome实战)
        • [- 使用场景:](#- 使用场景:)
        • [- 对`el-dialog`进行数据动态设置](#- 对el-dialog进行数据动态设置)
        • [- 新建一个ts文件用于统一存放组件,类似下边格式](#- 新建一个ts文件用于统一存放组件,类似下边格式)
        • [- 封装一个通用弹窗](#- 封装一个通用弹窗)

插槽

1. 官网介绍

官网文档地址

先理解 插槽、具名插槽、 作用域插槽、动态插槽名、具名作用域插槽属性和使用方法

2. 统一调用弹窗封装dome实战

- 使用场景:

大屏看板中,小模块查看详情信息功能

- 对el-dialog进行数据动态设置

新建一个one-dialog.vue文件,并修改成自己需要的组件。

javascript 复制代码
<template>
  <el-dialog
    v-model="dialogTableVisible"
    :title="title"
    :width="width"
    :top="top"
    :custom-class="customClass"
    :style="{ maxWidth: width, minWidth: width }"
    destroy-on-close
    align-center
    append-to-body
  >
    <slot name="dialog" />
  </el-dialog>
  <!-- 定义一个 @click 事件监听器来绑定点击事件到组件的 showDialog 方法上。 -->
  <div style="cursor: pointer" @click="showDialog">
    <!-- slot可以可以包裹在父组件要设置点击事件的标签外层 ,来实现父组件内调起弹窗-->
    <slot />
  </div>
</template>
<script setup lang="ts">
import { ref } from "vue";

defineProps({
  title: String,
  width: [String, Number],
  customClass: String,
  top: [String, Number],
});

const dialogTableVisible = ref(false);

const showDialog = () => {
  dialogTableVisible.value = true;
};
</script>
<style scoped lang="scss">
</style>
- 新建一个ts文件用于统一存放组件,类似下边格式
javascript 复制代码
export { default as Dialogone } from './one.vue';
export { default as Dialogtwo} from './two.vue';
export { default as DialogFancyButton} from './fancyButton.vue';
export { default as TableList} from '@/views/elementPlus/tableList.vue';
- 封装一个通用弹窗
  1. 新建组件one.vue,并且在one.vue里边使用封装好的one-dialog.vue组件
javascript 复制代码
<template>
  <!-- 弹窗 -->
  <Dialogone title="表格详情" width="700px" :dialogTableVisible="true">
    <!-- 使用插槽向固定位置输出内容 #是v-slot简写,这个SleFone要与父组件使用时候<template #SleFone>一致-->
    <slot name="SleFone"> </slot>
    <template #dialog>
      <TableList v-if="type==='1'"></TableList>
      <CarouselOne v-if="type==='2'"></CarouselOne>
    </template>
  </Dialogone>
</template>

<script setup lang="ts">
import { Dialogone } from "../../../components/index";
//这里我随便拿了两个页面做组件使用,
import { TableList } from "../../../components/index";
import { CarouselOne } from "../../../components/index";

defineProps({
  type: String,
});
</script>
<style scoped lang="scss">
</style>
  1. 使用示例
    我直接在表格详情使用的,点击详情掉用组件


  1. 多个页面使用时候统一引用
  • 新建一个GlobalComponents.ts文件
javascript 复制代码
import { App } from 'vue';
import {SleFone} from './index';


// 创建一个 install 函数,接收 Vue 应用实例作为参数
const install = (app: App) => {
    // 在 Vue 应用实例中注册 SleFone 组件
    app.component('SleFone', SleFone);
    // 在这里可以注册其他全局组件
    // app.component('AnotherComponent', AnotherComponent);
  };
  
  // 导出 install 函数
  export default { install };
  • 在main.ts中统一引入
javascript 复制代码
//自定义组件
import GlobalComponents from './components/GlobalComponents';
const app = createApp(App)
app.use(GlobalComponents);
app.mount('#app');
  • 页面中不需要每个引用,可以直接使用
javascript 复制代码
 <SleFone type="1">
          <template #SleFone>
          //一下内容可以自定义
            <el-button
              link
              type="primary"
              size="small"
              @click="detailsClick(scope.row)"
            >
              点击唤起弹窗
            </el-button>
            </template>
            </SleFone>
  • 如果出现套盒子情况,2种处理方式
  1. 第一种处理方式

如果我们想在父组件没有提供任何插槽内容时在 内渲染"Submit",只需要将"Submit"写在 标签之间来作为默认内容:

javascript 复制代码
 <button type="submit">
  <slot name="SleFone2">
    Submit <!-- 默认内容 -->
  </slot>
</button>

但如果我们提供了插槽内容:=

那么被显式提供的内容会取代默认内容:

javascript 复制代码
      <template #SleFone2>
          <span>新内容</span> 
        </template>

根据上边插槽特性,反向使用

  1. 第二种处理方式: 更换唤起弹窗的方式,根据实际情况也已使用全局变量控制
相关推荐
逐·風3 小时前
unity关于自定义渲染、内存管理、性能调优、复杂物理模拟、并行计算以及插件开发
前端·unity·c#
Devil枫3 小时前
Vue 3 单元测试与E2E测试
前端·vue.js·单元测试
尚梦4 小时前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app
GIS程序媛—椰子4 小时前
【Vue 全家桶】6、vue-router 路由(更新中)
前端·vue.js
前端青山5 小时前
Node.js-增强 API 安全性和性能优化
开发语言·前端·javascript·性能优化·前端框架·node.js
毕业设计制作和分享5 小时前
ssm《数据库系统原理》课程平台的设计与实现+vue
前端·数据库·vue.js·oracle·mybatis
程序媛小果5 小时前
基于java+SpringBoot+Vue的旅游管理系统设计与实现
java·vue.js·spring boot
从兄6 小时前
vue 使用docx-preview 预览替换文档内的特定变量
javascript·vue.js·ecmascript
凉辰7 小时前
设计模式 策略模式 场景Vue (技术提升)
vue.js·设计模式·策略模式
清灵xmf7 小时前
在 Vue 中实现与优化轮询技术
前端·javascript·vue·轮询