docs: update docs
Change-Id: I76d0f72679cd75085f5ffd42f641daa198cafe11 docs: update docs for alert/autocomplete/carousel, etc. Change-Id: Ib7507f4979024f53c127e4b64b88560b93999db7 fix: update for autocomplete filter Change-Id: Ie54556715fa52838aeb6caaa19b4f9a9f14b490f docs: add docs for calendar/transfer/cascader Change-Id: I655b3cb3d25dd0649de9ae7e224e7063a40dd079 fix: add more demos for input/textarea Change-Id: Iada527ca82643a435a4775110b332155512d62a7 docs: add docs for uploader,select,table, etc. Change-Id: Ib034fd5cc9d9a420d4e002956ae925175783c5f3 docs: adjust formatting and punc. docs: adjust docs for uploader, etc. Change-Id: If06c8c1102eafce43f5802a333676fc9e62cd474 docs: add docs for nav Change-Id: If56a653ec53f19239606128fd30cae80f8e10025 docs: improve anchor demos Change-Id: I6ac1c08cc8905924d0062def1f8921fe1f302f15 docs: refine wording and format docs: update docs for check-button-group desc Change-Id: Ica7d6d0692250f0be6bd330b1ad4cc41938afd46
This commit is contained in:
Justineo
33
one/docs/demo/alert/extra.vue
Normal file
33
one/docs/demo/alert/extra.vue
Normal file
@@ -0,0 +1,33 @@
|
||||
<template>
|
||||
<article>
|
||||
<veui-alert
|
||||
type="success"
|
||||
ui="strong"
|
||||
message="恭喜你，你的请求已成功处理"
|
||||
closable
|
||||
>
|
||||
<template slot="title">恭喜你</template>
|
||||
<template slot="extra">
|
||||
<veui-button ui="text">查看详情</veui-button>
|
||||
</template>
|
||||
恭喜你，你的请求已成功处理
|
||||
</veui-alert>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Alert, Button } from 'veui'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-alert': Alert,
|
||||
'veui-button': Button
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.veui-alert {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
</style>
|
||||
36
one/docs/demo/alert/title.vue
Normal file
36
one/docs/demo/alert/title.vue
Normal file
@@ -0,0 +1,36 @@
|
||||
<template>
|
||||
<article>
|
||||
<veui-alert
|
||||
type="success"
|
||||
title="消息标题"
|
||||
>
|
||||
Your profile has been updated.
|
||||
</veui-alert>
|
||||
<veui-alert
|
||||
type="success"
|
||||
>
|
||||
Your profile has been updated.
|
||||
<template slot="title">消息标题</template>
|
||||
</veui-alert>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Alert } from 'veui'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-alert': Alert
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped docs>
|
||||
.veui-alert {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<docs>
|
||||
可将消息标题写在 `title` 插槽中，也可以通过 `title` 属性进行指定。
|
||||
</docs>
|
||||
109
one/docs/demo/anchor/normal.vue
Normal file
109
one/docs/demo/anchor/normal.vue
Normal file
@@ -0,0 +1,109 @@
|
||||
<template>
|
||||
<article class="anchor-offset-demo">
|
||||
<div
|
||||
ref="container"
|
||||
class="anchor-wrapper"
|
||||
>
|
||||
<div
|
||||
v-for="i in coffees"
|
||||
:id="i.value.indexOf('#') >= 0 ? i.value.slice(1) : i.value"
|
||||
:key="i.value"
|
||||
class="block"
|
||||
>
|
||||
{{ i.label }}
|
||||
</div>
|
||||
</div>
|
||||
<section class="anchor-two">
|
||||
<veui-anchor
|
||||
:items="coffees"
|
||||
container="container"
|
||||
/>
|
||||
</section>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Anchor } from 'veui'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-anchor': Anchor
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
coffees: [
|
||||
{
|
||||
label: 'Infused',
|
||||
value: '#infused',
|
||||
children: [
|
||||
{
|
||||
label: 'Breadcrumb',
|
||||
value: '/components/breadcrumb'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Boiled',
|
||||
value: '#boiled',
|
||||
children: [
|
||||
{
|
||||
label: 'Button',
|
||||
value: '/components/button'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Espresso',
|
||||
value: '#espresso'
|
||||
},
|
||||
{
|
||||
label: 'Milk coffee',
|
||||
value: '#milk-coffee'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.anchor-offset-demo {
|
||||
position: relative;
|
||||
|
||||
.anchor-wrapper {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 300px;
|
||||
overflow: auto;
|
||||
border: 1px dashed;
|
||||
|
||||
& > section {
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
|
||||
.block {
|
||||
white-space: nowrap;
|
||||
border-top: 1px solid #000;
|
||||
width: 100px;
|
||||
height: 150px;
|
||||
flex: none;
|
||||
|
||||
& + .block {
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.anchor-two {
|
||||
position: absolute;
|
||||
left: 250px;
|
||||
top: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<docs>
|
||||
虚线框标记容器，实线标记锚点项顶部，当二者重合触发激活。
|
||||
</docs>
|
||||
@@ -39,7 +39,7 @@ export default {
|
||||
coffees: [
|
||||
{
|
||||
label: 'Infused',
|
||||
value: '#infused2',
|
||||
value: '#infused1',
|
||||
children: [
|
||||
{
|
||||
label: 'Breadcrumb',
|
||||
@@ -49,7 +49,7 @@ export default {
|
||||
},
|
||||
{
|
||||
label: 'Boiled',
|
||||
value: '#boiled2',
|
||||
value: '#boiled1',
|
||||
children: [
|
||||
{
|
||||
label: 'Button',
|
||||
@@ -59,11 +59,11 @@ export default {
|
||||
},
|
||||
{
|
||||
label: 'Espresso',
|
||||
value: '#espresso2'
|
||||
value: '#espresso1'
|
||||
},
|
||||
{
|
||||
label: 'Milk coffee',
|
||||
value: '#milk-coffee2'
|
||||
value: '#milk-coffee1'
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -83,7 +83,7 @@ export default {
|
||||
border-top: 1px solid red;
|
||||
|
||||
&::after {
|
||||
content: "targetOffset: 20px";
|
||||
content: "targetOffset（切换于此）";
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
@@ -97,7 +97,7 @@ export default {
|
||||
left: 250px;
|
||||
|
||||
&::after {
|
||||
content: "stickyOffset: 30px";
|
||||
content: "stickyOffset（吸附于此）";
|
||||
}
|
||||
}
|
||||
|
||||
@@ -116,7 +116,7 @@ export default {
|
||||
|
||||
.block {
|
||||
white-space: nowrap;
|
||||
border-top: 1px solid #ccc;
|
||||
border-top: 1px solid #000;
|
||||
width: 100px;
|
||||
height: 150px;
|
||||
flex: none;
|
||||
@@ -136,5 +136,9 @@ export default {
|
||||
</style>
|
||||
|
||||
<docs>
|
||||
虚线框标记容器。
|
||||
虚线框标记容器，黑实线标记锚点项顶部。
|
||||
|
||||
当黑实线和 `tagetOffset` 线重合触发激活。
|
||||
|
||||
`Anchor` 吸附在 `stickyOffset` 线处。
|
||||
</docs>
|
||||
|
||||
@@ -13,17 +13,7 @@
|
||||
>
|
||||
{{ i.label }}
|
||||
</div>
|
||||
|
||||
<section class="anchor-one">
|
||||
<h3>普通锚点</h3>
|
||||
<veui-anchor
|
||||
:items="coffees"
|
||||
:sticky="false"
|
||||
container="container"
|
||||
/>
|
||||
</section>
|
||||
<section class="anchor-two">
|
||||
<h3>吸附锚点</h3>
|
||||
<veui-anchor
|
||||
:items="coffees"
|
||||
container="container"
|
||||
@@ -45,7 +35,7 @@ export default {
|
||||
coffees: [
|
||||
{
|
||||
label: 'Infused',
|
||||
value: '#infused',
|
||||
value: '#infused2',
|
||||
children: [
|
||||
{
|
||||
label: 'Breadcrumb',
|
||||
@@ -55,7 +45,7 @@ export default {
|
||||
},
|
||||
{
|
||||
label: 'Boiled',
|
||||
value: '#boiled',
|
||||
value: '#boiled2',
|
||||
children: [
|
||||
{
|
||||
label: 'Button',
|
||||
@@ -65,11 +55,11 @@ export default {
|
||||
},
|
||||
{
|
||||
label: 'Espresso',
|
||||
value: '#espresso'
|
||||
value: '#espresso2'
|
||||
},
|
||||
{
|
||||
label: 'Milk coffee',
|
||||
value: '#milk-coffee'
|
||||
value: '#milk-coffee2'
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -81,22 +71,6 @@ export default {
|
||||
.anchor-demo {
|
||||
position: relative;
|
||||
|
||||
.line {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 180px;
|
||||
border-top: 1px solid red;;
|
||||
|
||||
&::after {
|
||||
content: "0";
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
color: red;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.anchor-wrapper {
|
||||
position: relative;
|
||||
display: flex;
|
||||
@@ -112,7 +86,7 @@ export default {
|
||||
|
||||
.block {
|
||||
white-space: nowrap;
|
||||
border-top: 1px solid #ccc;
|
||||
border-top: 1px solid #000;
|
||||
width: 100px;
|
||||
height: 150px;
|
||||
flex: none;
|
||||
@@ -130,7 +104,7 @@ export default {
|
||||
|
||||
.anchor-two {
|
||||
position: absolute;
|
||||
left: 450px;
|
||||
left: 250px;
|
||||
top: 50px;
|
||||
}
|
||||
}
|
||||
@@ -138,5 +112,5 @@ export default {
|
||||
</style>
|
||||
|
||||
<docs>
|
||||
虚线框标记容器。
|
||||
虚线框标记容器，实线标记锚点项顶部，当二者重合触发激活。
|
||||
</docs>
|
||||
|
||||
72
one/docs/demo/autocomplete/custom.vue
Normal file
72
one/docs/demo/autocomplete/custom.vue
Normal file
@@ -0,0 +1,72 @@
|
||||
<template>
|
||||
<article class="autocomplete-normal-demo">
|
||||
<section>
|
||||
<h3>大小写敏感搜索叶子节点</h3>
|
||||
<veui-autocomplete
|
||||
:datasource="suggestions"
|
||||
placeholder="请输入"
|
||||
suggest-trigger="focus"
|
||||
:match="match"
|
||||
:filter="filter"
|
||||
/>
|
||||
</section>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Autocomplete } from 'veui'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-autocomplete': Autocomplete
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
suggestions: [
|
||||
{
|
||||
label: 'Milk coffee',
|
||||
value: 'milk-coffee',
|
||||
options: [
|
||||
{
|
||||
value: 'Moka'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: 'Turkish'
|
||||
},
|
||||
{
|
||||
value: 'latte'
|
||||
},
|
||||
{
|
||||
value: 'cappuccino'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
match ({ label }, keyword) {
|
||||
const index = label.indexOf(keyword)
|
||||
return index >= 0
|
||||
? [[index, index + keyword.length]]
|
||||
: false
|
||||
},
|
||||
filter ({ options }, _, { offsets }) {
|
||||
// 不要父节点，只要叶子节点
|
||||
return options && options.length
|
||||
? false
|
||||
: offsets === true || (!!offsets && !!offsets.length)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.autocomplete-normal-demo {
|
||||
display: flex;
|
||||
|
||||
section + section {
|
||||
margin-left: 60px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -106,6 +106,7 @@ export default {
|
||||
<style lang="less" scoped>
|
||||
.autocomplete-normal-demo {
|
||||
display: flex;
|
||||
|
||||
section + section {
|
||||
margin-left: 60px;
|
||||
}
|
||||
|
||||
50
one/docs/demo/autocomplete/strict.vue
Normal file
50
one/docs/demo/autocomplete/strict.vue
Normal file
@@ -0,0 +1,50 @@
|
||||
<template>
|
||||
<article class="autocomplete-normal-demo">
|
||||
<section>
|
||||
<veui-autocomplete
|
||||
:datasource="suggestions"
|
||||
placeholder="请输入"
|
||||
suggest-trigger="focus"
|
||||
strict
|
||||
/>
|
||||
</section>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Autocomplete } from 'veui'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-autocomplete': Autocomplete
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
suggestions: [
|
||||
{
|
||||
value: 'Moka'
|
||||
},
|
||||
{
|
||||
value: 'Turkish'
|
||||
},
|
||||
{
|
||||
value: 'latte'
|
||||
},
|
||||
{
|
||||
value: 'cappuccino'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.autocomplete-normal-demo {
|
||||
display: flex;
|
||||
|
||||
section + section {
|
||||
margin-left: 60px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
43
one/docs/demo/badge/corner-dot.vue
Normal file
43
one/docs/demo/badge/corner-dot.vue
Normal file
@@ -0,0 +1,43 @@
|
||||
<template>
|
||||
<article>
|
||||
<section>
|
||||
<veui-badge type="success">
|
||||
Running
|
||||
</veui-badge>
|
||||
<veui-badge type="info">
|
||||
New
|
||||
</veui-badge>
|
||||
<veui-badge>
|
||||
Rejected
|
||||
</veui-badge>
|
||||
<veui-badge type="warning">
|
||||
Auditing
|
||||
</veui-badge>
|
||||
<veui-badge type="aux">
|
||||
Expired
|
||||
</veui-badge>
|
||||
</section>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Badge } from 'veui'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-badge': Badge
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
section {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
.veui-badge {
|
||||
& + & {
|
||||
margin-left: 30px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
25
one/docs/demo/calendar/date-class.vue
Normal file
25
one/docs/demo/calendar/date-class.vue
Normal file
@@ -0,0 +1,25 @@
|
||||
<template>
|
||||
<article>
|
||||
<section>
|
||||
<veui-calendar
|
||||
date-class="custom-date"
|
||||
/>
|
||||
</section>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Calendar } from 'veui'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-calendar': Calendar
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.custom-date {
|
||||
font-style: italic;
|
||||
}
|
||||
</style>
|
||||
27
one/docs/demo/calendar/disabled-date.vue
Normal file
27
one/docs/demo/calendar/disabled-date.vue
Normal file
@@ -0,0 +1,27 @@
|
||||
<template>
|
||||
<article>
|
||||
<section>
|
||||
<h4>只允许选未来的日期</h4>
|
||||
<veui-calendar :disabled-date="disabledDate"/>
|
||||
</section>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Calendar } from 'veui'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-calendar': Calendar
|
||||
},
|
||||
created () {
|
||||
this.now = new Date()
|
||||
this.now.setHours(0, 0, 0, 0)
|
||||
},
|
||||
methods: {
|
||||
disabledDate (date) {
|
||||
return this.now.getTime() > date.getTime()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
31
one/docs/demo/calendar/fill-month.vue
Normal file
31
one/docs/demo/calendar/fill-month.vue
Normal file
@@ -0,0 +1,31 @@
|
||||
<template>
|
||||
<article>
|
||||
<p>
|
||||
fill-month: <veui-switch v-model="isFill"/>
|
||||
</p>
|
||||
<veui-calendar :fill-month="isFill"/>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Calendar, Switch } from 'veui'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-calendar': Calendar,
|
||||
'veui-switch': Switch
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
date: new Date(),
|
||||
isFill: true
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.veui-radio-group {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
</style>
|
||||
37
one/docs/demo/calendar/type.vue
Normal file
37
one/docs/demo/calendar/type.vue
Normal file
@@ -0,0 +1,37 @@
|
||||
<template>
|
||||
<article>
|
||||
<veui-radio-group
|
||||
v-model="type"
|
||||
:items="types"
|
||||
/>
|
||||
<veui-calendar :type="type"/>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Calendar, RadioGroup } from 'veui'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-calendar': Calendar,
|
||||
'veui-radio-group': RadioGroup
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
date: new Date(),
|
||||
type: 'date',
|
||||
types: [
|
||||
{ label: 'date', value: 'date' },
|
||||
{ label: 'month', value: 'month' },
|
||||
{ label: 'year', value: 'year' }
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.veui-radio-group {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
</style>
|
||||
@@ -11,7 +11,7 @@
|
||||
v-model="indicatorPosition"
|
||||
:items="positions"
|
||||
/>
|
||||
<h4>Indicator alignment</h4>
|
||||
<h4>Indicator align</h4>
|
||||
<veui-radio-group
|
||||
v-model="align"
|
||||
:items="alignments"
|
||||
@@ -31,8 +31,6 @@
|
||||
<script>
|
||||
import { Carousel, RadioGroup } from 'veui'
|
||||
|
||||
// TODO update alignment
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-carousel': Carousel,
|
||||
|
||||
57
one/docs/demo/carousel/ratio.vue
Normal file
57
one/docs/demo/carousel/ratio.vue
Normal file
@@ -0,0 +1,57 @@
|
||||
<template>
|
||||
<article>
|
||||
<section>
|
||||
<h4>按 `2/1` 比例展示轮播项</h4>
|
||||
<veui-carousel
|
||||
:datasource="items"
|
||||
effect="slide"
|
||||
indicator-align="end"
|
||||
slide-aspect-ratio="2/1"
|
||||
/>
|
||||
</section>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Carousel } from 'veui'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-carousel': Carousel
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
items: [
|
||||
{
|
||||
src:
|
||||
'https://ecmb.bdimg.com/public01/one-design/2b77cc4a4c5c906993c0e512f3ddaf03.jpg',
|
||||
alt: 'A cute kitty looking at you with its greenish eyes.',
|
||||
label: 'Cat'
|
||||
},
|
||||
{
|
||||
src:
|
||||
'https://ecmb.bdimg.com/public01/one-design/6fedc62b9221846ce5114c7447622e47.jpeg',
|
||||
alt: 'A common kingfisher flying above river.',
|
||||
label: 'Kingfisher'
|
||||
},
|
||||
{
|
||||
src:
|
||||
'https://ecmb.bdimg.com/public01/one-design/e1b6473c898d9e456452ee79d7533a86.jpeg',
|
||||
alt: 'A white and gray dolphin in blue water.',
|
||||
label: 'Dolphin'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped docs>
|
||||
h4 {
|
||||
margin: 0 0 10px;
|
||||
}
|
||||
|
||||
section {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
</style>
|
||||
144
one/docs/demo/cascader/column-trigger.vue
Normal file
144
one/docs/demo/cascader/column-trigger.vue
Normal file
@@ -0,0 +1,144 @@
|
||||
<template>
|
||||
<article>
|
||||
<section>
|
||||
<veui-radio-group
|
||||
v-model="trigger"
|
||||
:items="triggers"
|
||||
/>
|
||||
<veui-cascader
|
||||
:column-trigger="trigger"
|
||||
:options="options"
|
||||
/>
|
||||
</section>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Cascader, RadioGroup } 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-radio-group': RadioGroup
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
trigger: 'click',
|
||||
triggers: [
|
||||
{ label: 'click', value: 'click' },
|
||||
{ label: 'hover', value: 'hover' }
|
||||
],
|
||||
options
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.veui-radio-group {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
</style>
|
||||
144
one/docs/demo/cascader/select-mode.vue
Normal file
144
one/docs/demo/cascader/select-mode.vue
Normal file
@@ -0,0 +1,144 @@
|
||||
<template>
|
||||
<article>
|
||||
<section>
|
||||
<veui-radio-group
|
||||
v-model="selectMode"
|
||||
:items="selectModes"
|
||||
/>
|
||||
<veui-cascader
|
||||
:select-mode="selectMode"
|
||||
:options="options"
|
||||
/>
|
||||
</section>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Cascader, RadioGroup } 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-radio-group': RadioGroup
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
selectMode: 'any',
|
||||
selectModes: [
|
||||
{ label: 'any', value: 'any' },
|
||||
{ label: 'leaf-only', value: 'leaf-only' }
|
||||
],
|
||||
options
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.veui-radio-group {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
</style>
|
||||
144
one/docs/demo/cascader/value-display.vue
Normal file
144
one/docs/demo/cascader/value-display.vue
Normal file
@@ -0,0 +1,144 @@
|
||||
<template>
|
||||
<article>
|
||||
<section>
|
||||
<veui-radio-group
|
||||
v-model="valueDisplay"
|
||||
:items="valueDisplays"
|
||||
/>
|
||||
<veui-cascader
|
||||
:value-display="valueDisplay"
|
||||
:options="options"
|
||||
/>
|
||||
</section>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Cascader, RadioGroup } 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-radio-group': RadioGroup
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
valueDisplay: 'simple',
|
||||
valueDisplays: [
|
||||
{ label: 'simple', value: 'simple' },
|
||||
{ label: 'complete', value: 'complete' }
|
||||
],
|
||||
options
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.veui-radio-group {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
</style>
|
||||
50
one/docs/demo/check-button-group/desc.vue
Normal file
50
one/docs/demo/check-button-group/desc.vue
Normal file
@@ -0,0 +1,50 @@
|
||||
<template>
|
||||
<article>
|
||||
<section>
|
||||
<veui-check-button-group
|
||||
v-model="flavor"
|
||||
:items="flavors"
|
||||
/>
|
||||
</section>
|
||||
<section>
|
||||
<veui-check-button-group
|
||||
v-model="flavor"
|
||||
:items="flavors"
|
||||
>
|
||||
<template #desc="{ desc, label }">
|
||||
{{ desc || `a description for ${label}` }}
|
||||
</template>
|
||||
</veui-check-button-group>
|
||||
</section>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { CheckButtonGroup } from 'veui'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-check-button-group': CheckButtonGroup
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
flavor: null,
|
||||
flavors: [
|
||||
{ value: 'LATTE', label: 'Latte', desc: 'a description for latte.' },
|
||||
{ value: 'MOCHA', label: 'Mocha', desc: 'a description for mocha.' },
|
||||
{ value: 'AMERICANO', label: 'Americano' }
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
section {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
h4 {
|
||||
margin-top: 0;
|
||||
}
|
||||
</style>
|
||||
60
one/docs/demo/check-button-group/simple.vue
Normal file
60
one/docs/demo/check-button-group/simple.vue
Normal file
@@ -0,0 +1,60 @@
|
||||
<template>
|
||||
<article>
|
||||
<section>
|
||||
<veui-check-button-group
|
||||
v-model="selected"
|
||||
ui="simple"
|
||||
:items="sizes"
|
||||
/>
|
||||
<p>Checked: {{ readable }}</p>
|
||||
</section>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { CheckButtonGroup } from 'veui'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-check-button-group': CheckButtonGroup
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
selected: ['any'],
|
||||
sizes: [
|
||||
{
|
||||
label: 'Any',
|
||||
value: 'any'
|
||||
},
|
||||
{
|
||||
label: 'Small',
|
||||
value: 'sm'
|
||||
},
|
||||
{
|
||||
label: 'Medium',
|
||||
value: 'md'
|
||||
},
|
||||
{
|
||||
label: 'Large',
|
||||
value: 'lg'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
readable () {
|
||||
return (this.selected || []).join(', ') || '-'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
section {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
h4 {
|
||||
margin-top: 0;
|
||||
}
|
||||
</style>
|
||||
46
one/docs/demo/check-button-group/stable.vue
Normal file
46
one/docs/demo/check-button-group/stable.vue
Normal file
@@ -0,0 +1,46 @@
|
||||
<template>
|
||||
<article>
|
||||
<section>
|
||||
<p>
|
||||
最小宽度：<veui-switch v-model="isStable"/>
|
||||
</p>
|
||||
<veui-check-button-group
|
||||
v-model="flavor"
|
||||
:items="flavors"
|
||||
:ui="isStable ? 'stable' : ''"
|
||||
/>
|
||||
</section>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { CheckButtonGroup, Switch } from 'veui'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-check-button-group': CheckButtonGroup,
|
||||
'veui-switch': Switch
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
isStable: true,
|
||||
flavor: null,
|
||||
flavors: [
|
||||
{ value: 'LATTE', label: 'Latte' },
|
||||
{ value: 'MOCHA', label: 'Mocha' },
|
||||
{ value: 'AMERICANO', label: 'Americano' }
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
section {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
h4 {
|
||||
margin-top: 0;
|
||||
}
|
||||
</style>
|
||||
50
one/docs/demo/checkbox-group/desc.vue
Normal file
50
one/docs/demo/checkbox-group/desc.vue
Normal file
@@ -0,0 +1,50 @@
|
||||
<template>
|
||||
<article>
|
||||
<section>
|
||||
<veui-checkbox-group
|
||||
v-model="flavor"
|
||||
:items="flavors"
|
||||
/>
|
||||
</section>
|
||||
<section>
|
||||
<veui-checkbox-group
|
||||
v-model="flavor"
|
||||
:items="flavors"
|
||||
>
|
||||
<template #desc="{ desc, label }">
|
||||
{{ desc || `a description for ${label}` }}
|
||||
</template>
|
||||
</veui-checkbox-group>
|
||||
</section>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { CheckboxGroup } from 'veui'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-checkbox-group': CheckboxGroup
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
flavor: null,
|
||||
flavors: [
|
||||
{ value: 'LATTE', label: 'Latte', desc: 'a description for latte.' },
|
||||
{ value: 'MOCHA', label: 'Mocha', desc: 'a description for mocha.' },
|
||||
{ value: 'AMERICANO', label: 'Americano' }
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
section {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
h4 {
|
||||
margin-top: 0;
|
||||
}
|
||||
</style>
|
||||
45
one/docs/demo/date-picker/disabled.vue
Normal file
45
one/docs/demo/date-picker/disabled.vue
Normal file
@@ -0,0 +1,45 @@
|
||||
<template>
|
||||
<article>
|
||||
<section>
|
||||
<h4>Disabled</h4>
|
||||
<veui-date-picker
|
||||
v-model="date"
|
||||
disabled
|
||||
placeholder="disabled"
|
||||
/>
|
||||
</section>
|
||||
<section>
|
||||
<h4>Readonly</h4>
|
||||
<veui-date-picker
|
||||
v-model="date"
|
||||
readonly
|
||||
placeholder="readonly"
|
||||
/>
|
||||
</section>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { DatePicker } from 'veui'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-date-picker': DatePicker
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
date: new Date()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
section:not(:last-child) {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
h4 {
|
||||
margin-top: 0;
|
||||
}
|
||||
</style>
|
||||
31
one/docs/demo/input/composition.vue
Normal file
31
one/docs/demo/input/composition.vue
Normal file
@@ -0,0 +1,31 @@
|
||||
<template>
|
||||
<article>
|
||||
<section>
|
||||
<p>
|
||||
composition: <veui-switch v-model="composition"/>
|
||||
</p>
|
||||
<p>Input value: {{ value }}</p>
|
||||
<veui-input
|
||||
v-model="value"
|
||||
:composition="composition"
|
||||
/>
|
||||
</section>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Input, Switch } from 'veui'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-input': Input,
|
||||
'veui-switch': Switch
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
composition: true,
|
||||
value: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
33
one/docs/demo/input/trim.vue
Normal file
33
one/docs/demo/input/trim.vue
Normal file
@@ -0,0 +1,33 @@
|
||||
<template>
|
||||
<article>
|
||||
<section>
|
||||
<p class="respect-whitespace">Input value: `{{ value }}`</p>
|
||||
<veui-input
|
||||
v-model="value"
|
||||
trim
|
||||
/>
|
||||
</section>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Input } from 'veui'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-input': Input
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
composition: true,
|
||||
value: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.respect-whitespace {
|
||||
white-space: pre;
|
||||
}
|
||||
</style>
|
||||
87
one/docs/demo/nav/card.vue
Normal file
87
one/docs/demo/nav/card.vue
Normal file
@@ -0,0 +1,87 @@
|
||||
<template>
|
||||
<article>
|
||||
<section>
|
||||
<veui-nav :items="items"/>
|
||||
</section>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Nav } from 'veui'
|
||||
|
||||
export default {
|
||||
name: 'veui-nav-demo',
|
||||
components: {
|
||||
'veui-nav': Nav
|
||||
},
|
||||
data () {
|
||||
let items = [
|
||||
{
|
||||
label: 'Group One',
|
||||
name: 'group-one',
|
||||
position: 'card',
|
||||
children: [
|
||||
{
|
||||
label: 'Sub One',
|
||||
name: 'sub-one',
|
||||
children: [
|
||||
{
|
||||
label: 'Input',
|
||||
to: '/components/input'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Loading',
|
||||
name: 'Loading',
|
||||
to: '/components/loading',
|
||||
children: [
|
||||
{
|
||||
label: 'Switch',
|
||||
to: '/components/switch'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Button',
|
||||
name: 'Button',
|
||||
to: '/components/button',
|
||||
children: [
|
||||
{
|
||||
label: 'Disabled',
|
||||
name: 'Disabled',
|
||||
disabled: true,
|
||||
children: [
|
||||
{
|
||||
label: 'Link',
|
||||
name: 'Link',
|
||||
to: '/components/link'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Navigation Three',
|
||||
name: 'nav-three',
|
||||
disabled: true
|
||||
},
|
||||
{
|
||||
label: 'Navigation Four',
|
||||
name: 'nav-four',
|
||||
children: [
|
||||
{
|
||||
label: 'Progress',
|
||||
to: '/components/progress'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
return {
|
||||
items
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
95
one/docs/demo/nav/more.vue
Normal file
95
one/docs/demo/nav/more.vue
Normal file
@@ -0,0 +1,95 @@
|
||||
<template>
|
||||
<article>
|
||||
<section>
|
||||
<veui-nav
|
||||
class="more-nav-items"
|
||||
:items="items"
|
||||
/>
|
||||
</section>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Nav } from 'veui'
|
||||
|
||||
export default {
|
||||
name: 'veui-nav-demo',
|
||||
components: {
|
||||
'veui-nav': Nav
|
||||
},
|
||||
data () {
|
||||
let items = [
|
||||
{
|
||||
label: 'Group One',
|
||||
name: 'group-one',
|
||||
children: [
|
||||
{
|
||||
label: 'Sub One',
|
||||
name: 'sub-one',
|
||||
children: [
|
||||
{
|
||||
label: 'Input',
|
||||
to: '/components/input'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Loading',
|
||||
name: 'Loading',
|
||||
to: '/components/loading',
|
||||
children: [
|
||||
{
|
||||
label: 'Switch',
|
||||
to: '/components/switch'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Button',
|
||||
name: 'Button',
|
||||
to: '/components/button',
|
||||
children: [
|
||||
{
|
||||
label: 'Disabled',
|
||||
name: 'Disabled',
|
||||
disabled: true,
|
||||
children: [
|
||||
{
|
||||
label: 'Link',
|
||||
name: 'Link',
|
||||
to: '/components/link'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Navigation Three',
|
||||
name: 'nav-three',
|
||||
disabled: true
|
||||
},
|
||||
{
|
||||
label: 'Navigation Four',
|
||||
name: 'nav-four',
|
||||
children: [
|
||||
{
|
||||
label: 'Progress',
|
||||
to: '/components/progress'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
return {
|
||||
items
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.more-nav-items {
|
||||
max-width: 300px;
|
||||
}
|
||||
</style>
|
||||
95
one/docs/demo/nav/size.vue
Normal file
95
one/docs/demo/nav/size.vue
Normal file
@@ -0,0 +1,95 @@
|
||||
<template>
|
||||
<article>
|
||||
<section>
|
||||
<veui-nav
|
||||
ui="s"
|
||||
:items="items"
|
||||
/>
|
||||
</section>
|
||||
<section>
|
||||
<veui-nav
|
||||
ui="m"
|
||||
:items="items"
|
||||
/>
|
||||
</section>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Nav } from 'veui'
|
||||
|
||||
export default {
|
||||
name: 'veui-nav-demo',
|
||||
components: {
|
||||
'veui-nav': Nav
|
||||
},
|
||||
data () {
|
||||
let items = [
|
||||
{
|
||||
label: 'Group One',
|
||||
name: 'group-one',
|
||||
children: [
|
||||
{
|
||||
label: 'Sub One',
|
||||
name: 'sub-one',
|
||||
children: [
|
||||
{
|
||||
label: 'Input',
|
||||
to: '/components/input'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Loading',
|
||||
name: 'Loading',
|
||||
to: '/components/loading',
|
||||
children: [
|
||||
{
|
||||
label: 'Switch',
|
||||
to: '/components/switch'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Button',
|
||||
name: 'Button',
|
||||
to: '/components/button',
|
||||
children: [
|
||||
{
|
||||
label: 'Disabled',
|
||||
name: 'Disabled',
|
||||
disabled: true,
|
||||
children: [
|
||||
{
|
||||
label: 'Link',
|
||||
name: 'Link',
|
||||
to: '/components/link'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Navigation Three',
|
||||
name: 'nav-three',
|
||||
disabled: true
|
||||
},
|
||||
{
|
||||
label: 'Navigation Four',
|
||||
name: 'nav-four',
|
||||
children: [
|
||||
{
|
||||
label: 'Progress',
|
||||
to: '/components/progress'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
return {
|
||||
items
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
92
one/docs/demo/nav/slot.vue
Normal file
92
one/docs/demo/nav/slot.vue
Normal file
@@ -0,0 +1,92 @@
|
||||
<template>
|
||||
<article>
|
||||
<section>
|
||||
<veui-nav
|
||||
:items="items"
|
||||
>
|
||||
<template #item-label="{ label }">
|
||||
<i>{{ label }}</i>
|
||||
</template>
|
||||
</veui-nav>
|
||||
</section>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Nav } from 'veui'
|
||||
|
||||
export default {
|
||||
name: 'veui-nav-demo',
|
||||
components: {
|
||||
'veui-nav': Nav
|
||||
},
|
||||
data () {
|
||||
let items = [
|
||||
{
|
||||
label: 'Group One',
|
||||
name: 'group-one',
|
||||
children: [
|
||||
{
|
||||
label: 'Sub One',
|
||||
name: 'sub-one',
|
||||
children: [
|
||||
{
|
||||
label: 'Input',
|
||||
to: '/components/input'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Loading',
|
||||
name: 'Loading',
|
||||
to: '/components/loading',
|
||||
children: [
|
||||
{
|
||||
label: 'Switch',
|
||||
to: '/switch'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Button',
|
||||
name: 'Button',
|
||||
to: '/components/button',
|
||||
children: [
|
||||
{
|
||||
label: 'Disabled',
|
||||
name: 'Disabled',
|
||||
disabled: true,
|
||||
children: [
|
||||
{
|
||||
label: 'Link',
|
||||
name: 'Link',
|
||||
to: '/link'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Navigation Three',
|
||||
name: 'nav-three',
|
||||
disabled: true
|
||||
},
|
||||
{
|
||||
label: 'Navigation Four',
|
||||
name: 'nav-four',
|
||||
children: [
|
||||
{
|
||||
label: 'Progress',
|
||||
to: '/components/progress'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
return {
|
||||
items
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
28
one/docs/demo/number-input/decimal.vue
Normal file
28
one/docs/demo/number-input/decimal.vue
Normal file
@@ -0,0 +1,28 @@
|
||||
<template>
|
||||
<article>
|
||||
<section>
|
||||
<h4>精确2位小数,递增0.01</h4>
|
||||
<veui-number-input
|
||||
:decimal-place="2"
|
||||
:step="0.01"
|
||||
/>
|
||||
</section>
|
||||
<section>
|
||||
<h4>精确2位小数,递增0.1</h4>
|
||||
<veui-number-input
|
||||
:decimal-place="2"
|
||||
:step="0.1"
|
||||
/>
|
||||
</section>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { NumberInput } from 'veui'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-number-input': NumberInput
|
||||
}
|
||||
}
|
||||
</script>
|
||||
55
one/docs/demo/pagination/pages.vue
Normal file
55
one/docs/demo/pagination/pages.vue
Normal file
@@ -0,0 +1,55 @@
|
||||
<template>
|
||||
<article>
|
||||
<veui-pagination
|
||||
:page="page"
|
||||
:page-size="pageSize"
|
||||
:page-sizes="pageSizes"
|
||||
:total="total"
|
||||
:to="to"
|
||||
@pagesizechange="handlePageSizeChange"
|
||||
/>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Pagination } from 'veui'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-pagination': Pagination
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
to: './pagination?page=:page',
|
||||
total: 10101,
|
||||
pageSize: 20,
|
||||
pageSizes: [20, 30, 50, 100]
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
page () {
|
||||
return Number(this.$route.query.page) || 1
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handlePageSizeChange (size) {
|
||||
this.pageSize = size
|
||||
if (this.page !== 1) {
|
||||
this.$router.push({
|
||||
path: './pagination?page=1'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
article {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.veui-pagination {
|
||||
margin: 1.2em 0;
|
||||
}
|
||||
</style>
|
||||
@@ -4,6 +4,7 @@
|
||||
<veui-number-input
|
||||
v-model="value"
|
||||
:min="0"
|
||||
:decimal-place="1"
|
||||
:max="100"
|
||||
/>
|
||||
</section>
|
||||
@@ -59,7 +60,7 @@ export default {
|
||||
type: 'bar',
|
||||
value: 66.6,
|
||||
desc: true,
|
||||
autoSucceed: true,
|
||||
autoSucceed: 200,
|
||||
indeterminate: false
|
||||
}
|
||||
}
|
||||
|
||||
50
one/docs/demo/radio-button-group/desc.vue
Normal file
50
one/docs/demo/radio-button-group/desc.vue
Normal file
@@ -0,0 +1,50 @@
|
||||
<template>
|
||||
<article>
|
||||
<section>
|
||||
<veui-radio-button-group
|
||||
v-model="flavor"
|
||||
:items="flavors"
|
||||
/>
|
||||
</section>
|
||||
<section>
|
||||
<veui-radio-button-group
|
||||
v-model="flavor"
|
||||
:items="flavors"
|
||||
>
|
||||
<template #desc="{ desc, label }">
|
||||
{{ desc || `a description for ${label}` }}
|
||||
</template>
|
||||
</veui-radio-button-group>
|
||||
</section>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { RadioButtonGroup } from 'veui'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-radio-button-group': RadioButtonGroup
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
flavor: null,
|
||||
flavors: [
|
||||
{ value: 'LATTE', label: 'Latte', desc: 'a description for latte.' },
|
||||
{ value: 'MOCHA', label: 'Mocha', desc: 'a description for mocha.' },
|
||||
{ value: 'AMERICANO', label: 'Americano' }
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
section {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
h4 {
|
||||
margin-top: 0;
|
||||
}
|
||||
</style>
|
||||
53
one/docs/demo/radio-button-group/simple.vue
Normal file
53
one/docs/demo/radio-button-group/simple.vue
Normal file
@@ -0,0 +1,53 @@
|
||||
<template>
|
||||
<article>
|
||||
<section>
|
||||
<veui-radio-button-group
|
||||
v-model="flavor"
|
||||
ui="simple"
|
||||
:items="flavors"
|
||||
/>
|
||||
<p>Selected: {{ readable }}</p>
|
||||
</section>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { RadioButtonGroup } from 'veui'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-radio-button-group': RadioButtonGroup
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
flavor: null,
|
||||
flavors: [
|
||||
{ value: 'LATTE', label: 'Latte' },
|
||||
{ value: 'MOCHA', label: 'Mocha' },
|
||||
{ value: 'AMERICANO', label: 'Americano' }
|
||||
]
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
flavorLabelMap () {
|
||||
return this.flavors.reduce((map, { value, label }) => {
|
||||
map[value] = label
|
||||
return map
|
||||
}, {})
|
||||
},
|
||||
readable () {
|
||||
return this.flavorLabelMap[this.flavor] || '-'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
section {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
h4 {
|
||||
margin-top: 0;
|
||||
}
|
||||
</style>
|
||||
46
one/docs/demo/radio-button-group/stable.vue
Normal file
46
one/docs/demo/radio-button-group/stable.vue
Normal file
@@ -0,0 +1,46 @@
|
||||
<template>
|
||||
<article>
|
||||
<section>
|
||||
<p>
|
||||
最小宽度：<veui-switch v-model="isStable"/>
|
||||
</p>
|
||||
<veui-radio-button-group
|
||||
v-model="flavor"
|
||||
:items="flavors"
|
||||
:ui="isStable ? 'stable' : ''"
|
||||
/>
|
||||
</section>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { RadioButtonGroup, Switch } from 'veui'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-radio-button-group': RadioButtonGroup,
|
||||
'veui-switch': Switch
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
isStable: true,
|
||||
flavor: null,
|
||||
flavors: [
|
||||
{ value: 'LATTE', label: 'Latte' },
|
||||
{ value: 'MOCHA', label: 'Mocha' },
|
||||
{ value: 'AMERICANO', label: 'Americano' }
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
section {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
h4 {
|
||||
margin-top: 0;
|
||||
}
|
||||
</style>
|
||||
50
one/docs/demo/radio-group/desc.vue
Normal file
50
one/docs/demo/radio-group/desc.vue
Normal file
@@ -0,0 +1,50 @@
|
||||
<template>
|
||||
<article>
|
||||
<section>
|
||||
<veui-radio-group
|
||||
v-model="flavor"
|
||||
:items="flavors"
|
||||
/>
|
||||
</section>
|
||||
<section>
|
||||
<veui-radio-group
|
||||
v-model="flavor"
|
||||
:items="flavors"
|
||||
>
|
||||
<template #desc="{ desc, label }">
|
||||
{{ desc || `a description for ${label}` }}
|
||||
</template>
|
||||
</veui-radio-group>
|
||||
</section>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { RadioGroup } from 'veui'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-radio-group': RadioGroup
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
flavor: null,
|
||||
flavors: [
|
||||
{ value: 'LATTE', label: 'Latte', desc: 'a description for latte.' },
|
||||
{ value: 'MOCHA', label: 'Mocha', desc: 'a description for mocha.' },
|
||||
{ value: 'AMERICANO', label: 'Americano' }
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
section {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
h4 {
|
||||
margin-top: 0;
|
||||
}
|
||||
</style>
|
||||
81
one/docs/demo/select/selected.vue
Normal file
81
one/docs/demo/select/selected.vue
Normal file
@@ -0,0 +1,81 @@
|
||||
<template>
|
||||
<article>
|
||||
<section>
|
||||
<h4>下拉关闭时省略显示已选项</h4>
|
||||
<veui-select
|
||||
v-model="license"
|
||||
multiple
|
||||
:options="options"
|
||||
>
|
||||
<template
|
||||
#label="{ selected }"
|
||||
>{{ selected[0].label }}等{{ selected.length }}个{{ ' ' }}</template>
|
||||
</veui-select>
|
||||
</section>
|
||||
<section>
|
||||
<h4>始终省略显示已选项</h4>
|
||||
<veui-select
|
||||
v-model="license"
|
||||
multiple
|
||||
:options="options"
|
||||
>
|
||||
<template
|
||||
#selected="{ selected }"
|
||||
>{{ selected[0].label
|
||||
}}{{ selected.length > 1 ? `等${selected.length}个` : '' }}</template>
|
||||
</veui-select>
|
||||
</section>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Select } from 'veui'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-select': Select
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
searchable: false,
|
||||
license: null,
|
||||
options: [
|
||||
{
|
||||
label: 'MIT',
|
||||
value: 'mit'
|
||||
},
|
||||
{
|
||||
label: 'BSD',
|
||||
value: 'bsd'
|
||||
},
|
||||
{
|
||||
label: 'Apache 2.0',
|
||||
value: 'apache2'
|
||||
},
|
||||
{
|
||||
label: 'GPL 3.0',
|
||||
value: 'gpl3'
|
||||
},
|
||||
{
|
||||
label: 'AGPL 3.0',
|
||||
value: 'agpl3'
|
||||
},
|
||||
{
|
||||
label: 'LGPL 2.1',
|
||||
value: 'lgpl2'
|
||||
},
|
||||
{
|
||||
label: 'MPL 2.0',
|
||||
value: 'mpl2'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
section {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
</style>
|
||||
@@ -25,7 +25,7 @@
|
||||
title="Bid"
|
||||
width="160"
|
||||
align="right"
|
||||
:filter-value="filtered"
|
||||
:filter-value="filtered || null"
|
||||
>
|
||||
<template #default="{ bid }">
|
||||
{{ bid | currency }}
|
||||
@@ -111,7 +111,7 @@ export default {
|
||||
}
|
||||
],
|
||||
crowded: false,
|
||||
filtered: false
|
||||
filtered: null
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
||||
93
one/docs/demo/table/loading.vue
Normal file
93
one/docs/demo/table/loading.vue
Normal file
@@ -0,0 +1,93 @@
|
||||
<template>
|
||||
<article>
|
||||
<section>
|
||||
<p>loading：<veui-switch v-model="loading"/></p>
|
||||
<veui-table
|
||||
:data="data"
|
||||
:loading="loading"
|
||||
key-field="id"
|
||||
>
|
||||
<veui-table-column
|
||||
field="id"
|
||||
title="ID"
|
||||
sortable
|
||||
/>
|
||||
<veui-table-column
|
||||
field="name"
|
||||
title="Name"
|
||||
/>
|
||||
<veui-table-column
|
||||
field="bid"
|
||||
title="Bid"
|
||||
width="160"
|
||||
align="right"
|
||||
sortable
|
||||
>
|
||||
<template slot-scope="{ bid }">
|
||||
{{ bid | currency }}
|
||||
</template>
|
||||
</veui-table-column>
|
||||
</veui-table>
|
||||
</section>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Table, Column, Switch } from 'veui'
|
||||
|
||||
let data = [
|
||||
{
|
||||
id: '31552',
|
||||
name: 'Thor Odinson',
|
||||
bid: 598,
|
||||
updateDate: '20140214'
|
||||
},
|
||||
{
|
||||
id: '31541',
|
||||
name: 'Steve Rogers',
|
||||
bid: 1024,
|
||||
updateDate: '20131117'
|
||||
},
|
||||
{
|
||||
id: '31563',
|
||||
name: 'Tony Stark',
|
||||
bid: 820,
|
||||
updateDate: '20170610'
|
||||
},
|
||||
{
|
||||
id: '31574',
|
||||
name: 'Stephen Strange',
|
||||
bid: 736,
|
||||
updateDate: '20180109'
|
||||
}
|
||||
]
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-table': Table,
|
||||
'veui-table-column': Column,
|
||||
'veui-switch': Switch
|
||||
},
|
||||
filters: {
|
||||
currency (value) {
|
||||
return '¥' + value.toFixed(2)
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
data,
|
||||
loading: true
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
section {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
h4 {
|
||||
margin-top: 0;
|
||||
}
|
||||
</style>
|
||||
132
one/docs/demo/table/order.vue
Normal file
132
one/docs/demo/table/order.vue
Normal file
@@ -0,0 +1,132 @@
|
||||
<template>
|
||||
<article>
|
||||
<section>
|
||||
<p>
|
||||
允许不排序：<veui-switch
|
||||
v-model="allowFalse"
|
||||
@change="handleChange"
|
||||
/>
|
||||
</p>
|
||||
<veui-table
|
||||
:data="sorted"
|
||||
key-field="id"
|
||||
:order="order"
|
||||
:order-by="orderBy"
|
||||
:allowed-orders="allowedOrders"
|
||||
@sort="handleSort"
|
||||
>
|
||||
<veui-table-column
|
||||
field="id"
|
||||
title="ID"
|
||||
sortable
|
||||
/>
|
||||
<veui-table-column
|
||||
field="name"
|
||||
title="Name"
|
||||
/>
|
||||
<veui-table-column
|
||||
field="bid"
|
||||
title="Bid"
|
||||
width="160"
|
||||
align="right"
|
||||
sortable
|
||||
>
|
||||
<template slot-scope="{ bid }">
|
||||
{{ bid | currency }}
|
||||
</template>
|
||||
</veui-table-column>
|
||||
</veui-table>
|
||||
</section>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Table, Column, Switch } from 'veui'
|
||||
|
||||
let data = [
|
||||
{
|
||||
id: '31552',
|
||||
name: 'Thor Odinson',
|
||||
bid: 598,
|
||||
updateDate: '20140214'
|
||||
},
|
||||
{
|
||||
id: '31541',
|
||||
name: 'Steve Rogers',
|
||||
bid: 1024,
|
||||
updateDate: '20131117'
|
||||
},
|
||||
{
|
||||
id: '31563',
|
||||
name: 'Tony Stark',
|
||||
bid: 820,
|
||||
updateDate: '20170610'
|
||||
},
|
||||
{
|
||||
id: '31574',
|
||||
name: 'Stephen Strange',
|
||||
bid: 736,
|
||||
updateDate: '20180109'
|
||||
}
|
||||
]
|
||||
|
||||
let allowedOrders = [false, 'desc', 'asc']
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-table': Table,
|
||||
'veui-table-column': Column,
|
||||
'veui-switch': Switch
|
||||
},
|
||||
filters: {
|
||||
currency (value) {
|
||||
return '¥' + value.toFixed(2)
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
order: 'asc',
|
||||
orderBy: 'id',
|
||||
allowFalse: true
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
sorted () {
|
||||
let result = data.slice(0)
|
||||
if (this.order) {
|
||||
const sign = this.order === 'desc' ? -1 : 1
|
||||
result.sort((a, b) => {
|
||||
return sign * (+a[this.orderBy] - +b[this.orderBy])
|
||||
})
|
||||
}
|
||||
return result
|
||||
},
|
||||
allowedOrders () {
|
||||
let result = allowedOrders.slice(0)
|
||||
return this.allowFalse ? result : result.filter(item => item)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleSort (field, order) {
|
||||
this.order = order
|
||||
this.orderBy = field
|
||||
},
|
||||
handleChange (val) {
|
||||
// 不允许不排序时，当前却是不排序，随便改下
|
||||
if (!val && !this.order) {
|
||||
this.order = 'desc'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
section {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
h4 {
|
||||
margin-top: 0;
|
||||
}
|
||||
</style>
|
||||
26
one/docs/demo/textarea/autoresize.vue
Normal file
26
one/docs/demo/textarea/autoresize.vue
Normal file
@@ -0,0 +1,26 @@
|
||||
<template>
|
||||
<article>
|
||||
<div>
|
||||
<veui-textarea
|
||||
v-model="value"
|
||||
autoresize
|
||||
line-number
|
||||
/>
|
||||
</div>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Textarea } from 'veui'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-textarea': Textarea
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
value: 'Autoresize'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
200
one/docs/demo/transfer/merge-checked.vue
Normal file
200
one/docs/demo/transfer/merge-checked.vue
Normal file
@@ -0,0 +1,200 @@
|
||||
<template>
|
||||
<article>
|
||||
<section>
|
||||
<veui-radio-group
|
||||
v-model="mergeChecked"
|
||||
:items="items"
|
||||
/>
|
||||
<veui-transfer
|
||||
v-model="selected"
|
||||
:datasource="coffees"
|
||||
:merge-checked="mergeChecked"
|
||||
/>
|
||||
<p>Selected: {{ selected }}</p>
|
||||
</section>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Transfer, RadioGroup } from 'veui'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-transfer': Transfer,
|
||||
'veui-radio-group': RadioGroup
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
coffees: [
|
||||
{
|
||||
label: 'Infused',
|
||||
value: 'infused',
|
||||
id: '100',
|
||||
children: [
|
||||
{
|
||||
label: 'Brewed',
|
||||
value: 'brewed',
|
||||
id: '100-01',
|
||||
children: [
|
||||
{
|
||||
label: 'Drip brewed',
|
||||
value: 'drip-brewed',
|
||||
id: '100-01-01'
|
||||
},
|
||||
{
|
||||
label: 'Filtered',
|
||||
value: 'filtered',
|
||||
id: '100-01-02'
|
||||
},
|
||||
{
|
||||
label: 'Pour-over',
|
||||
value: 'pour-over',
|
||||
id: '100-01-03'
|
||||
},
|
||||
{
|
||||
label: 'Immersion brewed',
|
||||
value: 'immersion-brewed',
|
||||
id: '100-01-04'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'French press',
|
||||
value: 'french-press',
|
||||
id: '100-02'
|
||||
},
|
||||
{
|
||||
label: 'Cold brew',
|
||||
value: 'cold-brew',
|
||||
id: '100-03'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Boiled',
|
||||
value: 'boiled',
|
||||
id: '200',
|
||||
children: [
|
||||
{
|
||||
label: 'Percolated',
|
||||
value: 'percolated',
|
||||
id: '200-01'
|
||||
},
|
||||
{
|
||||
label: 'Turkish',
|
||||
value: 'turkish',
|
||||
id: '200-02'
|
||||
},
|
||||
{
|
||||
label: 'Moka',
|
||||
value: 'moka',
|
||||
id: '200-03'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Espresso',
|
||||
value: 'espresso',
|
||||
id: '300',
|
||||
children: [
|
||||
{
|
||||
label: 'Caffè Americano',
|
||||
value: 'caffe-americano',
|
||||
id: '300-01'
|
||||
},
|
||||
{
|
||||
label: 'Cafe Lungo',
|
||||
value: 'cafe-lungo',
|
||||
id: '300-02'
|
||||
},
|
||||
{
|
||||
label: 'Café Cubano',
|
||||
value: 'cafe-cubano',
|
||||
id: '300-03'
|
||||
},
|
||||
{
|
||||
label: 'Caffè crema',
|
||||
value: 'caffe-crema',
|
||||
id: '300-04'
|
||||
},
|
||||
{
|
||||
label: 'Cafe Zorro',
|
||||
value: 'cafe-zorro',
|
||||
id: '300-05'
|
||||
},
|
||||
{
|
||||
label: 'Doppio',
|
||||
value: 'doppio',
|
||||
id: '300-06'
|
||||
},
|
||||
{
|
||||
label: 'Espresso Romano',
|
||||
value: 'espresso-romano',
|
||||
id: '300-07'
|
||||
},
|
||||
{
|
||||
label: 'Guillermo',
|
||||
value: 'guillermo',
|
||||
id: '300-08'
|
||||
},
|
||||
{
|
||||
label: 'Ristretto',
|
||||
value: 'ristretto',
|
||||
id: '300-09'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Milk coffee',
|
||||
value: 'milk-coffee',
|
||||
id: '400',
|
||||
children: [
|
||||
{
|
||||
label: 'Flat white',
|
||||
value: 'flat-white',
|
||||
id: '400-01'
|
||||
},
|
||||
{
|
||||
label: 'Latte',
|
||||
value: 'latte',
|
||||
id: '400-02'
|
||||
},
|
||||
{
|
||||
label: 'Macchiato',
|
||||
value: 'macchiato',
|
||||
id: '400-03'
|
||||
},
|
||||
{
|
||||
label: 'Cappuccino',
|
||||
value: 'cappuccino',
|
||||
id: '400-04'
|
||||
},
|
||||
{
|
||||
label: 'White coffee',
|
||||
value: 'white-coffee',
|
||||
id: '400-05'
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
mergeChecked: 'keep-all',
|
||||
selected: []
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
items () {
|
||||
return [
|
||||
{ label: 'keep-all', value: 'keep-all' },
|
||||
{ label: 'downwards', value: 'downwards' },
|
||||
{ label: 'upwards', value: 'upwards' }
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.veui-radio-group {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
</style>
|
||||
57
one/docs/demo/uploader/controls.vue
Normal file
57
one/docs/demo/uploader/controls.vue
Normal file
@@ -0,0 +1,57 @@
|
||||
<template>
|
||||
<article>
|
||||
<section>
|
||||
<veui-uploader
|
||||
v-model="images"
|
||||
:controls="controls"
|
||||
type="image"
|
||||
action="https://app.fakejson.com/q/ELymQ7xh?token=AWFkjMICPSAB_bO_z-Lnog"
|
||||
@star="handleStar"
|
||||
/>
|
||||
</section>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Uploader, toast } from 'veui'
|
||||
import 'veui-theme-dls-icons/star'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-uploader': Uploader
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
images: [
|
||||
{
|
||||
key: 0,
|
||||
src: '/images/development/uploader/demo-image1.jpg'
|
||||
},
|
||||
{
|
||||
key: 1,
|
||||
src: '/images/development/uploader/demo-image2.jpg'
|
||||
}
|
||||
],
|
||||
controls (item, defaultControls) {
|
||||
return [
|
||||
...defaultControls,
|
||||
{
|
||||
name: 'star',
|
||||
icon: 'star',
|
||||
label: 'star'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleStar () {
|
||||
toast.info('You click star!')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<docs>
|
||||
用 `controls` 自定义的操作，点击会触发同名事件，事件参数为该上传项数据和 `status` 字段, 即通常是 `{src, key, type, status, ...}`。
|
||||
</docs>
|
||||
@@ -30,9 +30,11 @@ export default {
|
||||
action: 'https://app.fakejson.com/q/ELymQ7xh?token=AWFkjMICPSAB_bO_z-Lnog',
|
||||
images: [
|
||||
{
|
||||
key: 0,
|
||||
src: '/images/development/uploader/demo-image1.jpg'
|
||||
},
|
||||
{
|
||||
key: 1,
|
||||
src: '/images/development/uploader/demo-image2.jpg'
|
||||
}
|
||||
],
|
||||
|
||||
57
one/docs/demo/uploader/entries.vue
Normal file
57
one/docs/demo/uploader/entries.vue
Normal file
@@ -0,0 +1,57 @@
|
||||
<template>
|
||||
<article>
|
||||
<section>
|
||||
<veui-uploader
|
||||
v-model="images"
|
||||
:entries="entries"
|
||||
type="image"
|
||||
action="https://app.fakejson.com/q/ELymQ7xh?token=AWFkjMICPSAB_bO_z-Lnog"
|
||||
@star="handleStar"
|
||||
/>
|
||||
</section>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Uploader, toast } from 'veui'
|
||||
import 'veui-theme-dls-icons/star'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-uploader': Uploader
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
images: [
|
||||
{
|
||||
key: 0,
|
||||
src: '/images/development/uploader/demo-image1.jpg'
|
||||
},
|
||||
{
|
||||
key: 1,
|
||||
src: '/images/development/uploader/demo-image2.jpg'
|
||||
}
|
||||
],
|
||||
entries (defaultEntries) {
|
||||
return [
|
||||
...defaultEntries,
|
||||
{
|
||||
name: 'star',
|
||||
icon: 'star',
|
||||
label: 'star'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleStar () {
|
||||
toast.info('You clicked star!')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<docs>
|
||||
用 `entries` 自定义的操作，点击会触发同名事件，事件参数为空。
|
||||
</docs>
|
||||
@@ -30,11 +30,13 @@ export default {
|
||||
let files = [
|
||||
{
|
||||
name: 'demo-file1.txt',
|
||||
src: '/file/demo-file1.txt'
|
||||
src: '/file/demo-file1.txt',
|
||||
key: 0
|
||||
},
|
||||
{
|
||||
name: 'demo-file2.txt',
|
||||
src: '/file/demo-file2.txt'
|
||||
src: '/file/demo-file2.txt',
|
||||
key: 1
|
||||
}
|
||||
]
|
||||
return {
|
||||
|
||||
@@ -39,10 +39,12 @@ export default {
|
||||
data () {
|
||||
let images = [
|
||||
{
|
||||
src: '/images/development/uploader/demo-image1.jpg'
|
||||
src: '/images/development/uploader/demo-image1.jpg',
|
||||
key: 0
|
||||
},
|
||||
{
|
||||
src: '/images/development/uploader/demo-image2.jpg'
|
||||
src: '/images/development/uploader/demo-image2.jpg',
|
||||
key: 1
|
||||
}
|
||||
]
|
||||
return {
|
||||
|
||||
@@ -40,12 +40,14 @@ export default {
|
||||
let media = [
|
||||
{
|
||||
type: 'image',
|
||||
src: '/images/development/uploader/demo-image1.jpg'
|
||||
src: '/images/development/uploader/demo-image1.jpg',
|
||||
key: 0
|
||||
},
|
||||
{
|
||||
type: 'video',
|
||||
src: 'https://nadvideo2.baidu.com/5dafd8544f4f53b27a5f59b0ab780403_1920_1080.mp4',
|
||||
poster: 'https://feed-image.baidu.com/0/pic/4dced79d185a16e228652b136f653dcc.jpg'
|
||||
poster: 'https://feed-image.baidu.com/0/pic/4dced79d185a16e228652b136f653dcc.jpg',
|
||||
key: 1
|
||||
}
|
||||
]
|
||||
return {
|
||||
|
||||
36
one/docs/demo/uploader/sortable.vue
Normal file
36
one/docs/demo/uploader/sortable.vue
Normal file
@@ -0,0 +1,36 @@
|
||||
<template>
|
||||
<article>
|
||||
<section>
|
||||
<veui-uploader
|
||||
v-model="images"
|
||||
sortable
|
||||
type="image"
|
||||
action="https://app.fakejson.com/q/ELymQ7xh?token=AWFkjMICPSAB_bO_z-Lnog"
|
||||
/>
|
||||
</section>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Uploader } from 'veui'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-uploader': Uploader
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
images: [
|
||||
{
|
||||
key: 0,
|
||||
src: '/images/development/uploader/demo-image1.jpg'
|
||||
},
|
||||
{
|
||||
key: 1,
|
||||
src: '/images/development/uploader/demo-image2.jpg'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -29,10 +29,12 @@ export default {
|
||||
return {
|
||||
images: [
|
||||
{
|
||||
src: '/images/development/uploader/demo-image1.jpg'
|
||||
src: '/images/development/uploader/demo-image1.jpg',
|
||||
key: 0
|
||||
},
|
||||
{
|
||||
src: '/images/development/uploader/demo-image2.jpg'
|
||||
src: '/images/development/uploader/demo-image2.jpg',
|
||||
key: 1
|
||||
}
|
||||
],
|
||||
validator (file) {
|
||||
|
||||
Reference in New Issue
Block a user