dialog弹框 $attrs和$slots.footer 自定义插槽优化

发布时间 2023-05-26 17:01:06作者: 沐阳歡
<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:让开发者更友好的可以自定义自己需要的页头页脚