网站自己做的记者证,微信开放品牌,重庆网站建设哪个公司好,网站建设内部问卷vue3tselement-plus实际开发之统一掉用弹窗封装 插槽1. 官网介绍先理解 插槽、具名插槽、 作用域插槽、动态插槽名、具名作用域插槽属性和使用方法 2. 统一调用弹窗封装dome实战- 使用场景#xff1a;- 对el-dialog进行数据动态设置- 新建一个ts文件用于统一存放组件#xff… vue3tselement-plus实际开发之统一掉用弹窗封装 插槽1. 官网介绍先理解 插槽、具名插槽、 作用域插槽、动态插槽名、具名作用域插槽属性和使用方法 2. 统一调用弹窗封装dome实战- 使用场景- 对el-dialog进行数据动态设置- 新建一个ts文件用于统一存放组件类似下边格式- 封装一个通用弹窗 插槽
1. 官网介绍
官网文档地址
先理解 插槽、具名插槽、 作用域插槽、动态插槽名、具名作用域插槽属性和使用方法
2. 统一调用弹窗封装dome实战
- 使用场景 大屏看板中小模块查看详情信息功能 - 对el-dialog进行数据动态设置
新建一个one-dialog.vue文件并修改成自己需要的组件。
templateel-dialogv-modeldialogTableVisible:titletitle:widthwidth:toptop:custom-classcustomClass:style{ maxWidth: width, minWidth: width }destroy-on-closealign-centerappend-to-bodyslot namedialog //el-dialog!-- 定义一个 click 事件监听器来绑定点击事件到组件的 showDialog 方法上。 --div stylecursor: pointer clickshowDialog!-- slot可以可以包裹在父组件要设置点击事件的标签外层 来实现父组件内调起弹窗--slot //div
/template
script setup langts
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 langscss
/style- 新建一个ts文件用于统一存放组件类似下边格式
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表格详情 width700px :dialogTableVisibletrue!-- 使用插槽向固定位置输出内容 #是v-slot简写这个SleFone要与父组件使用时候template #SleFone一致--slot nameSleFone /slottemplate #dialogTableList v-iftype1/TableListCarouselOne v-iftype2/CarouselOne/template/Dialogone
/templatescript setup langts
import { Dialogone } from ../../../components/index;
//这里我随便拿了两个页面做组件使用
import { TableList } from ../../../components/index;
import { CarouselOne } from ../../../components/index;defineProps({type: String,
});
/script
style scoped langscss
/style使用示例 我直接在表格详情使用的点击详情掉用组件 3. 多个页面使用时候统一引用
新建一个GlobalComponents.ts文件
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中统一引入
//自定义组件
import GlobalComponents from ./components/GlobalComponents;
const app createApp(App)
app.use(GlobalComponents);
app.mount(#app);页面中不需要每个引用可以直接使用 SleFone type1template #SleFone//一下内容可以自定义el-buttonlinktypeprimarysizesmallclickdetailsClick(scope.row)点击唤起弹窗/el-button/template/SleFone如果出现套盒子情况2种处理方式
第一种处理方式 如果我们想在父组件没有提供任何插槽内容时在 内渲染“Submit”只需要将“Submit”写在 标签之间来作为默认内容 button typesubmitslot nameSleFone2Submit !-- 默认内容 --/slot
/button但如果我们提供了插槽内容 那么被显式提供的内容会取代默认内容 template #SleFone2span新内容/span /template根据上边插槽特性反向使用 2. 第二种处理方式 更换唤起弹窗的方式根据实际情况也已使用全局变量控制
