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

feat: publicize doc implemetation

Browse Source
This commit is contained in:
Justineo
2020-08-13 11:47:56 +08:00
parent 55b9b044f2
commit 1e5fcff6ad
372 changed files with 50636 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

200
one/docs/demo/tree/custom-item.vue Normal file
View File

@@ -0,0 +1,200 @@
<template>
<article>
<section>
<h4>Custom label</h4>
<veui-tree
:datasource="coffees"
item-click="toggle"
>
<template #item-label="{ item }">
<i>{{ item.label }}</i>
</template>
</veui-tree>
</section>
<section>
<h4>Custom item</h4>
<veui-tree
:datasource="coffees"
item-click="toggle"
class="custom-item"
>
<template #item="{ children, expanded, label }">
<template v-if="children && children.length">
<veui-button
ui="aux icon"
class="custom-toggle"
>
<veui-icon :name="expanded ? 'minus' : 'plus'"/>
</veui-button>
{{ label }}
</template>
</template>
</veui-tree>
</section>
</article>
</template>
<script>
import { Tree, Button, Icon } from 'veui'
import 'veui-theme-dls-icons/plus'
import 'veui-theme-dls-icons/minus'
export default {
components: {
'veui-tree': Tree,
'veui-button': Button,
'veui-icon': Icon
},
data () {
return {
coffees: [
{
label: 'Infused',
value: 'infused',
children: [
{
label: 'Brewed',
value: 'brewed',
children: [
{
label: 'Drip brewed',
value: 'drip-brewed'
},
{
label: 'Filtered',
value: 'filtered'
},
{
label: 'Pour-over',
value: 'pour-over'
},
{
label: 'Immersion brewed',
value: 'immersion-brewed'
}
]
},
{
label: 'French press',
value: 'french-press'
},
{
label: 'Cold brew',
value: 'cold-brew'
}
]
},
{
label: 'Boiled',
value: 'boiled',
children: [
{
label: 'Percolated',
value: 'percolated'
},
{
label: 'Turkish',
value: 'turkish'
},
{
label: 'Moka',
value: 'moka'
}
]
},
{
label: 'Espresso',
value: 'espresso',
children: [
{
label: 'Caffè Americano',
value: 'caffe-americano'
},
{
label: 'Cafe Lungo',
value: 'cafe-lungo'
},
{
label: 'Café Cubano',
value: 'cafe-cubano'
},
{
label: 'Caffè crema',
value: 'caffe-crema'
},
{
label: 'Cafe Zorro',
value: 'cafe-zorro'
},
{
label: 'Doppio',
value: 'doppio'
},
{
label: 'Espresso Romano',
value: 'espresso-romano'
},
{
label: 'Guillermo',
value: 'guillermo'
},
{
label: 'Ristretto',
value: 'ristretto'
}
]
},
{
label: 'Milk coffee',
value: 'milk-coffee',
children: [
{
label: 'Flat white',
value: 'flat-white'
},
{
label: 'Latte',
value: 'latte'
},
{
label: 'Macchiato',
value: 'macchiato'
},
{
label: 'Cappuccino',
value: 'cappuccino'
},
{
label: 'White coffee',
value: 'white-coffee'
}
]
}
]
}
}
}
</script>
<style lang="less" scoped docs>
@import "~veui-theme-dls/lib.less";
article {
.clearfix();
}
h4 {
margin-top: 0;
}
section {
float: left;
width: 45%;
}
</style>
<style lang="less">
.custom-toggle {
margin-right: 4px;
}
</style>

184
one/docs/demo/tree/default.vue Normal file
View File

@@ -0,0 +1,184 @@
<template>
<article>
<section>
<veui-tree
v-model="checked"
:datasource="coffees"
:expanded.sync="expanded"
checkable
selectable
:selected.sync="selected"
/>
</section>
<section>
<h4>Expanded items</h4>
{{ expanded }}
<h4>Checked items</h4>
{{ checked }}
<h4>Selected item</h4>
{{ selected }}
</section>
</article>
</template>
<script>
import { Tree } from 'veui'
export default {
components: {
'veui-tree': Tree
},
data () {
return {
expanded: ['infused', 'brewed'],
checked: [],
selected: null,
coffees: [
{
label: 'Infused',
value: 'infused',
children: [
{
label: 'Brewed',
value: 'brewed',
children: [
{
label: 'Drip brewed',
value: 'drip-brewed'
},
{
label: 'Filtered',
value: 'filtered',
disabled: true
},
{
label: 'Pour-over',
value: 'pour-over'
},
{
label: 'Immersion brewed',
value: 'immersion-brewed'
}
]
},
{
label: 'French press',
value: 'french-press'
},
{
label: 'Cold brew',
value: 'cold-brew'
}
]
},
{
label: 'Boiled',
value: 'boiled',
disabled: true,
children: [
{
label: 'Percolated',
value: 'percolated'
},
{
label: 'Turkish',
value: 'turkish'
},
{
label: 'Moka',
value: 'moka'
}
]
},
{
label: 'Espresso',
value: 'espresso',
children: [
{
label: 'Caffè Americano',
value: 'caffe-americano'
},
{
label: 'Cafe Lungo',
value: 'cafe-lungo',
disabled: true
},
{
label: 'Café Cubano',
value: 'cafe-cubano'
},
{
label: 'Caffè crema',
value: 'caffe-crema'
},
{
label: 'Cafe Zorro',
value: 'cafe-zorro'
},
{
label: 'Doppio',
value: 'doppio'
},
{
label: 'Espresso Romano',
value: 'espresso-romano'
},
{
label: 'Guillermo',
value: 'guillermo'
},
{
label: 'Ristretto',
value: 'ristretto'
}
]
},
{
label: 'Milk coffee',
value: 'milk-coffee',
children: [
{
label: 'Flat white',
value: 'flat-white'
},
{
label: 'Latte',
value: 'latte'
},
{
label: 'Macchiato',
value: 'macchiato'
},
{
label: 'Cappuccino',
value: 'cappuccino'
},
{
label: 'White coffee',
value: 'white-coffee'
}
]
}
]
}
}
}
</script>
<style lang="less" scoped docs>
h4 {
margin: 0;
}
h4 + h4 {
margin-top: 20px;
}
section {
width: 45%;
float: left;
}
article {
overflow: hidden;
}
</style>

81
one/docs/demo/tree/size.vue Normal file
View File

@@ -0,0 +1,81 @@
<template>
<article>
<section>
<h4>Normal size</h4>
<veui-tree
ui="m"
:datasource="datasource"
/>
</section>
<section>
<h4>Small size</h4>
<veui-tree
ui="s"
:datasource="datasource"
/>
</section>
</article>
</template>
<script>
import { Tree } from 'veui'
export default {
components: {
'veui-tree': Tree
},
data () {
return {
datasource: [
{
label: 'Infused',
value: 'infused',
children: [
{
label: 'Brewed',
value: 'brewed',
children: [
{
label: 'Drip brewed',
value: 'drip-brewed'
},
{
label: 'Filtered',
value: 'filtered'
},
{
label: 'Pour-over',
value: 'pour-over'
},
{
label: 'Immersion brewed',
value: 'immersion-brewed'
}
]
},
{
label: 'French press',
value: 'french-press'
},
{
label: 'Cold brew',
value: 'cold-brew'
}
]
}
]
}
}
}
</script>
<style lang="less" scoped docs>
section {
width: 45%;
float: left;
}
article {
overflow: hidden;
}
</style>