element-plus/docs/examples/drawer/customization-header.vue
renovate[bot] b77753c854
fix(deps): update dependency eslint-plugin-vue to v9 (#7848)
Co-authored-by: Renovate Bot <bot@renovateapp.com>
Co-authored-by: 三咲智子 <sxzz@sxzz.moe>
2022-05-24 09:41:11 +00:00

24 lines
707 B
Vue

<template>
<el-button @click="visible = true">
Open Drawer with customized header
</el-button>
<el-drawer v-model="visible" :show-close="false">
<template #header="{ close, titleId, titleClass }">
<h4 :id="titleId" :class="titleClass">This is a custom header!</h4>
<el-button type="danger" @click="close">
<el-icon class="el-icon--left"><CircleCloseFilled /></el-icon>
Close
</el-button>
</template>
This is drawer content.
</el-drawer>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import { ElButton, ElDrawer } from 'element-plus'
import { CircleCloseFilled } from '@element-plus/icons-vue'
const visible = ref(false)
</script>