splitPane
This commit is contained in:
vanhempi
5e049769a2
commit
60dab14a57
14
package-lock.json
generated
14
package-lock.json
generated
@ -8,7 +8,7 @@
|
||||
"name": "code-brick-wd",
|
||||
"version": "0.1.0",
|
||||
"dependencies": {
|
||||
"code-brick-zj": "^0.0.7",
|
||||
"code-brick-zj": "^0.1.0",
|
||||
"core-js": "^3.8.3",
|
||||
"element-ui": "^2.15.12",
|
||||
"vue": "^2.6.14",
|
||||
@ -4007,9 +4007,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/code-brick-zj": {
|
||||
"version": "0.0.7",
|
||||
"resolved": "https://registry.npmjs.org/code-brick-zj/-/code-brick-zj-0.0.7.tgz",
|
||||
"integrity": "sha512-ZuhseY/9RUUUweAiTdumq5pJKAKAJxpvD8yjcVluY+cGDEKyoKzN9PjycPh2tUsE/gmwShfgrcIcm5DKcmzqvA=="
|
||||
"version": "0.1.0",
|
||||
"resolved": "https://registry.npmjs.org/code-brick-zj/-/code-brick-zj-0.1.0.tgz",
|
||||
"integrity": "sha512-vEymEN/28lEJP3045DCE/7143SXjdNyNmWZuy3/NcIUP/e9YOjhm46itzjNWCjJZCI6vWvQkCD1EfmA4hPknuw=="
|
||||
},
|
||||
"node_modules/color-convert": {
|
||||
"version": "1.9.3",
|
||||
@ -14473,9 +14473,9 @@
|
||||
}
|
||||
},
|
||||
"code-brick-zj": {
|
||||
"version": "0.0.7",
|
||||
"resolved": "https://registry.npmjs.org/code-brick-zj/-/code-brick-zj-0.0.7.tgz",
|
||||
"integrity": "sha512-ZuhseY/9RUUUweAiTdumq5pJKAKAJxpvD8yjcVluY+cGDEKyoKzN9PjycPh2tUsE/gmwShfgrcIcm5DKcmzqvA=="
|
||||
"version": "0.1.0",
|
||||
"resolved": "https://registry.npmjs.org/code-brick-zj/-/code-brick-zj-0.1.0.tgz",
|
||||
"integrity": "sha512-vEymEN/28lEJP3045DCE/7143SXjdNyNmWZuy3/NcIUP/e9YOjhm46itzjNWCjJZCI6vWvQkCD1EfmA4hPknuw=="
|
||||
},
|
||||
"color-convert": {
|
||||
"version": "1.9.3",
|
||||
|
||||
@ -8,7 +8,7 @@
|
||||
"lint": "vue-cli-service lint"
|
||||
},
|
||||
"dependencies": {
|
||||
"code-brick-zj": "^0.0.7",
|
||||
"code-brick-zj": "^0.1.0",
|
||||
"core-js": "^3.8.3",
|
||||
"element-ui": "^2.15.12",
|
||||
"vue": "^2.6.14",
|
||||
|
||||
@ -112,6 +112,24 @@ export const routes = [
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
path: '/splitPane',
|
||||
component: Layout,
|
||||
name: 'splitPane',
|
||||
meta: {
|
||||
title: '分割面板'
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: 'splitPane',
|
||||
name: 'splitPane',
|
||||
meta: {
|
||||
title: '分割面板'
|
||||
},
|
||||
component: () => import('../views/splitPane/splitPane')
|
||||
}
|
||||
]
|
||||
},
|
||||
{ path: '*', redirect: '/home/introduce', hidden: true }
|
||||
]
|
||||
|
||||
|
||||
@ -3,9 +3,16 @@
|
||||
<p>
|
||||
组件包目前封装常用的四个组件:表格，搜索区域，分页，对话框。包npm地址为：https://www.npmjs.com/package/code-brick-zj。
|
||||
</p>
|
||||
<p>文档当前使用的组件包的版本为：0.0.7</p>
|
||||
<p>文档当前使用的组件包的版本为：0.1.0</p>
|
||||
<div class="block">
|
||||
<el-timeline>
|
||||
<el-timeline-item timestamp="2023/2/28" placement="top">
|
||||
<el-card>
|
||||
<h4>新增</h4>
|
||||
<h4>增加组件SplitPane,可以拖动来调整面板的大小</h4>
|
||||
<p>组件版本号为：0.1.0</p>
|
||||
</el-card>
|
||||
</el-timeline-item>
|
||||
<el-timeline-item timestamp="2023/1/10" placement="top">
|
||||
<el-card>
|
||||
<h4>修改</h4>
|
||||
|
||||
306
src/views/splitPane/splitPane.vue
Normal file
306
src/views/splitPane/splitPane.vue
Normal file
@ -0,0 +1,306 @@
|
||||
<template>
|
||||
<div class="split-page">
|
||||
<h2>可将一片区域，分割为可以拖拽调整宽度或高度的两部分区域。</h2>
|
||||
<div class="demo-box">
|
||||
<h3>左右分割</h3>
|
||||
<div class="split">
|
||||
<SplitPane v-model="split1">
|
||||
<template #left>
|
||||
<div class="split-pane">Left Pane</div>
|
||||
</template>
|
||||
<template #right>
|
||||
<div class="split-pane">Right Pane</div>
|
||||
</template>
|
||||
</SplitPane>
|
||||
</div>
|
||||
<el-collapse>
|
||||
<el-collapse-item title="显示代码">
|
||||
<div>
|
||||
<pre>
|
||||
<div class="split">
|
||||
<SplitPane v-model="split1">
|
||||
<template #left>
|
||||
<div class="split-pane">Left Pane</div>
|
||||
</template>
|
||||
<template #right>
|
||||
<div class="split-pane">Right Pane</div>
|
||||
</template>
|
||||
</SplitPane>
|
||||
</div>
|
||||
data() {
|
||||
return {
|
||||
split1: 0.5
|
||||
}
|
||||
}
|
||||
.split {
|
||||
height: 200px;
|
||||
border: 1px solid #dcdee2;
|
||||
}
|
||||
.split-pane {
|
||||
padding: 20px;
|
||||
}
|
||||
</pre>
|
||||
</div>
|
||||
</el-collapse-item>
|
||||
</el-collapse>
|
||||
</div>
|
||||
<div class="demo-box">
|
||||
<h3>上下分割</h3>
|
||||
<div class="split">
|
||||
<SplitPane v-model="split2" mode="vertical">
|
||||
<template #top>
|
||||
<div class="split-pane">Left Pane</div>
|
||||
</template>
|
||||
<template #bottom>
|
||||
<div class="split-pane">Right Pane</div>
|
||||
</template>
|
||||
</SplitPane>
|
||||
</div>
|
||||
<el-collapse>
|
||||
<el-collapse-item title="显示代码">
|
||||
<div>
|
||||
<pre>
|
||||
<div class="split" mode="vertical">
|
||||
<SplitPane v-model="split2">
|
||||
<template #top>
|
||||
<div class="split-pane">Left Pane</div>
|
||||
</template>
|
||||
<template #bottom>
|
||||
<div class="split-pane">Right Pane</div>
|
||||
</template>
|
||||
</SplitPane>
|
||||
</div>
|
||||
data() {
|
||||
return {
|
||||
split2: 0.5
|
||||
}
|
||||
}
|
||||
.split {
|
||||
height: 200px;
|
||||
border: 1px solid #dcdee2;
|
||||
}
|
||||
.split-pane {
|
||||
padding: 20px;
|
||||
}
|
||||
</pre>
|
||||
</div>
|
||||
</el-collapse-item>
|
||||
</el-collapse>
|
||||
</div>
|
||||
<div class="demo-box">
|
||||
<h3>嵌套使用</h3>
|
||||
<div class="split">
|
||||
<SplitPane v-model="split3">
|
||||
<template #left>
|
||||
<div class="split-pane no-padding">
|
||||
<SplitPane v-model="split4" mode="vertical">
|
||||
<template #top>
|
||||
<div class="split-pane">Top Pane</div>
|
||||
</template>
|
||||
<template #bottom>
|
||||
<div class="split-pane">Bottom Pane</div>
|
||||
</template>
|
||||
</SplitPane>
|
||||
</div>
|
||||
</template>
|
||||
<template #right>
|
||||
<div class="split-pane">Right Pane</div>
|
||||
</template>
|
||||
</SplitPane>
|
||||
</div>
|
||||
<el-collapse>
|
||||
<el-collapse-item title="显示代码">
|
||||
<div>
|
||||
<pre>
|
||||
<div class="split">
|
||||
<SplitPane v-model="split3">
|
||||
<template #left>
|
||||
<div class="split-pane no-padding">
|
||||
<SplitPane v-model="split4" mode="vertical">
|
||||
<template #top>
|
||||
<div class="split-pane">Top Pane</div>
|
||||
</template>
|
||||
<template #bottom>
|
||||
<div class="split-pane">Bottom Pane</div>
|
||||
</template>
|
||||
</SplitPane>
|
||||
</div>
|
||||
</template>
|
||||
<template #right>
|
||||
<div class="split-pane">Right Pane</div>
|
||||
</template>
|
||||
</SplitPane>
|
||||
</div>
|
||||
data() {
|
||||
return {
|
||||
split3: 0.5,
|
||||
split4: 0.5
|
||||
}
|
||||
}
|
||||
.split {
|
||||
height: 200px;
|
||||
border: 1px solid #dcdee2;
|
||||
}
|
||||
.split-pane {
|
||||
padding: 20px;
|
||||
}
|
||||
.split-pane.no-padding {
|
||||
height: 200px;
|
||||
padding: 0;
|
||||
}
|
||||
</pre>
|
||||
</div>
|
||||
</el-collapse-item>
|
||||
</el-collapse>
|
||||
</div>
|
||||
<div>
|
||||
<h3>API</h3>
|
||||
<h4>SplitPane Props</h4>
|
||||
<base-table :table-props="tableProps1" :table-data="tableData1" />
|
||||
<h4>SplitPane Events</h4>
|
||||
<base-table :table-props="tableProps2" :table-data="tableData2" />
|
||||
<h4>SplitPane Slots</h4>
|
||||
<base-table :table-props="tableProps3" :table-data="tableData3" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'splitPane',
|
||||
data() {
|
||||
return {
|
||||
split1: 0.5,
|
||||
split2: 0.5,
|
||||
split3: 0.5,
|
||||
split4: 0.5,
|
||||
tableProps1: [
|
||||
{
|
||||
prop: 'a1',
|
||||
label: '属性'
|
||||
},
|
||||
{
|
||||
prop: 'a2',
|
||||
label: '说明',
|
||||
minWidth: 200
|
||||
},
|
||||
{
|
||||
prop: 'a3',
|
||||
label: '类型'
|
||||
},
|
||||
{
|
||||
prop: 'a4',
|
||||
label: '默认值'
|
||||
}
|
||||
],
|
||||
tableData1: [
|
||||
{
|
||||
a1: 'model-value',
|
||||
a2: '面板位置，可以是 0~1 代表百分比，或具体数值的像素，可用 v-model 双向绑定',
|
||||
a3: 'Number | String',
|
||||
a4: '0.5'
|
||||
},
|
||||
{
|
||||
a1: 'mode',
|
||||
a2: '类型，可选值为 horizontal 或 vertical',
|
||||
a3: 'String',
|
||||
a4: 'horizontal'
|
||||
},
|
||||
{
|
||||
a1: 'min',
|
||||
a2: '最小阈值',
|
||||
a3: 'Number | String',
|
||||
a4: '40px'
|
||||
},
|
||||
{
|
||||
a1: 'max',
|
||||
a2: '最大阈值',
|
||||
a3: 'Number | String',
|
||||
a4: '40px'
|
||||
}
|
||||
],
|
||||
tableProps2: [
|
||||
{
|
||||
prop: 'a1',
|
||||
label: '事件名'
|
||||
},
|
||||
{
|
||||
prop: 'a2',
|
||||
label: '说明'
|
||||
},
|
||||
{
|
||||
prop: 'a3',
|
||||
label: '返回值'
|
||||
}
|
||||
],
|
||||
tableData2: [
|
||||
{
|
||||
a1: 'on-move-start',
|
||||
a2: '拖拽开始',
|
||||
a3: '-'
|
||||
},
|
||||
{
|
||||
a1: 'on-moving',
|
||||
a2: '拖拽中',
|
||||
a3: 'event'
|
||||
},
|
||||
{
|
||||
a1: 'on-move-end',
|
||||
a2: '拖拽结束',
|
||||
a3: '-'
|
||||
}
|
||||
],
|
||||
tableProps3: [
|
||||
{
|
||||
prop: 'a1',
|
||||
label: '名称'
|
||||
},
|
||||
{
|
||||
prop: 'a2',
|
||||
label: '说明'
|
||||
}
|
||||
],
|
||||
tableData3: [
|
||||
{
|
||||
a1: 'left',
|
||||
a2: 'mode 为 horizontal 时可用，左边面板'
|
||||
},
|
||||
{
|
||||
a1: 'right',
|
||||
a2: 'mode 为 horizontal 时可用，右边面板'
|
||||
},
|
||||
{
|
||||
a1: 'top',
|
||||
a2: 'mode 为 vertical 时可用，上边面板'
|
||||
},
|
||||
{
|
||||
a1: 'bottom',
|
||||
a2: 'mode 为 vertical 时可用，下边面板'
|
||||
},
|
||||
{
|
||||
a1: 'trigger',
|
||||
a2: '自定义分割拖拽节点'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.split-page {
|
||||
.demo-box {
|
||||
margin-bottom: 40px;
|
||||
.split {
|
||||
height: 200px;
|
||||
border: 1px solid #dcdee2;
|
||||
}
|
||||
.split-pane {
|
||||
padding: 20px;
|
||||
}
|
||||
.split-pane.no-padding {
|
||||
height: 200px;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Ladataan…
Viittaa uudesa ongelmassa
Block a user