<template> <div class="_my_Dialog"> <el-dialog v-bind="$attrs" :title="props.title" destroy-on-close> <template v-slot:title> <slot name="title"></slot> </template> <slot></slot> <template v-if="$slots.footer" v-slot:footer> <slot name="footer"></slot> </template> </el-dialog> </div> </template> <script setup lang="ts"> import { ref, defineProps, defineEmits, Ref, watch } from 'vue' const props = defineProps({ title: String }) </script>
<template> <my-dialog title='重点企业涵盖范围' v-model='showRef' width='36.5%'> <div class='content-box flex'> <div v-for='(v,i) in companyLIstAll' :key='i'>{{v}}</div> </div> </my-dialog> </template> <script setup lang='ts'> import MyDialog from '@/components/my-dialog/my-dialog.vue'; import { ref } from 'vue' import { companyLIstAll } from '@/views/potential-customer-marketing/components/area-expansion-module/areaImportantCompanyOne/component/colouns' const showRef = ref(false) function open() { showRef.value=true } defineExpose({ open }) </script>
加了自定义页脚后:
<template> <my-dialog title='重点企业涵盖范围' v-model='showRef' width='36.5%'> <div class='content-box flex'> <div v-for='(v,i) in companyLIstAll' :key='i'>{{v}}</div> </div> <template #footer> 131313 </template> </my-dialog> </template>
$attrs:直接继承el-dialog的所有属性和方法;
$slots.footer title:让开发者更友好的可以自定义自己需要的页头页脚