vue element-plus el-drawer 自定义抽屉标题 template slot动态标题定义方法

默认抽屉定义， 这里的title就是标题的定义

<el-drawer v-model="drawer" title="I am the title" :direction="direction" :before-close="handleClose" >

如果我们需要自定义这个标题，就需要使用slot

<el-drawer v-model="drawer2" :direction="direction">

<template #header> <h3>{{ title }}</h3> </template>

</el-drawer>

如果我们需要动态标题，定义一个data变量 title 然后将数据绑定到这个变量上即可

自定义动态标题示例

<template>
<el-drawer :direction="direction" :size="screenWidth" v-model="isShowDrawer">
<template #header><h3>{{ title }}字典数据列表</h3></template>

</template>

<script lang="ts" setup>
import { ref } from 'vue'

const title = ref("Hello world!")

</script>

效果

不添加标题

<template>
  <el-button type="primary" style="margin-left: 16px" @click="drawer = true">
    open
  </el-button>

  <el-drawer v-model="drawer" title="I am the title" :with-header="false">
    <span>Hi there!</span>
  </el-drawer>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
const drawer = ref(false)
</script>