Files
element-plus/docs/examples/drawer/resizable.vue
sea b9ac07cb68 refactor(components): [drawer] resizable (#21932)
* Revert "drawer resizable #21608"

* refactor: drawer resizable

* feat: direction & event core

* docs: update

* fix: animation conflict

* fix: watchEffect onCleanup hrm error

* test: add resize case

* chore: format

* test: old case typo

* refactor: rel #21595 & add hover style

Co-authored-by: thinkasany <480968828@qq.com>
Co-authored-by: cszhjh <cszhjh@gmail.com>

* chore: del useless file

* chore: del useless file

* chore: rename

Co-authored-by: Dsaquel <291874700n@gmail.com>

* fix: use min resizable error

* fix: multiple resizable style conflicts

* test: fix

---------

Co-authored-by: thinkasany <480968828@qq.com>
Co-authored-by: cszhjh <cszhjh@gmail.com>
Co-authored-by: Dsaquel <291874700n@gmail.com>
2025-09-04 15:33:06 +08:00

22 lines
628 B
Vue

<template>
<el-radio-group v-model="direction" @change="drawer = true">
<el-radio-button value="ttb">top</el-radio-button>
<el-radio-button value="rtl">right</el-radio-button>
<el-radio-button value="btt">bottom</el-radio-button>
<el-radio-button value="ltr">left</el-radio-button>
</el-radio-group>
<el-drawer v-model="drawer" :direction="direction" resizable>
This is drawer content.
</el-drawer>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import type { DrawerProps } from 'element-plus'
const direction = ref<DrawerProps['direction']>()
const drawer = ref(false)
</script>