vue3+ts+element-plus實際開發(fā)之統(tǒng)一調(diào)用彈窗封裝的詳細過程

更新時間：2024年03月12日 11:21:14 作者：大白菜1號

這篇文章主要介紹了vue3+ts+element-plus實際開發(fā)之統(tǒng)一調(diào)用彈窗封裝的詳細過程,本文給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧

插槽

1. 官網(wǎng)介紹

官網(wǎng)文檔地址

先理解插槽、具名插槽、作用域插槽、動態(tài)插槽名、具名作用域插槽屬性和使用方法

2. 統(tǒng)一調(diào)用彈窗封裝dome實戰(zhàn)

- 使用場景：

大屏看板中，小模塊查看詳情信息功能

- 對el-dialog進行數(shù)據(jù)動態(tài)設(shè)置

新建一個one-dialog.vue文件，并修改成自己需要的組件。

<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 事件監(jiān)聽器來綁定點擊事件到組件的 showDialog 方法上。 -->
  <div style="cursor: pointer" @click="showDialog">
    <!-- slot可以可以包裹在父組件要設(shè)置點擊事件的標簽外層 ，來實現(xiàn)父組件內(nèi)調(diào)起彈窗-->
    <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文件用于統(tǒng)一存放組件，類似下邊格式

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';

- 封裝一個通用彈窗

新建組件one.vue，并且在one.vue里邊使用封裝好的one-dialog.vue組件

<template>
  <!-- 彈窗 -->
  <Dialogone title="表格詳情" width="700px" :dialogTableVisible="true">
    <!-- 使用插槽向固定位置輸出內(nèi)容 #是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>

使用示例
我直接在表格詳情使用的，點擊詳情掉用組件

在這里插入圖片描述

3. 多個頁面使用時候統(tǒng)一引用

新建一個GlobalComponents.ts文件

import { App } from 'vue';
import {SleFone} from './index';
// 創(chuàng)建一個 install 函數(shù)，接收 Vue 應(yīng)用實例作為參數(shù)
const install = (app: App) => {
    // 在 Vue 應(yīng)用實例中注冊 SleFone 組件
    app.component('SleFone', SleFone);
    // 在這里可以注冊其他全局組件
    // app.component('AnotherComponent', AnotherComponent);
  };
  // 導(dǎo)出 install 函數(shù)
  export default { install };

在main.ts中統(tǒng)一引入

//自定義組件
import GlobalComponents from './components/GlobalComponents';
const app = createApp(App)
app.use(GlobalComponents);
app.mount('#app');

頁面中不需要每個引用，可以直接使用

 <SleFone type="1">
          <template #SleFone>
          //一下內(nèi)容可以自定義
            <el-button
              link
              type="primary"
              size="small"
              @click="detailsClick(scope.row)"
            >
              點擊喚起彈窗
            </el-button>
            </template>
            </SleFone>

如果出現(xiàn)套盒子情況，2種處理方式

第一種處理方式

如果我們想在父組件沒有提供任何插槽內(nèi)容時在內(nèi)渲染“Submit”，只需要將“Submit”寫在標簽之間來作為默認內(nèi)容：

 <button type="submit">
  <slot name="SleFone2">
    Submit <!-- 默認內(nèi)容 -->
  </slot>
</button>

但如果我們提供了插槽內(nèi)容：=
那么被顯式提供的內(nèi)容會取代默認內(nèi)容：

      <template #SleFone2>
          <span>新內(nèi)容</span> 
        </template>

根據(jù)上邊插槽特性，反向使用

2. 第二種處理方式：更換喚起彈窗的方式，根據(jù)實際情況也已使用全局變量控制

到此這篇關(guān)于vue3+ts+element-plus實際開發(fā)之統(tǒng)一調(diào)用彈窗封裝的文章就介紹到這了,更多相關(guān)vue3 ts element-plus彈窗封裝內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: