taolin/docs_vue2
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

docs: add docs for cascader

Browse Source 
Change-Id: Id5f4d5287f18417e91ff3986f1ab48354ab5bba8
This commit is contained in:
xiaodemen
2021-05-06 12:14:38 +08:00
committed by GU Yiling
parent 50e1124467
commit d6a3bcbb16
6 changed files with 885 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

128
one/docs/demo/cascader/inline.vue Normal file
View File

@@ -0,0 +1,128 @@
<template>
<article>
<veui-cascader
v-model="value"
searchable
:options="options"
/>
</article>
</template>
<script>
import { Cascader } from 'veui'
const options = [
{
label: '浙江',
value: '浙江',
options: [
{
label: '威海',
value: '威海'
},
{
label: '滨州',
value: '滨州'
},
{
label: '临沂',
value: '临沂'
},
{
label: '东营',
value: '东营'
},
{
label: '济南',
value: '济南'
}
]
},
{
label: '山东',
value: '山东',
options: [
{
label: '菏泽',
value: '菏泽',
options: [
{
label: '菏泽1',
value: '菏泽1'
}
]
},
{
label: '潍坊',
value: '潍坊',
options: [
{
label: '潍坊1',
value: '潍坊1'
}
]
},
{
label: '泰山',
value: '泰山'
},
{
label: '烟台',
value: '烟台'
},
{
label: '华山',
value: '华山'
},
{
label: '衡山',
value: '衡山'
},
{
label: '嵩山',
value: '嵩山'
},
{
label: '恒山',
value: '恒山'
},
{
label: '大雪山',
value: '大雪山'
}
]
},
{
label: '上海',
value: '上海',
disabled: true
},
{
label: '北京',
value: '北京'
},
{
label: '海外',
value: '海外',
disabled: true,
options: [
{
label: '日本',
value: '日本'
}
]
}
]
export default {
components: {
'veui-cascader': Cascader
},
data () {
return {
value: null,
options
}
}
}
</script>

194
one/docs/demo/cascader/multiple.vue Normal file
View File

@@ -0,0 +1,194 @@
<template>
<article>
<section class="cascader-config">
<veui-checkbox v-model="clearable2">Clearable</veui-checkbox>
<veui-checkbox v-model="showSelectAll2">有全选</veui-checkbox>
<veui-radio
v-model="trigger2"
value="click"
name="columnTrigger2"
>点击展开</veui-radio>
<veui-radio
v-model="trigger2"
value="hover"
name="columnTrigger2"
>hover展开</veui-radio>
<label>
Max:
<veui-number-input v-model="max2"/>
</label>
<label>
列宽度:
<veui-input v-model="columnWidth2"/>
</label>
</section>
<veui-cascader
class="mt-3p"
v-model="value2"
:options="options"
:searchable="searchable2"
:column-trigger="trigger2"
:clearable="clearable2"
:inline="inline2"
:show-select-all="showSelectAll2"
:max="max2"
:column-width="getRealColumnWidth(columnWidth2)"
multiple
/>
</article>
</template>
<script>
import { Cascader, Checkbox, Radio, NumberInput, Input } from 'veui'
const options = [
{
label: '浙江',
value: '浙江',
options: [
{
label: '威海',
value: '威海'
},
{
label: '滨州',
value: '滨州'
},
{
label: '临沂',
value: '临沂'
},
{
label: '东营',
value: '东营'
},
{
label: '济南',
value: '济南'
}
]
},
{
label: '山东',
value: '山东',
options: [
{
label: '菏泽',
value: '菏泽',
options: [
{
label: '菏泽1',
value: '菏泽1'
}
]
},
{
label: '潍坊',
value: '潍坊',
options: [
{
label: '潍坊1',
value: '潍坊1'
}
]
},
{
label: '泰山',
value: '泰山'
},
{
label: '烟台',
value: '烟台'
},
{
label: '华山',
value: '华山'
},
{
label: '衡山',
value: '衡山'
},
{
label: '嵩山',
value: '嵩山'
},
{
label: '恒山',
value: '恒山'
},
{
label: '大雪山',
value: '大雪山'
}
]
},
{
label: '上海',
value: '上海',
disabled: true
},
{
label: '北京',
value: '北京'
},
{
label: '海外',
value: '海外',
disabled: true,
options: [
{
label: '日本',
value: '日本'
}
]
}
]
export default {
components: {
'veui-cascader': Cascader,
'veui-checkbox': Checkbox,
'veui-radio': Radio,
'veui-number-input': NumberInput,
'veui-input': Input
},
data () {
return {
value2: null,
searchable2: true,
trigger2: 'click',
clearable2: true,
inline2: false,
columnWidth2: '',
showSelectAll2: false,
max2: null,
options
}
},
methods: {
getRealColumnWidth (val) {
if (val && !isNaN(+val)) {
return `${+val}px`
}
return val
}
}
}
</script>
<style lang="less" scoped docs>
.cascader-config {
display: flex;
align-items: center;
height: 32px;
& > * {
margin-right: 32px;
}
.veui-input {
width: 80px;
}
}
.mt-3p {
margin-top: 12px;
}
</style>

128
one/docs/demo/cascader/searchable.vue Normal file
View File

@@ -0,0 +1,128 @@
<template>
<article>
<veui-cascader
v-model="value"
searchable
:options="options"
/>
</article>
</template>
<script>
import { Cascader } from 'veui'
const options = [
{
label: '浙江',
value: '浙江',
options: [
{
label: '威海',
value: '威海'
},
{
label: '滨州',
value: '滨州'
},
{
label: '临沂',
value: '临沂'
},
{
label: '东营',
value: '东营'
},
{
label: '济南',
value: '济南'
}
]
},
{
label: '山东',
value: '山东',
options: [
{
label: '菏泽',
value: '菏泽',
options: [
{
label: '菏泽1',
value: '菏泽1'
}
]
},
{
label: '潍坊',
value: '潍坊',
options: [
{
label: '潍坊1',
value: '潍坊1'
}
]
},
{
label: '泰山',
value: '泰山'
},
{
label: '烟台',
value: '烟台'
},
{
label: '华山',
value: '华山'
},
{
label: '衡山',
value: '衡山'
},
{
label: '嵩山',
value: '嵩山'
},
{
label: '恒山',
value: '恒山'
},
{
label: '大雪山',
value: '大雪山'
}
]
},
{
label: '上海',
value: '上海',
disabled: true
},
{
label: '北京',
value: '北京'
},
{
label: '海外',
value: '海外',
disabled: true,
options: [
{
label: '日本',
value: '日本'
}
]
}
]
export default {
components: {
'veui-cascader': Cascader
},
data () {
return {
value: null,
options
}
}
}
</script>

153
one/docs/demo/cascader/size.vue Normal file
View File

@@ -0,0 +1,153 @@
<template>
<div class="cascader-wrap">
<veui-cascader
v-model="value"
ui="l"
:options="options"
/>
<veui-cascader
v-model="value"
:options="options"
/>
<veui-cascader
v-model="value"
ui="s"
:options="options"
/>
<veui-cascader
v-model="value"
ui="xs"
:options="options"
/>
</div>
</template>
<script>
import { Cascader } from 'veui'
const options = [
{
label: '浙江',
value: '浙江',
options: [
{
label: '威海',
value: '威海'
},
{
label: '滨州',
value: '滨州'
},
{
label: '临沂',
value: '临沂'
},
{
label: '东营',
value: '东营'
},
{
label: '济南',
value: '济南'
}
]
},
{
label: '山东',
value: '山东',
options: [
{
label: '菏泽',
value: '菏泽',
options: [
{
label: '菏泽1',
value: '菏泽1'
}
]
},
{
label: '潍坊',
value: '潍坊',
options: [
{
label: '潍坊1',
value: '潍坊1'
}
]
},
{
label: '泰山',
value: '泰山'
},
{
label: '烟台',
value: '烟台'
},
{
label: '华山',
value: '华山'
},
{
label: '衡山',
value: '衡山'
},
{
label: '嵩山',
value: '嵩山'
},
{
label: '恒山',
value: '恒山'
},
{
label: '大雪山',
value: '大雪山'
}
]
},
{
label: '上海',
value: '上海',
disabled: true
},
{
label: '北京',
value: '北京'
},
{
label: '海外',
value: '海外',
disabled: true,
options: [
{
label: '日本',
value: '日本'
}
]
}
]
export default {
components: {
'veui-cascader': Cascader
},
data () {
return {
value: null,
options
}
}
}
</script>
<style lang="less" scoped docs>
.cascader-wrap {
display: flex;
flex-direction: column;
align-items: flex-start;
.veui-cascader + .veui-cascader{
margin-top: 12px;
}
}
</style>