splitPane #7
14
package-lock.json
generated
14
package-lock.json
generated
@ -8,7 +8,7 @@
|
|||||||
"name": "code-brick-wd",
|
"name": "code-brick-wd",
|
||||||
"version": "0.1.0",
|
"version": "0.1.0",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"code-brick-zj": "^0.0.7",
|
"code-brick-zj": "^0.1.0",
|
||||||
"core-js": "^3.8.3",
|
"core-js": "^3.8.3",
|
||||||
"element-ui": "^2.15.12",
|
"element-ui": "^2.15.12",
|
||||||
"vue": "^2.6.14",
|
"vue": "^2.6.14",
|
||||||
@ -4007,9 +4007,9 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/code-brick-zj": {
|
"node_modules/code-brick-zj": {
|
||||||
"version": "0.0.7",
|
"version": "0.1.0",
|
||||||
"resolved": "https://registry.npmjs.org/code-brick-zj/-/code-brick-zj-0.0.7.tgz",
|
"resolved": "https://registry.npmjs.org/code-brick-zj/-/code-brick-zj-0.1.0.tgz",
|
||||||
"integrity": "sha512-ZuhseY/9RUUUweAiTdumq5pJKAKAJxpvD8yjcVluY+cGDEKyoKzN9PjycPh2tUsE/gmwShfgrcIcm5DKcmzqvA=="
|
"integrity": "sha512-vEymEN/28lEJP3045DCE/7143SXjdNyNmWZuy3/NcIUP/e9YOjhm46itzjNWCjJZCI6vWvQkCD1EfmA4hPknuw=="
|
||||||
},
|
},
|
||||||
"node_modules/color-convert": {
|
"node_modules/color-convert": {
|
||||||
"version": "1.9.3",
|
"version": "1.9.3",
|
||||||
@ -14473,9 +14473,9 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
"code-brick-zj": {
|
"code-brick-zj": {
|
||||||
"version": "0.0.7",
|
"version": "0.1.0",
|
||||||
"resolved": "https://registry.npmjs.org/code-brick-zj/-/code-brick-zj-0.0.7.tgz",
|
"resolved": "https://registry.npmjs.org/code-brick-zj/-/code-brick-zj-0.1.0.tgz",
|
||||||
"integrity": "sha512-ZuhseY/9RUUUweAiTdumq5pJKAKAJxpvD8yjcVluY+cGDEKyoKzN9PjycPh2tUsE/gmwShfgrcIcm5DKcmzqvA=="
|
"integrity": "sha512-vEymEN/28lEJP3045DCE/7143SXjdNyNmWZuy3/NcIUP/e9YOjhm46itzjNWCjJZCI6vWvQkCD1EfmA4hPknuw=="
|
||||||
},
|
},
|
||||||
"color-convert": {
|
"color-convert": {
|
||||||
"version": "1.9.3",
|
"version": "1.9.3",
|
||||||
|
|||||||
@ -8,7 +8,7 @@
|
|||||||
"lint": "vue-cli-service lint"
|
"lint": "vue-cli-service lint"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"code-brick-zj": "^0.0.7",
|
"code-brick-zj": "^0.1.0",
|
||||||
"core-js": "^3.8.3",
|
"core-js": "^3.8.3",
|
||||||
"element-ui": "^2.15.12",
|
"element-ui": "^2.15.12",
|
||||||
"vue": "^2.6.14",
|
"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 }
|
{ path: '*', redirect: '/home/introduce', hidden: true }
|
||||||
]
|
]
|
||||||
|
|
||||||
|
|||||||
@ -3,9 +3,16 @@
|
|||||||
<p>
|
<p>
|
||||||
组件包目前封装常用的四个组件:表格，搜索区域，分页，对话框。包npm地址为：https://www.npmjs.com/package/code-brick-zj。
|
组件包目前封装常用的四个组件:表格，搜索区域，分页，对话框。包npm地址为：https://www.npmjs.com/package/code-brick-zj。
|
||||||
</p>
|
</p>
|
||||||
<p>文档当前使用的组件包的版本为：0.0.7</p>
|
<p>文档当前使用的组件包的版本为：0.1.0</p>
|
||||||
<div class="block">
|
<div class="block">
|
||||||
<el-timeline>
|
<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-timeline-item timestamp="2023/1/10" placement="top">
|
||||||
<el-card>
|
<el-card>
|
||||||
<h4>修改</h4>
|
<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>
|
||||||
Loading…
Reference in New Issue
Block a user