mirror of
https://github.com/element-plus/element-plus.git
synced 2025-08-16 03:53:39 +08:00
d720e5c31c
* feat(components): [splitter] new component * docs(components): [splitter] update docs * feat(components): [splitter] add export ElSplitter ElSplitterPanel types * feat(components): [splitter] support touch even * Update docs/.vitepress/crowdin/en-US/pages/component.json Co-authored-by: sea <45450994+warmthsea@users.noreply.github.com> * docs: update * docs: update * chore: update docs & code * chore: update docs & fix code type error * fix: use slot show error * refactor(components): [splitter] modify props use * refactor(components): [splitter] use native event listener to drag * fix(components): [splitter] panel bind attrs * refactor: use `useOrderedChildren` * chore: fix types * feat: add icon * chore: translate comments and add beta tag * docs: add default-size api * docs: remove demo lang="scss" * refactor: remove default-size api --------- Co-authored-by: kooriookami <38392315+kooriookami@users.noreply.github.com> Co-authored-by: sea <45450994+warmthsea@users.noreply.github.com> Co-authored-by: warmthsea <2586244885@qq.com> Co-authored-by: Dsaquel <291874700n@gmail.com> Co-authored-by: kooriookami <bingshuanglingluo@163.com>
49 lines
1.1 KiB
Vue
49 lines
1.1 KiB
Vue
<template>
|
|
<div
|
|
style="height: 250px; box-shadow: var(--el-border-color-light) 0px 0px 10px"
|
|
>
|
|
<el-splitter
|
|
@resize-start="handleResizeStart"
|
|
@resize-end="handleResizeEnd"
|
|
@resize="handleResize"
|
|
>
|
|
<el-splitter-panel>
|
|
<div class="demo-panel">1</div>
|
|
</el-splitter-panel>
|
|
<el-splitter-panel v-model:size="size" :max="200" :min="50">
|
|
<div class="demo-panel">{{ size }}px</div>
|
|
</el-splitter-panel>
|
|
<el-splitter-panel>
|
|
<div class="demo-panel">3</div>
|
|
</el-splitter-panel>
|
|
</el-splitter>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref } from 'vue'
|
|
|
|
const size = ref(100)
|
|
|
|
const handleResizeStart = (index: number, sizes: number[]) => {
|
|
console.log('resizeStart', index, sizes)
|
|
}
|
|
|
|
const handleResize = (index: number, sizes: number[]) => {
|
|
console.log('resize', index, sizes)
|
|
}
|
|
|
|
const handleResizeEnd = (index: number, sizes: number[]) => {
|
|
console.log('resizeEnd', index, sizes)
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.demo-panel {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 100%;
|
|
}
|
|
</style>
|