feat: publicize doc implemetation
This commit is contained in:
28
one/docs/demo/accordion/multiple.vue
Normal file
28
one/docs/demo/accordion/multiple.vue
Normal file
@@ -0,0 +1,28 @@
|
||||
<template>
|
||||
<article>
|
||||
<veui-accordion multiple>
|
||||
<veui-collapse label="Sun">
|
||||
The Sun is the star at the center of the Solar System. It is a nearly perfect sphere of hot plasma, with internal convective motion that generates a magnetic field via a dynamo process. It is by far the most important source of energy for life on Earth. Its diameter is about 1.39 million kilometers (864,000 miles), or 109 times that of Earth, and its mass is about 330,000 times that of Earth. It accounts for about 99.86% of the total mass of the Solar System. Roughly three quarters of the Sun's mass consists of hydrogen (~73%); the rest is mostly helium (~25%), with much smaller quantities of heavier elements, including oxygen, carbon, neon, and iron.
|
||||
</veui-collapse>
|
||||
<veui-collapse label="Moon">
|
||||
The Moon is an astronomical body orbiting Earth and is the planet's only natural satellite. It is the fifth-largest satellite in the Solar System, and by far the largest among planetary satellites relative to the size of the planet that it orbits. The Moon is, after Jupiter's satellite Io, the second-densest satellite in the Solar System among those whose densities are known.
|
||||
</veui-collapse>
|
||||
</veui-accordion>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Accordion, Collapse } from 'veui'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-accordion': Accordion,
|
||||
'veui-collapse': Collapse
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped docs>
|
||||
section
|
||||
margin-bottom 20px
|
||||
</style>
|
40
one/docs/demo/accordion/size.vue
Normal file
40
one/docs/demo/accordion/size.vue
Normal file
@@ -0,0 +1,40 @@
|
||||
<template>
|
||||
<article>
|
||||
<section>
|
||||
<veui-accordion>
|
||||
<veui-collapse label="Sun">
|
||||
The Sun is the star at the center of the Solar System. It is a nearly perfect sphere of hot plasma, with internal convective motion that generates a magnetic field via a dynamo process. It is by far the most important source of energy for life on Earth. Its diameter is about 1.39 million kilometers (864,000 miles), or 109 times that of Earth, and its mass is about 330,000 times that of Earth. It accounts for about 99.86% of the total mass of the Solar System. Roughly three quarters of the Sun's mass consists of hydrogen (~73%); the rest is mostly helium (~25%), with much smaller quantities of heavier elements, including oxygen, carbon, neon, and iron.
|
||||
</veui-collapse>
|
||||
<veui-collapse label="Moon">
|
||||
The Moon is an astronomical body orbiting Earth and is the planet's only natural satellite. It is the fifth-largest satellite in the Solar System, and by far the largest among planetary satellites relative to the size of the planet that it orbits. The Moon is, after Jupiter's satellite Io, the second-densest satellite in the Solar System among those whose densities are known.
|
||||
</veui-collapse>
|
||||
</veui-accordion>
|
||||
</section>
|
||||
<section>
|
||||
<veui-accordion ui="s">
|
||||
<veui-collapse label="Sun">
|
||||
The Sun is the star at the center of the Solar System. It is a nearly perfect sphere of hot plasma, with internal convective motion that generates a magnetic field via a dynamo process. It is by far the most important source of energy for life on Earth. Its diameter is about 1.39 million kilometers (864,000 miles), or 109 times that of Earth, and its mass is about 330,000 times that of Earth. It accounts for about 99.86% of the total mass of the Solar System. Roughly three quarters of the Sun's mass consists of hydrogen (~73%); the rest is mostly helium (~25%), with much smaller quantities of heavier elements, including oxygen, carbon, neon, and iron.
|
||||
</veui-collapse>
|
||||
<veui-collapse label="Moon">
|
||||
The Moon is an astronomical body orbiting Earth and is the planet's only natural satellite. It is the fifth-largest satellite in the Solar System, and by far the largest among planetary satellites relative to the size of the planet that it orbits. The Moon is, after Jupiter's satellite Io, the second-densest satellite in the Solar System among those whose densities are known.
|
||||
</veui-collapse>
|
||||
</veui-accordion>
|
||||
</section>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Accordion, Collapse } from 'veui'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-accordion': Accordion,
|
||||
'veui-collapse': Collapse
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped docs>
|
||||
section
|
||||
margin-bottom 20px
|
||||
</style>
|
65
one/docs/demo/alert-box/title.vue
Normal file
65
one/docs/demo/alert-box/title.vue
Normal file
@@ -0,0 +1,65 @@
|
||||
<template>
|
||||
<article>
|
||||
<veui-button @click="open1 = true">
|
||||
title prop
|
||||
</veui-button>
|
||||
<veui-button @click="open2 = true">
|
||||
title slot
|
||||
</veui-button>
|
||||
|
||||
<veui-alert-box
|
||||
type="success"
|
||||
:open.sync="open1"
|
||||
title="Success"
|
||||
@ok="ok"
|
||||
>
|
||||
<p>Saved successfully!</p>
|
||||
</veui-alert-box>
|
||||
|
||||
<veui-alert-box
|
||||
type="success"
|
||||
:open.sync="open2"
|
||||
@ok="ok"
|
||||
>
|
||||
<template #title>
|
||||
Success
|
||||
<veui-icon name="info-circle"/>
|
||||
</template>
|
||||
<p>Saved successfully!</p>
|
||||
</veui-alert-box>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { AlertBox, Button, Icon } from 'veui'
|
||||
import 'veui-theme-dls-icons/info-circle'
|
||||
import toast from 'veui/managers/toast'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-alert-box': AlertBox,
|
||||
'veui-button': Button,
|
||||
'veui-icon': Icon
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
open1: false,
|
||||
open2: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
ok () {
|
||||
toast.info('Confirmed')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped docs>
|
||||
.veui-button {
|
||||
margin-right: 10px;
|
||||
}
|
||||
.icon {
|
||||
vertical-align: -2px;
|
||||
}
|
||||
</style>
|
67
one/docs/demo/alert-box/type.vue
Normal file
67
one/docs/demo/alert-box/type.vue
Normal file
@@ -0,0 +1,67 @@
|
||||
<template>
|
||||
<article>
|
||||
<veui-button @click="successOpen = true">
|
||||
Success
|
||||
</veui-button>
|
||||
<veui-button @click="errorOpen = true">
|
||||
Error
|
||||
</veui-button>
|
||||
<veui-button @click="infoOpen = true">
|
||||
Info
|
||||
</veui-button>
|
||||
|
||||
<veui-alert-box
|
||||
type="success"
|
||||
:open.sync="successOpen"
|
||||
>
|
||||
<template #title>
|
||||
Success
|
||||
</template>
|
||||
<div>Saved successfully!</div>
|
||||
</veui-alert-box>
|
||||
|
||||
<veui-alert-box
|
||||
type="error"
|
||||
:open.sync="errorOpen"
|
||||
>
|
||||
<template #title>
|
||||
Error
|
||||
</template>
|
||||
<div>Not enough disk space!</div>
|
||||
</veui-alert-box>
|
||||
|
||||
<veui-alert-box
|
||||
type="info"
|
||||
:open.sync="infoOpen"
|
||||
>
|
||||
<template #title>
|
||||
Sytstem
|
||||
</template>
|
||||
<div>The total available storage is 5MB.</div>
|
||||
</veui-alert-box>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { AlertBox, Button } from 'veui'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-alert-box': AlertBox,
|
||||
'veui-button': Button
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
successOpen: false,
|
||||
errorOpen: false,
|
||||
infoOpen: false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped docs>
|
||||
.veui-button {
|
||||
margin-right: 10px;
|
||||
}
|
||||
</style>
|
46
one/docs/demo/alert/multiple.vue
Normal file
46
one/docs/demo/alert/multiple.vue
Normal file
@@ -0,0 +1,46 @@
|
||||
<template>
|
||||
<article>
|
||||
<veui-alert
|
||||
type="info"
|
||||
close-label="Got it"
|
||||
closable
|
||||
:open.sync="open"
|
||||
:message="messages"
|
||||
/>
|
||||
<section v-if="!open">
|
||||
<veui-button @click="open = true">
|
||||
Open
|
||||
</veui-button>
|
||||
</section>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Alert, Button } from 'veui'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-alert': Alert,
|
||||
'veui-button': Button
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
open: true,
|
||||
messages: [
|
||||
'Component data must be a function.',
|
||||
'Prop definitions should be as detailed as possible.',
|
||||
'Always use key with v-for.',
|
||||
'Never use v-if on the same element as v-for.'
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<docs>
|
||||
可以指定 `closable` 属性为 `true` 来允许提示被用户主动关闭,还可以通过指定 `close-label` 属性来将关闭按钮以文字形式展现。
|
||||
</docs>
|
||||
|
||||
<docs locale="en-US">
|
||||
Set the `closable` prop to `true` to allow the alert message to be closed by users. You can also use the `close-label` prop to make the close button shown as specified text.
|
||||
</docs>
|
41
one/docs/demo/alert/type.vue
Normal file
41
one/docs/demo/alert/type.vue
Normal file
@@ -0,0 +1,41 @@
|
||||
<template>
|
||||
<article>
|
||||
<veui-alert type="success">
|
||||
Your profile has been updated.
|
||||
</veui-alert>
|
||||
<veui-alert type="info">
|
||||
Press any key to continue...
|
||||
</veui-alert>
|
||||
<veui-alert type="warning">
|
||||
<code>scope</code> is deprecated. Use <code>slot-scope</code> instead.
|
||||
</veui-alert>
|
||||
<veui-alert
|
||||
type="error"
|
||||
message="Uncaught SyntaxError: Unexpected token +"
|
||||
/>
|
||||
</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>
|
||||
可将消息内容写在默认插槽中,也可以通过 `message` 属性进行指定。
|
||||
</docs>
|
||||
|
||||
<docs locale="en-US">
|
||||
Messages can either be specified in the default slot, or via the `message` prop.
|
||||
</docs>
|
135
one/docs/demo/anchor/offset.vue
Normal file
135
one/docs/demo/anchor/offset.vue
Normal file
@@ -0,0 +1,135 @@
|
||||
<template>
|
||||
<article class="anchor-offset-demo">
|
||||
<div class="target-offset-line"/>
|
||||
<div class="sticky-offset-line"/>
|
||||
<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>
|
||||
<section class="anchor-two">
|
||||
<h3>吸附锚点</h3>
|
||||
<veui-anchor
|
||||
:items="coffees"
|
||||
target-offset="20px"
|
||||
sticky-offset="30px"
|
||||
container="container"
|
||||
/>
|
||||
</section>
|
||||
</div>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Anchor } from 'veui'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-anchor': Anchor
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
coffees: [
|
||||
{
|
||||
label: 'Infused',
|
||||
value: '#infused2',
|
||||
children: [
|
||||
{
|
||||
label: 'Breadcrumb',
|
||||
value: '/components/breadcrumb'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Boiled',
|
||||
value: '#boiled2',
|
||||
children: [
|
||||
{
|
||||
label: 'Button',
|
||||
value: '/components/button'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Espresso',
|
||||
value: '#espresso2'
|
||||
},
|
||||
{
|
||||
label: 'Milk coffee',
|
||||
value: '#milk-coffee2'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped docs>
|
||||
.anchor-offset-demo {
|
||||
position: relative;
|
||||
|
||||
.sticky-offset-line,
|
||||
.target-offset-line {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
width: 180px;
|
||||
border-top: 1px solid red;;
|
||||
&::after {
|
||||
content: "targetOffset: 20px";
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
color: red;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
.sticky-offset-line {
|
||||
top: 30px;
|
||||
left: 250px;
|
||||
&::after {
|
||||
content: "stickyOffset: 30px";
|
||||
}
|
||||
}
|
||||
|
||||
.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 #ccc;
|
||||
width: 100px;
|
||||
height: 150px;
|
||||
flex: none;
|
||||
& + .block {
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
.anchor-two {
|
||||
position: absolute;
|
||||
left: 250px;
|
||||
top: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<docs>
|
||||
虚线框标记容器。
|
||||
</docs>
|
138
one/docs/demo/anchor/sticky.vue
Normal file
138
one/docs/demo/anchor/sticky.vue
Normal file
@@ -0,0 +1,138 @@
|
||||
<template>
|
||||
<article class="anchor-demo">
|
||||
<div class="line"/>
|
||||
<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>
|
||||
|
||||
<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"
|
||||
/>
|
||||
</section>
|
||||
</div>
|
||||
</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 docs>
|
||||
.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;
|
||||
flex-direction: column;
|
||||
height: 300px;
|
||||
overflow: auto;
|
||||
border: 1px dashed;
|
||||
|
||||
& > section {
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
|
||||
.block {
|
||||
white-space: nowrap;
|
||||
border-top: 1px solid #ccc;
|
||||
width: 100px;
|
||||
height: 150px;
|
||||
flex: none;
|
||||
& + .block {
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.anchor-one {
|
||||
position: absolute;
|
||||
left: 250px;
|
||||
top: 50px;
|
||||
}
|
||||
.anchor-two {
|
||||
position: absolute;
|
||||
left: 450px;
|
||||
top: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<docs>
|
||||
虚线框标记容器。
|
||||
</docs>
|
113
one/docs/demo/autocomplete/normal.vue
Normal file
113
one/docs/demo/autocomplete/normal.vue
Normal file
@@ -0,0 +1,113 @@
|
||||
<template>
|
||||
<article class="autocomplete-normal-demo">
|
||||
<section>
|
||||
<h3>suggest on input</h3>
|
||||
<veui-autocomplete
|
||||
:datasource="suggestions"
|
||||
placeholder="请输入"
|
||||
clearable
|
||||
/>
|
||||
</section>
|
||||
<section>
|
||||
<h3>suggest on focus</h3>
|
||||
<veui-autocomplete
|
||||
:datasource="coffees"
|
||||
placeholder="请输入"
|
||||
suggest-trigger="focus"
|
||||
/>
|
||||
</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'
|
||||
}
|
||||
],
|
||||
coffees: [
|
||||
{
|
||||
label: 'Infused',
|
||||
value: 'infused',
|
||||
options: [
|
||||
{
|
||||
label: 'French press',
|
||||
value: 'french-press'
|
||||
},
|
||||
{
|
||||
label: 'Cold brew',
|
||||
value: 'cold-brew'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Espresso',
|
||||
value: 'espresso',
|
||||
options: [
|
||||
{
|
||||
label: 'Espresso Romano',
|
||||
value: 'espresso-romano'
|
||||
},
|
||||
{
|
||||
label: 'Guillermo',
|
||||
value: 'guillermo'
|
||||
},
|
||||
{
|
||||
label: 'Ristretto',
|
||||
value: 'ristretto'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Milk coffee',
|
||||
value: 'milk-coffee',
|
||||
options: [
|
||||
{
|
||||
label: 'Latte',
|
||||
value: 'latte'
|
||||
},
|
||||
{
|
||||
label: 'Macchiato',
|
||||
value: 'macchiato'
|
||||
},
|
||||
{
|
||||
label: 'Cappuccino',
|
||||
value: 'cappuccino'
|
||||
},
|
||||
{
|
||||
label: 'White coffee',
|
||||
value: 'white-coffee'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.autocomplete-normal-demo {
|
||||
display: flex;
|
||||
section + section {
|
||||
margin-left: 60px;
|
||||
}
|
||||
}
|
||||
</style>
|
45
one/docs/demo/badge/dot.vue
Normal file
45
one/docs/demo/badge/dot.vue
Normal file
@@ -0,0 +1,45 @@
|
||||
<template>
|
||||
<article>
|
||||
<section>
|
||||
<veui-badge
|
||||
value="Running"
|
||||
type="success"
|
||||
/>
|
||||
<veui-badge
|
||||
value="New"
|
||||
type="info"
|
||||
/>
|
||||
<veui-badge value="Rejected"/>
|
||||
<veui-badge
|
||||
value="Auditing"
|
||||
type="warning"
|
||||
/>
|
||||
<veui-badge
|
||||
value="Expired"
|
||||
type="aux"
|
||||
/>
|
||||
</section>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Badge } from 'veui'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-badge': Badge
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped docs>
|
||||
section {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
.veui-badge {
|
||||
& + & {
|
||||
margin-left: 30px;
|
||||
}
|
||||
}
|
||||
</style>
|
61
one/docs/demo/badge/number.vue
Normal file
61
one/docs/demo/badge/number.vue
Normal file
@@ -0,0 +1,61 @@
|
||||
<template>
|
||||
<article>
|
||||
<veui-badge
|
||||
:value="count"
|
||||
:max="100"
|
||||
>
|
||||
<veui-button
|
||||
ui="primary"
|
||||
@click="inc"
|
||||
>
|
||||
Add
|
||||
</veui-button>
|
||||
</veui-badge>
|
||||
<veui-button
|
||||
ui="s"
|
||||
@click="reset"
|
||||
>
|
||||
Reset
|
||||
</veui-button>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Badge, Button } from 'veui'
|
||||
|
||||
const initial = 96
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-badge': Badge,
|
||||
'veui-button': Button
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
count: initial
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
inc () {
|
||||
this.count++
|
||||
},
|
||||
reset () {
|
||||
this.count = initial
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped docs>
|
||||
.veui-badge {
|
||||
margin-right: 2em;
|
||||
}
|
||||
</style>
|
||||
|
||||
<docs>
|
||||
可以使用 `max` 属性,指定可现实数字的最大值,超过则显示为“<var>max</var>+”。
|
||||
</docs>
|
||||
|
||||
<docs locale="en-US">
|
||||
Use the `max` prop to specify the max value can be displayed. Displays “<var>max</var>+” when value is larger than `max`.
|
||||
</docs>
|
58
one/docs/demo/badge/text.vue
Normal file
58
one/docs/demo/badge/text.vue
Normal file
@@ -0,0 +1,58 @@
|
||||
<template>
|
||||
<article>
|
||||
<veui-badge
|
||||
value="New"
|
||||
type="success"
|
||||
>
|
||||
<veui-button>View</veui-button>
|
||||
</veui-badge>
|
||||
<veui-badge
|
||||
value="New"
|
||||
type="info"
|
||||
>
|
||||
<veui-button>View</veui-button>
|
||||
</veui-badge>
|
||||
<veui-badge value="New">
|
||||
<veui-button>View</veui-button>
|
||||
</veui-badge>
|
||||
<veui-badge
|
||||
value="New"
|
||||
type="warning"
|
||||
>
|
||||
<veui-button>View</veui-button>
|
||||
</veui-badge>
|
||||
<veui-badge
|
||||
value="New"
|
||||
type="aux"
|
||||
>
|
||||
<veui-button>View</veui-button>
|
||||
</veui-badge>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Badge, Button } from 'veui'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-badge': Badge,
|
||||
'veui-button': Button
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped docs>
|
||||
.veui-badge {
|
||||
& + & {
|
||||
margin-left: 2em;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<docs>
|
||||
可以使用 `type` 属性,指定徽标在不同功能状态下的样式。
|
||||
</docs>
|
||||
|
||||
<docs locale="en-US">
|
||||
Use the `type` prop to apply different contextual styles.
|
||||
</docs>
|
26
one/docs/demo/breadcrumb/base.vue
Normal file
26
one/docs/demo/breadcrumb/base.vue
Normal file
@@ -0,0 +1,26 @@
|
||||
<template>
|
||||
<article>
|
||||
<veui-breadcrumb>
|
||||
<veui-breadcrumb-item to="./breadcrumb">
|
||||
Home
|
||||
</veui-breadcrumb-item>
|
||||
<veui-breadcrumb-item to="./breadcrumb">
|
||||
Components
|
||||
</veui-breadcrumb-item>
|
||||
<veui-breadcrumb-item type="text">
|
||||
Breadcrumb
|
||||
</veui-breadcrumb-item>
|
||||
</veui-breadcrumb>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Breadcrumb, BreadcrumbItem } from 'veui'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-breadcrumb': Breadcrumb,
|
||||
'veui-breadcrumb-item': BreadcrumbItem
|
||||
}
|
||||
}
|
||||
</script>
|
32
one/docs/demo/breadcrumb/datasource.vue
Normal file
32
one/docs/demo/breadcrumb/datasource.vue
Normal file
@@ -0,0 +1,32 @@
|
||||
<template>
|
||||
<article>
|
||||
<veui-breadcrumb :routes="routes"/>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Breadcrumb } from 'veui'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-breadcrumb': Breadcrumb
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
routes: [
|
||||
{
|
||||
to: './breadcrumb',
|
||||
label: 'Home'
|
||||
},
|
||||
{
|
||||
to: './breadcrumb',
|
||||
label: 'Components'
|
||||
},
|
||||
{
|
||||
label: 'Breadcrumb'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
55
one/docs/demo/breadcrumb/redirect.vue
Normal file
55
one/docs/demo/breadcrumb/redirect.vue
Normal file
@@ -0,0 +1,55 @@
|
||||
<template>
|
||||
<article>
|
||||
<veui-breadcrumb
|
||||
:routes="routes"
|
||||
@redirect="handleRedirect"
|
||||
/>
|
||||
<div class="console">
|
||||
<template v-if="currentRoute">
|
||||
Redirected to <b>{{ currentRoute.label }}</b>.
|
||||
</template>
|
||||
<template v-else>
|
||||
Not redirected yet.
|
||||
</template>
|
||||
</div>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Breadcrumb } from 'veui'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-breadcrumb': Breadcrumb
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
currentRoute: null,
|
||||
routes: [
|
||||
{
|
||||
label: 'Home',
|
||||
type: 'link'
|
||||
},
|
||||
{
|
||||
label: 'Components',
|
||||
type: 'link'
|
||||
},
|
||||
{
|
||||
label: 'Breadcrumb'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleRedirect (event, route) {
|
||||
this.currentRoute = route
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped docs>
|
||||
.veui-breadcrumb:first-child {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
</style>
|
49
one/docs/demo/breadcrumb/separator.vue
Normal file
49
one/docs/demo/breadcrumb/separator.vue
Normal file
@@ -0,0 +1,49 @@
|
||||
<template>
|
||||
<article>
|
||||
<veui-breadcrumb :routes="routes">
|
||||
<template #separator>
|
||||
-
|
||||
</template>
|
||||
</veui-breadcrumb>
|
||||
<veui-breadcrumb :routes="routes">
|
||||
<template #separator>
|
||||
<veui-icon name="arrow-right"/>
|
||||
</template>
|
||||
</veui-breadcrumb>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Breadcrumb, Icon } from 'veui'
|
||||
import 'veui-theme-dls-icons/arrow-right'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-breadcrumb': Breadcrumb,
|
||||
'veui-icon': Icon
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
routes: [
|
||||
{
|
||||
to: './breadcrumb',
|
||||
label: 'Home'
|
||||
},
|
||||
{
|
||||
to: './breadcrumb',
|
||||
label: 'Components'
|
||||
},
|
||||
{
|
||||
label: 'Breadcrumb'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped docs>
|
||||
.veui-breadcrumb:first-child {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
</style>
|
47
one/docs/demo/breadcrumb/size.vue
Normal file
47
one/docs/demo/breadcrumb/size.vue
Normal file
@@ -0,0 +1,47 @@
|
||||
<template>
|
||||
<article>
|
||||
<section>
|
||||
<veui-breadcrumb ui="m">
|
||||
<veui-breadcrumb-item to="./breadcrumb">
|
||||
Home
|
||||
</veui-breadcrumb-item>
|
||||
<veui-breadcrumb-item to="./breadcrumb">
|
||||
Components
|
||||
</veui-breadcrumb-item>
|
||||
<veui-breadcrumb-item type="text">
|
||||
Breadcrumb
|
||||
</veui-breadcrumb-item>
|
||||
</veui-breadcrumb>
|
||||
</section>
|
||||
<section>
|
||||
<veui-breadcrumb ui="s">
|
||||
<veui-breadcrumb-item to="./breadcrumb">
|
||||
Home
|
||||
</veui-breadcrumb-item>
|
||||
<veui-breadcrumb-item to="./breadcrumb">
|
||||
Components
|
||||
</veui-breadcrumb-item>
|
||||
<veui-breadcrumb-item type="text">
|
||||
Breadcrumb
|
||||
</veui-breadcrumb-item>
|
||||
</veui-breadcrumb>
|
||||
</section>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Breadcrumb, BreadcrumbItem } from 'veui'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-breadcrumb': Breadcrumb,
|
||||
'veui-breadcrumb-item': BreadcrumbItem
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped docs>
|
||||
section {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
</style>
|
47
one/docs/demo/breadcrumb/style.vue
Normal file
47
one/docs/demo/breadcrumb/style.vue
Normal file
@@ -0,0 +1,47 @@
|
||||
<template>
|
||||
<article>
|
||||
<section>
|
||||
<veui-breadcrumb>
|
||||
<veui-breadcrumb-item to="./breadcrumb">
|
||||
Home
|
||||
</veui-breadcrumb-item>
|
||||
<veui-breadcrumb-item to="./breadcrumb">
|
||||
Components
|
||||
</veui-breadcrumb-item>
|
||||
<veui-breadcrumb-item type="text">
|
||||
Breadcrumb
|
||||
</veui-breadcrumb-item>
|
||||
</veui-breadcrumb>
|
||||
</section>
|
||||
<section>
|
||||
<veui-breadcrumb ui="strong">
|
||||
<veui-breadcrumb-item to="./breadcrumb">
|
||||
Home
|
||||
</veui-breadcrumb-item>
|
||||
<veui-breadcrumb-item to="./breadcrumb">
|
||||
Components
|
||||
</veui-breadcrumb-item>
|
||||
<veui-breadcrumb-item type="text">
|
||||
Breadcrumb
|
||||
</veui-breadcrumb-item>
|
||||
</veui-breadcrumb>
|
||||
</section>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Breadcrumb, BreadcrumbItem } from 'veui'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-breadcrumb': Breadcrumb,
|
||||
'veui-breadcrumb-item': BreadcrumbItem
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped docs>
|
||||
section {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
</style>
|
76
one/docs/demo/button-group/disabled.vue
Normal file
76
one/docs/demo/button-group/disabled.vue
Normal file
@@ -0,0 +1,76 @@
|
||||
<template>
|
||||
<article>
|
||||
<section>
|
||||
<veui-checkbox v-model="disabled">
|
||||
Disabled
|
||||
</veui-checkbox>
|
||||
</section>
|
||||
<section>
|
||||
<veui-button-group
|
||||
ui="primary"
|
||||
:disabled="disabled"
|
||||
>
|
||||
<veui-button :disabled="disabled">
|
||||
Undo
|
||||
</veui-button>
|
||||
<veui-button :disabled="disabled">
|
||||
Redo
|
||||
</veui-button>
|
||||
</veui-button-group>
|
||||
</section>
|
||||
<section>
|
||||
<veui-button-group
|
||||
:items="group"
|
||||
:disabled="disabled"
|
||||
/>
|
||||
</section>
|
||||
<section>
|
||||
<veui-button-group
|
||||
ui="strong"
|
||||
:items="group"
|
||||
:disabled="disabled"
|
||||
/>
|
||||
</section>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Button, ButtonGroup, Checkbox } from 'veui'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-button': Button,
|
||||
'veui-button-group': ButtonGroup,
|
||||
'veui-checkbox': Checkbox
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
disabled: true,
|
||||
group: [
|
||||
{
|
||||
label: 'Undo',
|
||||
value: 'undo'
|
||||
},
|
||||
{
|
||||
label: 'Redo',
|
||||
value: 'redo'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped docs>
|
||||
section {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
</style>
|
||||
|
||||
<docs>
|
||||
`ButtonGroup` 的 `disabled` 属性仅在使用 `items` 指定内容时生效,如果使用内联的 `Button` 组件,则需要为每个按钮分别指定 `disabled` 属性。
|
||||
</docs>
|
||||
|
||||
<docs locale="en-US">
|
||||
When given a string `value` property on an item, clicking the corresponding button will emit an event with the same name on `ButtonGroup`.
|
||||
</docs>
|
43
one/docs/demo/button-group/items.vue
Normal file
43
one/docs/demo/button-group/items.vue
Normal file
@@ -0,0 +1,43 @@
|
||||
<template>
|
||||
<article>
|
||||
<veui-button-group :items="group"/>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ButtonGroup } from 'veui'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-button-group': ButtonGroup
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
group: [
|
||||
{
|
||||
label: 'Undo',
|
||||
value: 'undo'
|
||||
},
|
||||
{
|
||||
label: 'Redo',
|
||||
value: 'redo'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped docs>
|
||||
.veui-button-group {
|
||||
margin-right: 1em;
|
||||
}
|
||||
</style>
|
||||
|
||||
<docs>
|
||||
当每个数据项的 `value` 字段是字符串时,点击按钮将在 `ButtonGroup` 组件上触发 `value` 同名的事件。
|
||||
</docs>
|
||||
|
||||
<docs locale="en-US">
|
||||
When given a string `value` property on an item, clicking the corresponding button will emit an event with the same name on `ButtonGroup`.
|
||||
</docs>
|
41
one/docs/demo/button-group/size.vue
Normal file
41
one/docs/demo/button-group/size.vue
Normal file
@@ -0,0 +1,41 @@
|
||||
<template>
|
||||
<article>
|
||||
<veui-button-group ui="xl">
|
||||
<veui-button>Undo</veui-button>
|
||||
<veui-button>Redo</veui-button>
|
||||
</veui-button-group>
|
||||
<veui-button-group ui="l">
|
||||
<veui-button>Undo</veui-button>
|
||||
<veui-button>Redo</veui-button>
|
||||
</veui-button-group>
|
||||
<veui-button-group ui="m">
|
||||
<veui-button>Undo</veui-button>
|
||||
<veui-button>Redo</veui-button>
|
||||
</veui-button-group>
|
||||
<veui-button-group ui="s">
|
||||
<veui-button>Undo</veui-button>
|
||||
<veui-button>Redo</veui-button>
|
||||
</veui-button-group>
|
||||
<veui-button-group ui="xs">
|
||||
<veui-button>Undo</veui-button>
|
||||
<veui-button>Redo</veui-button>
|
||||
</veui-button-group>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Button, ButtonGroup } from 'veui'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-button': Button,
|
||||
'veui-button-group': ButtonGroup
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped docs>
|
||||
.veui-button-group {
|
||||
margin-right: 1em;
|
||||
}
|
||||
</style>
|
43
one/docs/demo/button-group/style.vue
Normal file
43
one/docs/demo/button-group/style.vue
Normal file
@@ -0,0 +1,43 @@
|
||||
<template>
|
||||
<article>
|
||||
<section>
|
||||
<veui-button-group ui="primary">
|
||||
<veui-button>Undo</veui-button>
|
||||
<veui-button>Redo</veui-button>
|
||||
</veui-button-group>
|
||||
</section>
|
||||
<section>
|
||||
<veui-button-group>
|
||||
<veui-button>Undo</veui-button>
|
||||
<veui-button>Redo</veui-button>
|
||||
</veui-button-group>
|
||||
</section>
|
||||
<section>
|
||||
<veui-button-group ui="strong">
|
||||
<veui-button>Undo</veui-button>
|
||||
<veui-button>Redo</veui-button>
|
||||
</veui-button-group>
|
||||
</section>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Button, ButtonGroup } from 'veui'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-button': Button,
|
||||
'veui-button-group': ButtonGroup
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped docs>
|
||||
section {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
.veui-button-group {
|
||||
margin-right: 1em;
|
||||
}
|
||||
</style>
|
58
one/docs/demo/button/disabled.vue
Normal file
58
one/docs/demo/button/disabled.vue
Normal file
@@ -0,0 +1,58 @@
|
||||
<template>
|
||||
<article>
|
||||
<section>
|
||||
<veui-checkbox v-model="disabled">
|
||||
Disabled
|
||||
</veui-checkbox>
|
||||
</section>
|
||||
<section>
|
||||
<veui-button
|
||||
:disabled="disabled"
|
||||
ui="primary"
|
||||
>
|
||||
Primary
|
||||
</veui-button>
|
||||
<veui-button :disabled="disabled">
|
||||
Normal
|
||||
</veui-button>
|
||||
<veui-button
|
||||
:disabled="disabled"
|
||||
ui="alt"
|
||||
>
|
||||
Alternate
|
||||
</veui-button>
|
||||
<veui-button
|
||||
:disabled="disabled"
|
||||
ui="link"
|
||||
>
|
||||
Link
|
||||
</veui-button>
|
||||
</section>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Button, Checkbox } from 'veui'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-button': Button,
|
||||
'veui-checkbox': Checkbox
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
disabled: true
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped docs>
|
||||
section {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
.veui-button {
|
||||
margin-right: 1em;
|
||||
}
|
||||
</style>
|
66
one/docs/demo/button/loading.vue
Normal file
66
one/docs/demo/button/loading.vue
Normal file
@@ -0,0 +1,66 @@
|
||||
<template>
|
||||
<article>
|
||||
<section>
|
||||
<veui-checkbox v-model="loading">
|
||||
Loading
|
||||
</veui-checkbox>
|
||||
</section>
|
||||
<section>
|
||||
<veui-button
|
||||
:loading="loading"
|
||||
ui="primary"
|
||||
>
|
||||
Primary
|
||||
</veui-button>
|
||||
<veui-button :loading="loading">
|
||||
Normal
|
||||
</veui-button>
|
||||
<veui-button
|
||||
:loading="loading"
|
||||
ui="strong"
|
||||
>
|
||||
Strong
|
||||
</veui-button>
|
||||
<veui-button
|
||||
:loading="loading"
|
||||
ui="text"
|
||||
>
|
||||
Text
|
||||
</veui-button>
|
||||
<veui-button
|
||||
:loading="loading"
|
||||
ui="icon"
|
||||
>
|
||||
<veui-icon name="home"/>
|
||||
</veui-button>
|
||||
</section>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Button, Checkbox, Icon } from 'veui'
|
||||
import 'veui-theme-dls-icons/home'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-button': Button,
|
||||
'veui-checkbox': Checkbox,
|
||||
'veui-icon': Icon
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
loading: true
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped docs>
|
||||
section {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
.veui-button {
|
||||
margin-right: 1em;
|
||||
}
|
||||
</style>
|
35
one/docs/demo/button/size.vue
Normal file
35
one/docs/demo/button/size.vue
Normal file
@@ -0,0 +1,35 @@
|
||||
<template>
|
||||
<article>
|
||||
<veui-button ui="xl">
|
||||
xl
|
||||
</veui-button>
|
||||
<veui-button ui="l">
|
||||
l
|
||||
</veui-button>
|
||||
<veui-button ui="m">
|
||||
m
|
||||
</veui-button>
|
||||
<veui-button ui="s">
|
||||
s
|
||||
</veui-button>
|
||||
<veui-button ui="xs">
|
||||
xs
|
||||
</veui-button>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Button } from 'veui'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-button': Button
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped docs>
|
||||
.veui-button {
|
||||
margin-right: 1em;
|
||||
}
|
||||
</style>
|
57
one/docs/demo/button/style.vue
Normal file
57
one/docs/demo/button/style.vue
Normal file
@@ -0,0 +1,57 @@
|
||||
<template>
|
||||
<article>
|
||||
<section>
|
||||
<veui-button ui="primary">
|
||||
Primary
|
||||
</veui-button>
|
||||
<veui-button>Normal</veui-button>
|
||||
<veui-button ui="basic">
|
||||
Basic
|
||||
</veui-button>
|
||||
<veui-button ui="strong">
|
||||
Strong
|
||||
</veui-button>
|
||||
<veui-button ui="translucent">
|
||||
Translucent
|
||||
</veui-button>
|
||||
</section>
|
||||
<section>
|
||||
<veui-button ui="text">
|
||||
Text
|
||||
</veui-button>
|
||||
<veui-button ui="icon">
|
||||
<veui-icon name="home"/>
|
||||
</veui-button>
|
||||
<veui-button ui="icon strong">
|
||||
<veui-icon name="home"/>
|
||||
</veui-button>
|
||||
<veui-button ui="icon aux">
|
||||
<veui-icon name="home"/>
|
||||
</veui-button>
|
||||
<veui-button ui="primary square">
|
||||
<veui-icon name="home"/>
|
||||
</veui-button>
|
||||
</section>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Button, Icon } from 'veui'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-button': Button,
|
||||
'veui-icon': Icon
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped docs>
|
||||
.veui-button {
|
||||
margin-right: 1em;
|
||||
}
|
||||
|
||||
section {
|
||||
margin-top: 20px;
|
||||
}
|
||||
</style>
|
39
one/docs/demo/calendar/default.vue
Normal file
39
one/docs/demo/calendar/default.vue
Normal file
@@ -0,0 +1,39 @@
|
||||
<template>
|
||||
<article>
|
||||
<veui-calendar v-model="date"/>
|
||||
<p>Selected: {{ readableDate }}</p>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Calendar } from 'veui'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-calendar': Calendar
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
date: new Date()
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
readableDate () {
|
||||
return this.date.toLocaleDateString(this.$i18n.locale, {
|
||||
weekday: 'long',
|
||||
year: 'numeric',
|
||||
month: 'long',
|
||||
day: 'numeric'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<docs>
|
||||
支持 `v-model`,数据类型为原生 `Date` 类型。
|
||||
</docs>
|
||||
|
||||
<docs locale="en-US">
|
||||
Supports `v-model` with value type being the native `Date`.
|
||||
</docs>
|
49
one/docs/demo/calendar/multiple-ranges.vue
Normal file
49
one/docs/demo/calendar/multiple-ranges.vue
Normal file
@@ -0,0 +1,49 @@
|
||||
<template>
|
||||
<article>
|
||||
<veui-calendar
|
||||
v-model="ranges"
|
||||
range
|
||||
multiple
|
||||
:panel="2"
|
||||
/>
|
||||
<section>Selected: {{ readableRanges }}</section>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Calendar } from 'veui'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-calendar': Calendar
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
ranges: null
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
readableRanges () {
|
||||
if (!this.ranges || this.ranges.length === 0) {
|
||||
return 'Nothing.'
|
||||
}
|
||||
return this.ranges
|
||||
.map(range => this.toReadable(range).join(' to '))
|
||||
.join(', ')
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
toReadable (dates) {
|
||||
return dates.map(date => date.toLocaleDateString(this.$i18n.locale))
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<docs>
|
||||
支持 `v-model`,选择多日期范围时数据类型为 `Array<[Date, Date]>`。
|
||||
</docs>
|
||||
|
||||
<docs locale="en-US">
|
||||
Supports `v-model`, with value type being `Array<[Date, Date]>` when selecting multiple date ranges.
|
||||
</docs>
|
79
one/docs/demo/calendar/range-multiple.vue
Normal file
79
one/docs/demo/calendar/range-multiple.vue
Normal file
@@ -0,0 +1,79 @@
|
||||
<template>
|
||||
<article>
|
||||
<section class="col">
|
||||
<h4>Multiple dates</h4>
|
||||
<veui-calendar
|
||||
v-model="dates"
|
||||
multiple
|
||||
/>
|
||||
<section>Selected: {{ readableDates }}</section>
|
||||
</section>
|
||||
<section class="col">
|
||||
<h4>Date ranges</h4>
|
||||
<veui-calendar
|
||||
v-model="range"
|
||||
range
|
||||
/>
|
||||
<section>Selected: {{ readableRange }}</section>
|
||||
</section>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Calendar } from 'veui'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-calendar': Calendar
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
dates: null,
|
||||
range: null
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
readableDates () {
|
||||
if (!this.dates || !this.dates.length) {
|
||||
return 'Nothing.'
|
||||
}
|
||||
return this.toReadable(this.dates).join(', ')
|
||||
},
|
||||
readableRange () {
|
||||
if (!this.range) {
|
||||
return 'Nothing.'
|
||||
}
|
||||
return this.toReadable(this.range).join(' to ')
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
toReadable (dates) {
|
||||
return dates.map(date => date.toLocaleDateString(this.$i18n.locale))
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped docs>
|
||||
article {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.col {
|
||||
float: left;
|
||||
width: 340px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
h4 {
|
||||
margin-top: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
<docs>
|
||||
支持 `v-model`,选择多个单日时数据类型为 `Array<Date>`,选择日期范围时数据类型为 `[Date, Date]`。
|
||||
</docs>
|
||||
|
||||
<docs locale="en-US">
|
||||
Supports `v-model`, with value type being `Array<Date>` when selecting multiple dates, being `[Date, Date]` when selecting a date range.
|
||||
</docs>
|
54
one/docs/demo/carousel/autoplay.vue
Normal file
54
one/docs/demo/carousel/autoplay.vue
Normal file
@@ -0,0 +1,54 @@
|
||||
<template>
|
||||
<article>
|
||||
<veui-carousel
|
||||
:datasource="items"
|
||||
autoplay
|
||||
pause-on-hover
|
||||
:interval="5000"
|
||||
/>
|
||||
</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'
|
||||
}
|
||||
],
|
||||
autoplay: true,
|
||||
pauseOnHover: true
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<docs>
|
||||
还可以使用 `interval` 属性来指定自动播放的切换间隔时长,使用 `wrap` 属性来允许循环播放,以及使用 `pause-on-hover` 属性来时光标悬浮在指示器对应项时暂停自动播放。
|
||||
</docs>
|
||||
|
||||
<docs locale="en-US">
|
||||
You can also use the `autoplay` prop to enable autoplay, use the `wrap` prop to enable looping and use the `pause-on-hover` prop to pause playing when cursor hover step indicators.
|
||||
</docs>
|
68
one/docs/demo/carousel/indicator.vue
Normal file
68
one/docs/demo/carousel/indicator.vue
Normal file
@@ -0,0 +1,68 @@
|
||||
<template>
|
||||
<article>
|
||||
<section>
|
||||
<h4>Indicator type</h4>
|
||||
<veui-radio-group
|
||||
v-model="indicator"
|
||||
:items="indicators"
|
||||
/>
|
||||
</section>
|
||||
<section>
|
||||
<veui-carousel
|
||||
:datasource="items"
|
||||
:indicator="indicator"
|
||||
/>
|
||||
</section>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Carousel, RadioGroup } from 'veui'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-carousel': Carousel,
|
||||
'veui-radio-group': RadioGroup
|
||||
},
|
||||
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'
|
||||
}
|
||||
],
|
||||
indicator: 'radio',
|
||||
indicators: [
|
||||
{ label: 'Radio', value: 'radio' },
|
||||
{ label: 'Number', value: 'number' },
|
||||
{ label: 'None', value: 'none' }
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped docs>
|
||||
h4 {
|
||||
margin: 0 0 10px;
|
||||
}
|
||||
|
||||
section {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
</style>
|
64
one/docs/demo/carousel/switch.vue
Normal file
64
one/docs/demo/carousel/switch.vue
Normal file
@@ -0,0 +1,64 @@
|
||||
<template>
|
||||
<article>
|
||||
<section>
|
||||
<h4>Index</h4>
|
||||
<veui-number-input
|
||||
v-model="index"
|
||||
:min="0"
|
||||
:max="items.length - 1"
|
||||
/>
|
||||
</section>
|
||||
<section>
|
||||
<veui-carousel
|
||||
:datasource="items"
|
||||
:index.sync="index"
|
||||
/>
|
||||
</section>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Carousel, NumberInput } from 'veui'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-carousel': Carousel,
|
||||
'veui-number-input': NumberInput
|
||||
},
|
||||
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'
|
||||
}
|
||||
],
|
||||
index: 0
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped docs>
|
||||
h4 {
|
||||
margin: 0 0 10px;
|
||||
}
|
||||
|
||||
section {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
</style>
|
65
one/docs/demo/check-button-group/default.vue
Normal file
65
one/docs/demo/check-button-group/default.vue
Normal file
@@ -0,0 +1,65 @@
|
||||
<template>
|
||||
<article>
|
||||
<section>
|
||||
<h4>Normal size</h4>
|
||||
<veui-check-button-group
|
||||
v-model="selected"
|
||||
:items="licenses"
|
||||
/>
|
||||
<p>Checked: {{ readable }}</p>
|
||||
</section>
|
||||
<section>
|
||||
<h4>Small size</h4>
|
||||
<veui-check-button-group
|
||||
v-model="selected"
|
||||
ui="small"
|
||||
:items="licenses"
|
||||
/>
|
||||
<p>Checked: {{ readable }}</p>
|
||||
</section>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { CheckButtonGroup } from 'veui'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-check-button-group': CheckButtonGroup
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
selected: null,
|
||||
licenses: [
|
||||
{
|
||||
label: 'MIT License',
|
||||
value: 'mit'
|
||||
},
|
||||
{
|
||||
label: 'BSD License',
|
||||
value: 'bsd'
|
||||
},
|
||||
{
|
||||
label: 'Apache License 2.0',
|
||||
value: 'apache2'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
readable () {
|
||||
return (this.selected || []).join(', ') || '-'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped docs>
|
||||
section {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
h4 {
|
||||
margin-top: 0;
|
||||
}
|
||||
</style>
|
65
one/docs/demo/checkbox-group/default.vue
Normal file
65
one/docs/demo/checkbox-group/default.vue
Normal file
@@ -0,0 +1,65 @@
|
||||
<template>
|
||||
<article>
|
||||
<section>
|
||||
<h4>Normal size</h4>
|
||||
<veui-checkbox-group
|
||||
v-model="selected"
|
||||
:items="licenses"
|
||||
/>
|
||||
<p>Checked: {{ readable }}</p>
|
||||
</section>
|
||||
<section>
|
||||
<h4>Small size</h4>
|
||||
<veui-checkbox-group
|
||||
v-model="selected"
|
||||
ui="s"
|
||||
:items="licenses"
|
||||
/>
|
||||
<p>Checked: {{ readable }}</p>
|
||||
</section>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { CheckboxGroup } from 'veui'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-checkbox-group': CheckboxGroup
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
selected: null,
|
||||
licenses: [
|
||||
{
|
||||
label: 'MIT License',
|
||||
value: 'mit'
|
||||
},
|
||||
{
|
||||
label: 'BSD License',
|
||||
value: 'bsd'
|
||||
},
|
||||
{
|
||||
label: 'Apache License 2.0',
|
||||
value: 'apache2'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
readable () {
|
||||
return (this.selected || []).join(', ') || '-'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped docs>
|
||||
section {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
h4 {
|
||||
margin-top: 0;
|
||||
}
|
||||
</style>
|
63
one/docs/demo/checkbox/size.vue
Normal file
63
one/docs/demo/checkbox/size.vue
Normal file
@@ -0,0 +1,63 @@
|
||||
<template>
|
||||
<article>
|
||||
<section>
|
||||
<veui-checkbox
|
||||
v-model="checked"
|
||||
:ui="size"
|
||||
:indeterminate.sync="indeterminate"
|
||||
>
|
||||
Checked: {{ checked }}
|
||||
</veui-checkbox>
|
||||
</section>
|
||||
<section>
|
||||
<veui-checkbox
|
||||
v-model="small"
|
||||
ui="s"
|
||||
>
|
||||
Small
|
||||
</veui-checkbox>
|
||||
<veui-checkbox
|
||||
v-model="indeterminate"
|
||||
ui="s"
|
||||
>
|
||||
Indeterminate
|
||||
</veui-checkbox>
|
||||
</section>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Checkbox } from 'veui'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-checkbox': Checkbox
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
checked: false,
|
||||
indeterminate: false,
|
||||
small: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
size () {
|
||||
return this.small ? 's' : ''
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped docs>
|
||||
.veui-checkbox
|
||||
& + &
|
||||
margin-left 20px
|
||||
</style>
|
||||
|
||||
<docs>
|
||||
可以使用 `indeterminate` 属性来设置半选状态。
|
||||
</docs>
|
||||
|
||||
<docs locale="en-US">
|
||||
Use the `indeterminate` prop to put the checkbox in indeterminate state.
|
||||
</docs>
|
33
one/docs/demo/checkbox/value.vue
Normal file
33
one/docs/demo/checkbox/value.vue
Normal file
@@ -0,0 +1,33 @@
|
||||
<template>
|
||||
<article>
|
||||
<veui-checkbox
|
||||
v-model="status"
|
||||
true-value="CONFIRMED"
|
||||
false-value="UNCONFIRMED"
|
||||
>
|
||||
I've read the agreement
|
||||
</veui-checkbox>
|
||||
<p>State: {{ statusMap[status] }}</p>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Checkbox } from 'veui'
|
||||
|
||||
const STATUS_MAP = {
|
||||
CONFIRMED: 'Confirmed',
|
||||
UNCONFIRMED: 'Not confirmed'
|
||||
}
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-checkbox': Checkbox
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
status: 'UNCONFIRMED',
|
||||
statusMap: STATUS_MAP
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
34
one/docs/demo/collapse/size.vue
Normal file
34
one/docs/demo/collapse/size.vue
Normal file
@@ -0,0 +1,34 @@
|
||||
<template>
|
||||
<article>
|
||||
<section>
|
||||
<veui-collapse
|
||||
label="Normal size"
|
||||
>
|
||||
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Magni asperiores minus vitae voluptatibus enim perspiciatis exercitationem placeat cumque molestias, labore cum, sunt, id veritatis excepturi ipsum facere quis blanditiis neque?
|
||||
</veui-collapse>
|
||||
</section>
|
||||
<section>
|
||||
<veui-collapse
|
||||
label="Small size"
|
||||
ui="s"
|
||||
>
|
||||
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Magni asperiores minus vitae voluptatibus enim perspiciatis exercitationem placeat cumque molestias, labore cum, sunt, id veritatis excepturi ipsum facere quis blanditiis neque?
|
||||
</veui-collapse>
|
||||
</section>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Collapse } from 'veui'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-collapse': Collapse
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped docs>
|
||||
section
|
||||
margin-bottom 20px
|
||||
</style>
|
41
one/docs/demo/confirm-box/custom.vue
Normal file
41
one/docs/demo/confirm-box/custom.vue
Normal file
@@ -0,0 +1,41 @@
|
||||
<template>
|
||||
<article>
|
||||
<veui-button @click="open = true">
|
||||
Remove
|
||||
</veui-button>
|
||||
<veui-confirm-box
|
||||
title="System Notification"
|
||||
:open.sync="open"
|
||||
@ok="ok"
|
||||
@cancel="cancel"
|
||||
>
|
||||
<p>Are you sure to remove the item?</p>
|
||||
</veui-confirm-box>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ConfirmBox, Button } from 'veui'
|
||||
import toast from 'veui/managers/toast'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-confirm-box': ConfirmBox,
|
||||
'veui-button': Button
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
open: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
ok () {
|
||||
this.open = false
|
||||
toast.info('Confirmed')
|
||||
},
|
||||
cancel () {
|
||||
toast.info('Canceled')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
52
one/docs/demo/date-picker/default.vue
Normal file
52
one/docs/demo/date-picker/default.vue
Normal file
@@ -0,0 +1,52 @@
|
||||
<template>
|
||||
<article>
|
||||
<section>
|
||||
<h4>Clearable</h4>
|
||||
<veui-date-picker
|
||||
v-model="date"
|
||||
clearable
|
||||
/>
|
||||
</section>
|
||||
<section>
|
||||
<h4>Customizable placeholder</h4>
|
||||
<veui-date-picker
|
||||
v-model="date2"
|
||||
placeholder="Pick a day"
|
||||
/>
|
||||
</section>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { DatePicker } from 'veui'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-date-picker': DatePicker
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
date: new Date(),
|
||||
date2: null
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped docs>
|
||||
section:not(:last-child) {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
h4 {
|
||||
margin-top: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
<docs>
|
||||
支持 `v-model`,数据类型为原生 `Date` 类型。
|
||||
</docs>
|
||||
|
||||
<docs locale="en-US">
|
||||
Supports `v-model` with value type being the native `Date`.
|
||||
</docs>
|
54
one/docs/demo/date-picker/range.vue
Normal file
54
one/docs/demo/date-picker/range.vue
Normal file
@@ -0,0 +1,54 @@
|
||||
<template>
|
||||
<article>
|
||||
<section>
|
||||
<h4>Clearable</h4>
|
||||
<veui-date-picker
|
||||
v-model="range"
|
||||
range
|
||||
clearable
|
||||
/>
|
||||
</section>
|
||||
<section>
|
||||
<h4>Customizable placeholder</h4>
|
||||
<veui-date-picker
|
||||
v-model="range"
|
||||
class="custom"
|
||||
range
|
||||
placeholder="Pick a date range..."
|
||||
/>
|
||||
</section>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { DatePicker } from 'veui'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-date-picker': DatePicker
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
range: null
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped docs>
|
||||
section:not(:last-child) {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
h4 {
|
||||
margin-top: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
<docs>
|
||||
支持 `v-model`,选择日期范围时数据类型为 `[Date, Date]`。
|
||||
</docs>
|
||||
|
||||
<docs locale="en-US">
|
||||
Supports `v-model`, with value type being `[Date, Date]` when selecting a date range.
|
||||
</docs>
|
62
one/docs/demo/date-picker/shortcuts.vue
Normal file
62
one/docs/demo/date-picker/shortcuts.vue
Normal file
@@ -0,0 +1,62 @@
|
||||
<template>
|
||||
<article>
|
||||
<veui-date-picker
|
||||
v-model="range"
|
||||
:shortcuts="shortcuts"
|
||||
range
|
||||
clearable
|
||||
/>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { DatePicker } from 'veui'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-date-picker': DatePicker
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
range: null,
|
||||
shortcuts: [
|
||||
{
|
||||
label: '上个月',
|
||||
from: {
|
||||
startOf: 'month',
|
||||
month: -1
|
||||
},
|
||||
to: {
|
||||
startOf: 'month',
|
||||
days: -1
|
||||
}
|
||||
},
|
||||
{
|
||||
label: '本月',
|
||||
from: {
|
||||
startOf: 'month'
|
||||
},
|
||||
to: 0
|
||||
},
|
||||
{
|
||||
label: '本周',
|
||||
from: {
|
||||
startOf: 'week',
|
||||
days: 0
|
||||
},
|
||||
to: 0
|
||||
},
|
||||
{
|
||||
label: '最近7天',
|
||||
from: -6,
|
||||
to: 0
|
||||
},
|
||||
{
|
||||
label: '今天',
|
||||
to: 0
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
121
one/docs/demo/dialog/async.vue
Normal file
121
one/docs/demo/dialog/async.vue
Normal file
@@ -0,0 +1,121 @@
|
||||
<template>
|
||||
<article>
|
||||
<veui-button
|
||||
:disabled="submitting"
|
||||
@click="submitOpen = true"
|
||||
>
|
||||
Submit
|
||||
</veui-button>
|
||||
<veui-button
|
||||
:disabled="saving"
|
||||
@click="saveOpen = true"
|
||||
>
|
||||
Save
|
||||
</veui-button>
|
||||
<veui-dialog
|
||||
title="System"
|
||||
:open.sync="submitOpen"
|
||||
:before-close="submit"
|
||||
:closable="false"
|
||||
:escapable="!submitting"
|
||||
:loading="submitting"
|
||||
>
|
||||
Confirm to create the issue?
|
||||
</veui-dialog>
|
||||
<veui-dialog
|
||||
title="System"
|
||||
:open.sync="saveOpen"
|
||||
:closable="false"
|
||||
:escapable="!submitting"
|
||||
>
|
||||
Confirm to save the post?
|
||||
<template #foot>
|
||||
<veui-button
|
||||
ui="primary"
|
||||
:loading="saving"
|
||||
@click="save('ok')"
|
||||
>
|
||||
OK
|
||||
</veui-button>
|
||||
<veui-button
|
||||
:disabled="saving"
|
||||
@click="save"
|
||||
>
|
||||
Cancel
|
||||
</veui-button>
|
||||
</template>
|
||||
</veui-dialog>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Dialog, Button } from 'veui'
|
||||
import toast from 'veui/managers/toast'
|
||||
|
||||
function fakeRequest () {
|
||||
return new Promise(resolve =>
|
||||
setTimeout(() => {
|
||||
resolve(Math.random() < 0.5)
|
||||
}, 2000)
|
||||
)
|
||||
}
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-dialog': Dialog,
|
||||
'veui-button': Button
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
submitOpen: false,
|
||||
saveOpen: false,
|
||||
submitting: false,
|
||||
saving: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
submit (type) {
|
||||
if (type === 'ok') {
|
||||
this.submitting = true
|
||||
return fakeRequest().then(success => {
|
||||
this.submitting = false
|
||||
if (!success) {
|
||||
toast.error('Failed to create the issue. Please retry.')
|
||||
return false
|
||||
}
|
||||
toast.success('Issue created successfully!')
|
||||
})
|
||||
}
|
||||
},
|
||||
save (type) {
|
||||
if (type === 'ok') {
|
||||
this.saving = true
|
||||
return fakeRequest().then(success => {
|
||||
this.saving = false
|
||||
if (!success) {
|
||||
toast.error('Failed to save the post. Please retry.')
|
||||
} else {
|
||||
toast.success('Post saved successfully!')
|
||||
this.saveOpen = false
|
||||
}
|
||||
})
|
||||
}
|
||||
this.saveOpen = false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped docs>
|
||||
article > .veui-button {
|
||||
margin-right: 20px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<docs>
|
||||
当你希望统一处理用户可能触发对话框关闭的操作,请使用 `before-close` 属性传入统一的处理函数,此时无论是点击“确定”/“取消”按钮、关闭按钮还是按下 <kbd>esc</kbd> 触发的关闭操作,都会统一进入 `before-close` 的处理流程。如果逻辑相对简单,比如取消时没有额外逻辑,可以直接操作 `open` 属性来关闭对话框。
|
||||
</docs>
|
||||
|
||||
<docs locale="en-US">
|
||||
When you want a unified process to handle all user interactions that might trigger the dialog to be closed, you can leverage the `before-close` function prop. No matter the close behavior is about to be triggered by clicking “OK”/“Cancel” buttons, the close button or pressing <kbd>esc</kbd>, `before-close` will always take over the following process. If the logic is relatively simple, you can manipulate `open` prop directly to close the dialog.
|
||||
</docs>
|
73
one/docs/demo/dialog/custom.vue
Normal file
73
one/docs/demo/dialog/custom.vue
Normal file
@@ -0,0 +1,73 @@
|
||||
<template>
|
||||
<article>
|
||||
<veui-button @click="simpleOpen = true">
|
||||
Title & content
|
||||
</veui-button>
|
||||
<veui-dialog
|
||||
:open.sync="simpleOpen"
|
||||
title="Customized Title & Content"
|
||||
@ok="simpleOpen = false"
|
||||
@cancel="simpleOpen = false"
|
||||
>
|
||||
Customized content via <code><slot></code>.
|
||||
</veui-dialog>
|
||||
|
||||
<veui-button @click="titleIconOpen = true">
|
||||
Icon in Title
|
||||
</veui-button>
|
||||
<veui-dialog
|
||||
:open.sync="titleIconOpen"
|
||||
@ok="titleIconOpen = false"
|
||||
@cancel="titleIconOpen = false"
|
||||
>
|
||||
<template #title>
|
||||
Title with Icon <veui-icon name="flag"/>
|
||||
</template>
|
||||
Customized content via <code><slot></code>.
|
||||
</veui-dialog>
|
||||
|
||||
<veui-button @click="footOpen = true">
|
||||
Foot
|
||||
</veui-button>
|
||||
<veui-dialog
|
||||
:open.sync="footOpen"
|
||||
title="Customized Foot"
|
||||
>
|
||||
Customized content via <code><slot></code>.
|
||||
<template #foot="{ close }">
|
||||
<veui-button
|
||||
ui="s primary"
|
||||
@click="close('ok')"
|
||||
>
|
||||
Close
|
||||
</veui-button>
|
||||
</template>
|
||||
</veui-dialog>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Dialog, Button, Icon } from 'veui'
|
||||
import 'veui-theme-dls-icons/flag'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-dialog': Dialog,
|
||||
'veui-button': Button,
|
||||
'veui-icon': Icon
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
simpleOpen: false,
|
||||
titleIconOpen: false,
|
||||
footOpen: false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped docs>
|
||||
.veui-button {
|
||||
margin-right: 20px;
|
||||
}
|
||||
</style>
|
38
one/docs/demo/dialog/draggable.vue
Normal file
38
one/docs/demo/dialog/draggable.vue
Normal file
@@ -0,0 +1,38 @@
|
||||
<template>
|
||||
<article>
|
||||
<veui-button @click="draggableOpen = true">
|
||||
Draggable
|
||||
</veui-button>
|
||||
<veui-dialog
|
||||
:open.sync="draggableOpen"
|
||||
title="Draggable Dialog"
|
||||
draggable
|
||||
@ok="draggableOpen = false"
|
||||
@cancel="draggableOpen = false"
|
||||
>
|
||||
This dialog is draggable.
|
||||
</veui-dialog>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Dialog, Button } from 'veui'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-dialog': Dialog,
|
||||
'veui-button': Button
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
draggableOpen: false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped docs>
|
||||
.veui-button {
|
||||
margin-right: 20px;
|
||||
}
|
||||
</style>
|
64
one/docs/demo/dialog/modal.vue
Normal file
64
one/docs/demo/dialog/modal.vue
Normal file
@@ -0,0 +1,64 @@
|
||||
<template>
|
||||
<article>
|
||||
<veui-button @click="modalOpen = true">
|
||||
Modal
|
||||
</veui-button>
|
||||
<veui-button @click="nonModalOpen = true">
|
||||
Non-modal
|
||||
</veui-button>
|
||||
<veui-dialog
|
||||
title="System"
|
||||
:open.sync="modalOpen"
|
||||
@ok="handleModalClose(true)"
|
||||
@cancel="handleModalClose"
|
||||
>
|
||||
Do you want to refresh the page?
|
||||
</veui-dialog>
|
||||
<veui-dialog
|
||||
title="System"
|
||||
:open.sync="nonModalOpen"
|
||||
:modal="false"
|
||||
@ok="handleModalClose(true)"
|
||||
@cancel="handleModalClose"
|
||||
>
|
||||
Do you want to refresh the page?
|
||||
</veui-dialog>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Dialog, Button } from 'veui'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-dialog': Dialog,
|
||||
'veui-button': Button
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
modalOpen: false,
|
||||
nonModalOpen: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleModalClose (ok) {
|
||||
this.modalOpen = false
|
||||
if (ok) {
|
||||
location.reload()
|
||||
}
|
||||
},
|
||||
handleNonModalClose (ok) {
|
||||
this.nonModalOpen = false
|
||||
if (ok) {
|
||||
location.reload()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped docs>
|
||||
.veui-button {
|
||||
margin-right: 20px;
|
||||
}
|
||||
</style>
|
62
one/docs/demo/dialog/stack.vue
Normal file
62
one/docs/demo/dialog/stack.vue
Normal file
@@ -0,0 +1,62 @@
|
||||
<template>
|
||||
<article>
|
||||
<veui-button @click="aOpen = true">
|
||||
Dialog A
|
||||
</veui-button>
|
||||
<veui-dialog
|
||||
:open.sync="aOpen"
|
||||
title="Dialog A"
|
||||
draggable
|
||||
:modal="false"
|
||||
@ok="aOpen = false"
|
||||
@cancel="aOpen = false"
|
||||
>
|
||||
The content of Dialog A.
|
||||
</veui-dialog>
|
||||
|
||||
<veui-button @click="bOpen = true">
|
||||
Dialog B
|
||||
</veui-button>
|
||||
<veui-dialog
|
||||
:open.sync="bOpen"
|
||||
title="Dialog B"
|
||||
draggable
|
||||
:modal="false"
|
||||
@ok="bOpen = false"
|
||||
@cancel="bOpen = false"
|
||||
>
|
||||
The content of Dialog B.
|
||||
</veui-dialog>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Dialog, Button } from 'veui'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-dialog': Dialog,
|
||||
'veui-button': Button
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
aOpen: false,
|
||||
bOpen: false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped docs>
|
||||
.veui-button {
|
||||
margin-right: 20px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<docs>
|
||||
同时打开上面两个对话框,将一个拖动到使两个对话框稍稍重叠的位置。然后当你点击激活一个对话框,它就将显示于另一个之上了。
|
||||
</docs>
|
||||
|
||||
<docs locale="en-US">
|
||||
Open both dialogs and drag one of them to make them overlap a little bit. Then when you activate one dialog, it will be displayed on top of the other one.
|
||||
</docs>
|
51
one/docs/demo/directives/drag/axis.vue
Normal file
51
one/docs/demo/directives/drag/axis.vue
Normal file
@@ -0,0 +1,51 @@
|
||||
<template>
|
||||
<article>
|
||||
<div
|
||||
ref="target1"
|
||||
v-drag:target1.translate.x
|
||||
class="target"
|
||||
>
|
||||
水平方向
|
||||
</div>
|
||||
<div
|
||||
ref="target2"
|
||||
v-drag:target2.translate.y
|
||||
class="target"
|
||||
>
|
||||
垂直方向
|
||||
</div>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import drag from 'veui/directives/drag'
|
||||
|
||||
export default {
|
||||
directives: {
|
||||
drag
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped docs>
|
||||
@import "~veui-theme-dls/lib.less";
|
||||
|
||||
article {
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
.target {
|
||||
.size(80px);
|
||||
background: @veui-gray-color-6;
|
||||
display: inline-flex;
|
||||
margin-right: 40px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.container {
|
||||
.size(100%, 300px);
|
||||
background: @veui-gray-color-8;
|
||||
}
|
||||
</style>
|
28
one/docs/demo/directives/drag/base.vue
Normal file
28
one/docs/demo/directives/drag/base.vue
Normal file
@@ -0,0 +1,28 @@
|
||||
<template>
|
||||
<article>
|
||||
<div
|
||||
ref="target"
|
||||
v-drag:target.translate
|
||||
class="target"
|
||||
/>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import drag from 'veui/directives/drag'
|
||||
|
||||
export default {
|
||||
directives: {
|
||||
drag
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped docs>
|
||||
@import "~veui-theme-dls/lib.less";
|
||||
|
||||
.target {
|
||||
.size(80px);
|
||||
background: @veui-gray-color-6;
|
||||
}
|
||||
</style>
|
38
one/docs/demo/directives/drag/containment.vue
Normal file
38
one/docs/demo/directives/drag/containment.vue
Normal file
@@ -0,0 +1,38 @@
|
||||
<template>
|
||||
<article>
|
||||
<div
|
||||
ref="container"
|
||||
class="container"
|
||||
>
|
||||
<div
|
||||
ref="target"
|
||||
v-drag:target.translate="{containment: 'container'}"
|
||||
class="target"
|
||||
/>
|
||||
</div>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import drag from 'veui/directives/drag'
|
||||
|
||||
export default {
|
||||
directives: {
|
||||
drag
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped docs>
|
||||
@import "~veui-theme-dls/lib.less";
|
||||
|
||||
.target {
|
||||
.size(80px);
|
||||
background: @veui-gray-color-6;
|
||||
}
|
||||
|
||||
.container {
|
||||
.size(100%, 300px);
|
||||
background: @veui-gray-color-8;
|
||||
}
|
||||
</style>
|
48
one/docs/demo/directives/drag/targets.vue
Normal file
48
one/docs/demo/directives/drag/targets.vue
Normal file
@@ -0,0 +1,48 @@
|
||||
<template>
|
||||
<article>
|
||||
<div
|
||||
ref="target1"
|
||||
v-drag:target1,target2,target3.translate
|
||||
class="target"
|
||||
>
|
||||
主元素
|
||||
</div>
|
||||
<div
|
||||
ref="target2"
|
||||
class="target"
|
||||
/>
|
||||
<div
|
||||
ref="target3"
|
||||
class="target"
|
||||
/>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import drag from 'veui/directives/drag'
|
||||
|
||||
export default {
|
||||
directives: {
|
||||
drag
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped docs>
|
||||
@import "~veui-theme-dls/lib.less";
|
||||
|
||||
.target {
|
||||
.size(80px);
|
||||
background: @veui-gray-color-6;
|
||||
display: inline-flex;
|
||||
margin-right: 40px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.container {
|
||||
.size(100%, 300px);
|
||||
background: @veui-gray-color-8;
|
||||
}
|
||||
</style>
|
77
one/docs/demo/directives/nudge.vue
Normal file
77
one/docs/demo/directives/nudge.vue
Normal file
@@ -0,0 +1,77 @@
|
||||
<template>
|
||||
<article>
|
||||
<div class="box value">
|
||||
{{ displayValue }}
|
||||
</div>
|
||||
<div
|
||||
v-nudge.x="{update: handleNudgeUpdate}"
|
||||
class="box"
|
||||
tabindex="-1"
|
||||
>
|
||||
点我,按<strong>左右</strong>方向键
|
||||
</div>
|
||||
<div
|
||||
v-nudge.y="{update: handleNudgeUpdate}"
|
||||
class="box"
|
||||
tabindex="-1"
|
||||
>
|
||||
点我,按<strong>上下</strong>方向键
|
||||
</div>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import nudge from 'veui/directives/nudge'
|
||||
|
||||
export default {
|
||||
directives: {
|
||||
nudge
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
value: 0
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
displayValue () {
|
||||
return this.value.toFixed(1).replace('.0', '')
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleNudgeUpdate (increase) {
|
||||
this.value += increase
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped docs>
|
||||
@import "~veui-theme-dls/lib.less";
|
||||
|
||||
article {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.box {
|
||||
.size(200px, 50px);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 1px solid @veui-gray-color-5;
|
||||
background: #fff;
|
||||
margin-right: 40px;
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
transition: background-color 0.3s;
|
||||
line-height: 1;
|
||||
|
||||
&:focus {
|
||||
background-color: @veui-gray-color-6;
|
||||
}
|
||||
}
|
||||
|
||||
.value {
|
||||
font-size: 1.5em;
|
||||
}
|
||||
</style>
|
54
one/docs/demo/directives/outside/click.vue
Normal file
54
one/docs/demo/directives/outside/click.vue
Normal file
@@ -0,0 +1,54 @@
|
||||
<template>
|
||||
<article
|
||||
@mouseenter="inDemo = true"
|
||||
@mouseleave="inDemo = false"
|
||||
>
|
||||
<div
|
||||
v-outside="handleOutside"
|
||||
class="box"
|
||||
>
|
||||
目标元素 A
|
||||
</div>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import outside from 'veui/directives/outside'
|
||||
import toast from 'veui/managers/toast'
|
||||
|
||||
export default {
|
||||
directives: {
|
||||
outside
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
timer: null,
|
||||
inDemo: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleOutside () {
|
||||
if (this.inDemo) {
|
||||
toast.info('点击了目标元素 A 外部。')
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped docs>
|
||||
@import "~veui-theme-dls/lib.less";
|
||||
|
||||
.box {
|
||||
.size(500px, 100px);
|
||||
background: @veui-gray-color-8;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
article {
|
||||
margin: -30px;
|
||||
padding: 30px;
|
||||
}
|
||||
</style>
|
64
one/docs/demo/directives/outside/hover-with-delay.vue
Normal file
64
one/docs/demo/directives/outside/hover-with-delay.vue
Normal file
@@ -0,0 +1,64 @@
|
||||
<template>
|
||||
<article>
|
||||
<div
|
||||
v-outside:box2,box3.hover.1000="handleOutside"
|
||||
class="box1"
|
||||
>
|
||||
目标元素 C
|
||||
</div>
|
||||
<div
|
||||
ref="box2"
|
||||
class="box2"
|
||||
>
|
||||
目标元素 D
|
||||
</div>
|
||||
<div
|
||||
ref="box3"
|
||||
class="box3"
|
||||
>
|
||||
目标元素 E
|
||||
</div>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import outside from 'veui/directives/outside'
|
||||
import toast from 'veui/managers/toast'
|
||||
|
||||
export default {
|
||||
directives: {
|
||||
outside
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
consoleVisible: false,
|
||||
timer: null
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleOutside () {
|
||||
toast.info('在 1000ms 内未移回目标元素 C、D、E,触发外部事件。')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped docs>
|
||||
@import "~veui-theme-dls/lib.less";
|
||||
|
||||
.box1,
|
||||
.box2,
|
||||
.box3 {
|
||||
.size(200px, 100px);
|
||||
background: @veui-gray-color-8;
|
||||
margin-right: 30px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
article {
|
||||
margin: -30px;
|
||||
padding: 30px;
|
||||
}
|
||||
</style>
|
49
one/docs/demo/directives/outside/hover.vue
Normal file
49
one/docs/demo/directives/outside/hover.vue
Normal file
@@ -0,0 +1,49 @@
|
||||
<template>
|
||||
<article>
|
||||
<div
|
||||
v-outside.hover="handleOutside"
|
||||
class="box"
|
||||
>
|
||||
目标元素 B
|
||||
</div>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import outside from 'veui/directives/outside'
|
||||
import toast from 'veui/managers/toast'
|
||||
|
||||
export default {
|
||||
directives: {
|
||||
outside
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
consoleVisible: false,
|
||||
timer: null
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleOutside () {
|
||||
toast.info('鼠标移到了目标元素B外部。')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped docs>
|
||||
@import "~veui-theme-dls/lib.less";
|
||||
|
||||
.box {
|
||||
.size(500px, 100px);
|
||||
background: @veui-gray-color-8;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
article {
|
||||
margin: -30px;
|
||||
padding: 30px;
|
||||
}
|
||||
</style>
|
98
one/docs/demo/directives/resize.vue
Normal file
98
one/docs/demo/directives/resize.vue
Normal file
@@ -0,0 +1,98 @@
|
||||
<template>
|
||||
<article>
|
||||
<section>
|
||||
<veui-button
|
||||
@click="randomSize"
|
||||
>
|
||||
调整尺寸
|
||||
</veui-button>
|
||||
<div
|
||||
ref="demo"
|
||||
v-resize="updateSize"
|
||||
class="demo"
|
||||
:style="`width: ${size}px`"
|
||||
>
|
||||
v-resize="handler"
|
||||
</div>
|
||||
<p>当前尺寸: {{ caughtSize }}px</p>
|
||||
<div
|
||||
ref="demo1"
|
||||
v-resize.debounce.leading="updateSize1"
|
||||
class="demo"
|
||||
:style="`width: ${size}px`"
|
||||
>
|
||||
v-resize.debounce="handler"
|
||||
</div>
|
||||
<p>当前尺寸: {{ caughtSize1 }}px</p>
|
||||
<div
|
||||
ref="demo2"
|
||||
v-resize.throttle.500="updateSize2"
|
||||
class="demo"
|
||||
:style="`width: ${size}px`"
|
||||
>
|
||||
v-resize.throttle.500="handler"
|
||||
</div>
|
||||
<p>当前尺寸: {{ caughtSize2 }}px</p>
|
||||
<div
|
||||
ref="demo3"
|
||||
v-resize="{mode: 'throttle', handler: updateSize3}"
|
||||
class="demo"
|
||||
:style="`width: ${size}px`"
|
||||
>
|
||||
v-resize="{mode: 'throttle', handler}"
|
||||
</div>
|
||||
<p>当前尺寸: {{ caughtSize3 }}px</p>
|
||||
</section>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Button } from 'veui'
|
||||
import { resize } from 'veui/directives'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-button': Button
|
||||
},
|
||||
directives: {
|
||||
resize
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
size: 315,
|
||||
caughtSize: 315,
|
||||
caughtSize1: 315,
|
||||
caughtSize2: 315,
|
||||
caughtSize3: 315
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
randomSize () {
|
||||
this.size = Math.ceil(Math.random() * 480) + 315
|
||||
},
|
||||
updateSize () {
|
||||
this.caughtSize = this.$refs.demo.offsetWidth
|
||||
},
|
||||
updateSize1 () {
|
||||
this.caughtSize1 = this.$refs.demo1.offsetWidth
|
||||
},
|
||||
updateSize2 () {
|
||||
this.caughtSize2 = this.$refs.demo2.offsetWidth
|
||||
},
|
||||
updateSize3 () {
|
||||
this.caughtSize3 = this.$refs.demo3.offsetWidth
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" docs scoped>
|
||||
.demo {
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
margin-top: 10px;
|
||||
padding-left: 10px;
|
||||
background-color: #eee;
|
||||
transition: width 2s;
|
||||
}
|
||||
</style>
|
73
one/docs/demo/drawer/custom.vue
Normal file
73
one/docs/demo/drawer/custom.vue
Normal file
@@ -0,0 +1,73 @@
|
||||
<template>
|
||||
<article>
|
||||
<veui-button @click="simpleOpen = true">
|
||||
Title & content
|
||||
</veui-button>
|
||||
<veui-drawer
|
||||
:open.sync="simpleOpen"
|
||||
title="Customized Title & Content"
|
||||
@ok="simpleOpen = false"
|
||||
@cancel="simpleOpen = false"
|
||||
>
|
||||
Customized content via <code><slot></code>.
|
||||
</veui-drawer>
|
||||
|
||||
<veui-button @click="titleIconOpen = true">
|
||||
Icon in Title
|
||||
</veui-button>
|
||||
<veui-drawer
|
||||
:open.sync="titleIconOpen"
|
||||
@ok="titleIconOpen = false"
|
||||
@cancel="titleIconOpen = false"
|
||||
>
|
||||
<template #title>
|
||||
Title with Icon <veui-icon name="flag"/>
|
||||
</template>
|
||||
Customized content via <code><slot></code>.
|
||||
</veui-drawer>
|
||||
|
||||
<veui-button @click="footOpen = true">
|
||||
Foot
|
||||
</veui-button>
|
||||
<veui-drawer
|
||||
:open.sync="footOpen"
|
||||
title="Customized Foot"
|
||||
>
|
||||
Customized content via <code><slot></code>.
|
||||
<template #foot="{ close }">
|
||||
<veui-button
|
||||
ui="s primary"
|
||||
@click="close('ok')"
|
||||
>
|
||||
Close
|
||||
</veui-button>
|
||||
</template>
|
||||
</veui-drawer>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Drawer, Button, Icon } from 'veui'
|
||||
import 'veui-theme-dls-icons/flag'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-drawer': Drawer,
|
||||
'veui-button': Button,
|
||||
'veui-icon': Icon
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
simpleOpen: false,
|
||||
titleIconOpen: false,
|
||||
footOpen: false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped docs>
|
||||
.veui-button {
|
||||
margin-right: 20px;
|
||||
}
|
||||
</style>
|
64
one/docs/demo/drawer/modal.vue
Normal file
64
one/docs/demo/drawer/modal.vue
Normal file
@@ -0,0 +1,64 @@
|
||||
<template>
|
||||
<article>
|
||||
<veui-button @click="modalOpen = true">
|
||||
Modal
|
||||
</veui-button>
|
||||
<veui-button @click="nonModalOpen = true">
|
||||
Non-modal
|
||||
</veui-button>
|
||||
<veui-drawer
|
||||
title="System"
|
||||
:open.sync="modalOpen"
|
||||
@ok="handleModalClose(true)"
|
||||
@cancel="handleModalClose"
|
||||
>
|
||||
Do you want to refresh the page?
|
||||
</veui-drawer>
|
||||
<veui-drawer
|
||||
title="System"
|
||||
:open.sync="nonModalOpen"
|
||||
:modal="false"
|
||||
@ok="handleModalClose(true)"
|
||||
@cancel="handleModalClose"
|
||||
>
|
||||
Do you want to refresh the page?
|
||||
</veui-drawer>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Drawer, Button } from 'veui'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-drawer': Drawer,
|
||||
'veui-button': Button
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
modalOpen: false,
|
||||
nonModalOpen: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleModalClose (ok) {
|
||||
this.modalOpen = false
|
||||
if (ok) {
|
||||
location.reload()
|
||||
}
|
||||
},
|
||||
handleNonModalClose (ok) {
|
||||
this.nonModalOpen = false
|
||||
if (ok) {
|
||||
location.reload()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped docs>
|
||||
.veui-button {
|
||||
margin-right: 20px;
|
||||
}
|
||||
</style>
|
103
one/docs/demo/drawer/placement.vue
Normal file
103
one/docs/demo/drawer/placement.vue
Normal file
@@ -0,0 +1,103 @@
|
||||
<template>
|
||||
<article>
|
||||
<section>
|
||||
<veui-checkbox v-model="modal">
|
||||
Modal
|
||||
</veui-checkbox>
|
||||
<veui-checkbox v-model="outsideClosable">
|
||||
outside Closable
|
||||
</veui-checkbox>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<veui-button @click="topOpen = true">
|
||||
Top
|
||||
</veui-button>
|
||||
<veui-button @click="rightOpen = true">
|
||||
Right
|
||||
</veui-button>
|
||||
<veui-button @click="bottomOpen = true">
|
||||
Bottom
|
||||
</veui-button>
|
||||
<veui-button @click="leftOpen = true">
|
||||
Left
|
||||
</veui-button>
|
||||
</section>
|
||||
|
||||
<veui-drawer
|
||||
:open.sync="topOpen"
|
||||
:outside-closable="outsideClosable"
|
||||
:modal="modal"
|
||||
placement="top"
|
||||
>
|
||||
<p>content area</p>
|
||||
<template #title="{ close }">
|
||||
<a @click="close">
|
||||
关闭
|
||||
</a>
|
||||
</template>
|
||||
<template #foot>
|
||||
<div>Foot</div>
|
||||
</template>
|
||||
</veui-drawer>
|
||||
<veui-drawer
|
||||
:open.sync="rightOpen"
|
||||
:modal="modal"
|
||||
:outside-closable="outsideClosable"
|
||||
placement="right"
|
||||
title="Title"
|
||||
/>
|
||||
<veui-drawer
|
||||
title="Title"
|
||||
:modal="modal"
|
||||
:open.sync="bottomOpen"
|
||||
:outside-closable="outsideClosable"
|
||||
placement="bottom"
|
||||
/>
|
||||
<veui-drawer
|
||||
title="Title"
|
||||
:modal="modal"
|
||||
:open.sync="leftOpen"
|
||||
:outside-closable="outsideClosable"
|
||||
placement="left"
|
||||
/>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Checkbox, Drawer, Button } from 'veui'
|
||||
|
||||
export default {
|
||||
name: 'drawer-demo',
|
||||
components: {
|
||||
'veui-drawer': Drawer,
|
||||
'veui-checkbox': Checkbox,
|
||||
'veui-button': Button
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
modal: true,
|
||||
outsideClosable: false,
|
||||
topOpen: false,
|
||||
rightOpen: false,
|
||||
bottomOpen: false,
|
||||
leftOpen: false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
section {
|
||||
& + & {
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.veui-button,
|
||||
.veui-checkbox {
|
||||
& + & {
|
||||
margin-left: 20px;
|
||||
}
|
||||
}
|
||||
</style>
|
105
one/docs/demo/dropdown/disable.vue
Normal file
105
one/docs/demo/dropdown/disable.vue
Normal file
@@ -0,0 +1,105 @@
|
||||
<template>
|
||||
<article>
|
||||
<veui-dropdown
|
||||
label="Operation"
|
||||
disabled
|
||||
ui="text"
|
||||
:options="options"
|
||||
/>
|
||||
<veui-dropdown
|
||||
label="Operation"
|
||||
disabled
|
||||
:options="options"
|
||||
/>
|
||||
<veui-dropdown
|
||||
label="Operation"
|
||||
disabled
|
||||
ui="primary"
|
||||
:options="options"
|
||||
/>
|
||||
<veui-dropdown
|
||||
label="Operation"
|
||||
disabled
|
||||
split
|
||||
:options="options"
|
||||
/>
|
||||
<veui-dropdown
|
||||
label="Operation"
|
||||
disabled
|
||||
split
|
||||
ui="primary"
|
||||
:options="options"
|
||||
/>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Dropdown } from 'veui'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-dropdown': Dropdown
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
options: [
|
||||
{
|
||||
label: '新建',
|
||||
value: 'create'
|
||||
},
|
||||
{
|
||||
label: '编辑',
|
||||
value: 'edit',
|
||||
disabled: true
|
||||
},
|
||||
{
|
||||
label: '删除',
|
||||
value: 'remove'
|
||||
},
|
||||
{
|
||||
label: '编辑',
|
||||
value: 'edit',
|
||||
disabled: true
|
||||
},
|
||||
{
|
||||
label: '删除',
|
||||
value: 'remove'
|
||||
},
|
||||
{
|
||||
label: '编辑',
|
||||
value: 'edit',
|
||||
disabled: true
|
||||
},
|
||||
{
|
||||
label: '删除',
|
||||
value: 'remove'
|
||||
},
|
||||
{
|
||||
label: '编辑',
|
||||
value: 'edit',
|
||||
disabled: true
|
||||
},
|
||||
{
|
||||
label: '删除',
|
||||
value: 'remove'
|
||||
},
|
||||
{
|
||||
label: '编辑',
|
||||
value: 'edit',
|
||||
disabled: true
|
||||
},
|
||||
{
|
||||
label: '删除',
|
||||
value: 'remove'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped docs>
|
||||
.veui-dropdown {
|
||||
margin-left: 1em;
|
||||
}
|
||||
</style>
|
70
one/docs/demo/dropdown/inline.vue
Normal file
70
one/docs/demo/dropdown/inline.vue
Normal file
@@ -0,0 +1,70 @@
|
||||
<template>
|
||||
<veui-dropdown
|
||||
label="Files"
|
||||
@click="alert"
|
||||
>
|
||||
<veui-option-group>
|
||||
<veui-option
|
||||
value="new-file"
|
||||
label="New File"
|
||||
/>
|
||||
<veui-option
|
||||
value="new-window"
|
||||
label="New Window"
|
||||
/>
|
||||
</veui-option-group>
|
||||
<veui-option-group>
|
||||
<veui-option
|
||||
value="open"
|
||||
label="Open…"
|
||||
/>
|
||||
<veui-option
|
||||
value="open-workspace"
|
||||
label="Open Workspace…"
|
||||
/>
|
||||
<veui-option-group
|
||||
label="Open Recent"
|
||||
position="popup"
|
||||
>
|
||||
<veui-option-group>
|
||||
<veui-option
|
||||
value="reopen"
|
||||
label="Reopen Closed Editor"
|
||||
/>
|
||||
</veui-option-group>
|
||||
<veui-option-group>
|
||||
<veui-option
|
||||
value="open:~/Dropdown.vue"
|
||||
label="~/Dropdown.vue"
|
||||
/>
|
||||
<veui-option
|
||||
value="open:~/Select.vue"
|
||||
label="~/Select.vue"
|
||||
/>
|
||||
</veui-option-group>
|
||||
</veui-option-group>
|
||||
</veui-option-group>
|
||||
</veui-dropdown>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Dropdown, OptionGroup, Option } from 'veui'
|
||||
import toast from 'veui/managers/toast'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-dropdown': Dropdown,
|
||||
'veui-option-group': OptionGroup,
|
||||
'veui-option': Option
|
||||
},
|
||||
methods: {
|
||||
alert (e) {
|
||||
toast.info(e)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<docs>
|
||||
将 `OptionGroup` 的 `position` 属性设置为 `popup` 后可以让子选项在新的浮动子菜单中展现。
|
||||
</docs>
|
132
one/docs/demo/dropdown/other.vue
Normal file
132
one/docs/demo/dropdown/other.vue
Normal file
@@ -0,0 +1,132 @@
|
||||
<template>
|
||||
<article>
|
||||
<div class="container">
|
||||
<veui-dropdown
|
||||
label="Operation"
|
||||
split
|
||||
trigger="hover"
|
||||
:options="options"
|
||||
/>
|
||||
<veui-dropdown
|
||||
label="Operation"
|
||||
split
|
||||
trigger="click"
|
||||
:options="options"
|
||||
/>
|
||||
<veui-dropdown
|
||||
label="Operation"
|
||||
ui="primary"
|
||||
split
|
||||
trigger="hover"
|
||||
:options="options"
|
||||
/>
|
||||
<veui-dropdown
|
||||
label="Operation"
|
||||
ui="primary"
|
||||
split
|
||||
trigger="click"
|
||||
:options="options"
|
||||
/>
|
||||
</div>
|
||||
<div class="container">
|
||||
<veui-dropdown
|
||||
label="Operation"
|
||||
trigger="hover"
|
||||
:options="options"
|
||||
/>
|
||||
<veui-dropdown
|
||||
label="Operation"
|
||||
trigger="click"
|
||||
:options="options"
|
||||
/>
|
||||
<veui-dropdown
|
||||
label="Operation"
|
||||
ui="text"
|
||||
split
|
||||
trigger="hover"
|
||||
:options="options"
|
||||
/>
|
||||
<veui-dropdown
|
||||
label="Operation"
|
||||
ui="text"
|
||||
split
|
||||
trigger="click"
|
||||
:options="options"
|
||||
/>
|
||||
</div>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Dropdown } from 'veui'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-dropdown': Dropdown
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
options: [
|
||||
{
|
||||
label: '新建新建新建新建新建新建新建',
|
||||
value: 'create'
|
||||
},
|
||||
{
|
||||
label: '编辑',
|
||||
value: 'edit',
|
||||
disabled: true
|
||||
},
|
||||
{
|
||||
label: '删除',
|
||||
value: 'remove'
|
||||
},
|
||||
{
|
||||
label: '编辑',
|
||||
value: 'edit',
|
||||
disabled: true
|
||||
},
|
||||
{
|
||||
label: '删除',
|
||||
value: 'remove'
|
||||
},
|
||||
{
|
||||
label: '编辑',
|
||||
value: 'edit',
|
||||
disabled: true
|
||||
},
|
||||
{
|
||||
label: '删除',
|
||||
value: 'remove'
|
||||
},
|
||||
{
|
||||
label: '编辑',
|
||||
value: 'edit',
|
||||
disabled: true
|
||||
},
|
||||
{
|
||||
label: '删除',
|
||||
value: 'remove'
|
||||
},
|
||||
{
|
||||
label: '编辑',
|
||||
value: 'edit',
|
||||
disabled: true
|
||||
},
|
||||
{
|
||||
label: '删除',
|
||||
value: 'remove'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped docs>
|
||||
.container {
|
||||
margin-bottom: 1em;
|
||||
.veui-dropdown {
|
||||
margin-left: 1em;
|
||||
}
|
||||
}
|
||||
</style>
|
168
one/docs/demo/dropdown/searchable.vue
Normal file
168
one/docs/demo/dropdown/searchable.vue
Normal file
@@ -0,0 +1,168 @@
|
||||
<template>
|
||||
<article>
|
||||
<veui-dropdown
|
||||
label="Operation"
|
||||
placeholder="Type to search..."
|
||||
searchable
|
||||
:options="options"
|
||||
/>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Dropdown } from 'veui'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-dropdown': Dropdown
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
options: [
|
||||
{
|
||||
label: '>',
|
||||
value: '>'
|
||||
},
|
||||
{
|
||||
label: '>>',
|
||||
value: '>>'
|
||||
},
|
||||
{
|
||||
label: '<',
|
||||
value: '<'
|
||||
},
|
||||
{
|
||||
label: '|',
|
||||
value: '|'
|
||||
},
|
||||
{
|
||||
label: '~/.bash_profile',
|
||||
value: '~/.bash_profile'
|
||||
},
|
||||
{
|
||||
label: 'alias',
|
||||
value: 'alias'
|
||||
},
|
||||
{
|
||||
label: 'cd',
|
||||
value: 'cd'
|
||||
},
|
||||
{
|
||||
label: 'cd ..',
|
||||
value: 'cd ..'
|
||||
},
|
||||
{
|
||||
label: 'cp',
|
||||
value: 'cp'
|
||||
},
|
||||
{
|
||||
label: 'Wildcards (*)',
|
||||
value: 'Wildcards (*)'
|
||||
},
|
||||
{
|
||||
label: 'env',
|
||||
value: 'env'
|
||||
},
|
||||
{
|
||||
label: 'env | grep VARIABLE',
|
||||
value: 'env | grep VARIABLE'
|
||||
},
|
||||
{
|
||||
label: 'export',
|
||||
value: 'export'
|
||||
},
|
||||
{
|
||||
label: 'grep',
|
||||
value: 'grep'
|
||||
},
|
||||
{
|
||||
label: 'grep -i',
|
||||
value: 'grep -i'
|
||||
},
|
||||
{
|
||||
label: 'grep -R',
|
||||
value: 'grep -R'
|
||||
},
|
||||
{
|
||||
label: 'grep -Rl',
|
||||
value: 'grep -Rl'
|
||||
},
|
||||
{
|
||||
label: 'HOME',
|
||||
value: 'HOME'
|
||||
},
|
||||
{
|
||||
label: 'ls',
|
||||
value: 'ls'
|
||||
},
|
||||
{
|
||||
label: 'mkdir',
|
||||
value: 'mkdir'
|
||||
},
|
||||
{
|
||||
label: 'mv',
|
||||
value: 'mv'
|
||||
},
|
||||
{
|
||||
label: 'nano',
|
||||
value: 'nano'
|
||||
},
|
||||
{
|
||||
label: 'PATH',
|
||||
value: 'PATH'
|
||||
},
|
||||
{
|
||||
label: 'pwd',
|
||||
value: 'pwd'
|
||||
},
|
||||
{
|
||||
label: 'rm',
|
||||
value: 'rm'
|
||||
},
|
||||
{
|
||||
label: 'rm -r',
|
||||
value: 'rm -r'
|
||||
},
|
||||
{
|
||||
label: 'sed',
|
||||
value: 'sed'
|
||||
},
|
||||
{
|
||||
label: 'sort',
|
||||
value: 'sort'
|
||||
},
|
||||
{
|
||||
label: 'standard error',
|
||||
value: 'standard error'
|
||||
},
|
||||
{
|
||||
label: 'source',
|
||||
value: 'source'
|
||||
},
|
||||
{
|
||||
label: 'standard input',
|
||||
value: 'standard input'
|
||||
},
|
||||
{
|
||||
label: 'standard output',
|
||||
value: 'standard output'
|
||||
},
|
||||
{
|
||||
label: 'touch',
|
||||
value: 'touch'
|
||||
},
|
||||
{
|
||||
label: 'uniq',
|
||||
value: 'uniq'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped docs>
|
||||
.veui-dropdown {
|
||||
margin-left: 1em;
|
||||
}
|
||||
</style>
|
72
one/docs/demo/dropdown/size.vue
Normal file
72
one/docs/demo/dropdown/size.vue
Normal file
@@ -0,0 +1,72 @@
|
||||
<template>
|
||||
<article>
|
||||
<veui-dropdown
|
||||
label="Action"
|
||||
ui="xs"
|
||||
:options="operations"
|
||||
@click="alert"
|
||||
/>
|
||||
<veui-dropdown
|
||||
label="Action"
|
||||
ui="s"
|
||||
:options="operations"
|
||||
@click="alert"
|
||||
/>
|
||||
<veui-dropdown
|
||||
label="Action"
|
||||
:options="operations"
|
||||
@click="alert"
|
||||
/>
|
||||
<veui-dropdown
|
||||
label="Action"
|
||||
ui="l"
|
||||
:options="operations"
|
||||
@click="alert"
|
||||
/>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Dropdown } from 'veui'
|
||||
import toast from 'veui/managers/toast'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-dropdown': Dropdown
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
operations: [
|
||||
{
|
||||
label: 'Edit',
|
||||
value: 'edit'
|
||||
},
|
||||
{
|
||||
label: 'Delete',
|
||||
value: 'delete'
|
||||
},
|
||||
{
|
||||
label: 'Save',
|
||||
value: 'save'
|
||||
},
|
||||
{
|
||||
label: 'Publish',
|
||||
value: 'publish'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
alert (e) {
|
||||
toast.info(e)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped docs>
|
||||
.veui-dropdown {
|
||||
max-width: 120px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
</style>
|
59
one/docs/demo/dropdown/style.vue
Normal file
59
one/docs/demo/dropdown/style.vue
Normal file
@@ -0,0 +1,59 @@
|
||||
<template>
|
||||
<article>
|
||||
<veui-dropdown
|
||||
label="Primary"
|
||||
ui="primary"
|
||||
:options="options"
|
||||
/>
|
||||
<veui-dropdown
|
||||
label="Default"
|
||||
:options="options"
|
||||
/>
|
||||
<veui-dropdown
|
||||
label="Normal"
|
||||
ui="normal"
|
||||
:options="options"
|
||||
/>
|
||||
<veui-dropdown
|
||||
label="Text"
|
||||
ui="text"
|
||||
:options="options"
|
||||
/>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Dropdown } from 'veui'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-dropdown': Dropdown
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
options: [
|
||||
{
|
||||
label: '新建',
|
||||
value: 'create'
|
||||
},
|
||||
{
|
||||
label: '编辑',
|
||||
value: 'edit'
|
||||
},
|
||||
{
|
||||
label: '删除',
|
||||
value: 'remove'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped docs>
|
||||
.veui-dropdown {
|
||||
& + & {
|
||||
margin-left: 1em;
|
||||
}
|
||||
}
|
||||
</style>
|
50
one/docs/demo/embedded/size.vue
Normal file
50
one/docs/demo/embedded/size.vue
Normal file
@@ -0,0 +1,50 @@
|
||||
<template>
|
||||
<article>
|
||||
<section>
|
||||
<veui-button @click="open = !open">
|
||||
Toggle
|
||||
</veui-button>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<veui-embedded
|
||||
:open.sync="open"
|
||||
title="Notification"
|
||||
>
|
||||
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. At dolorum eius vero expedita ut voluptates possimus recusandae id incidunt obcaecati asperiores eum, laborum dolore facilis aperiam quidem. Maiores, non eum.</p>
|
||||
</veui-embedded>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<veui-embedded
|
||||
ui="s"
|
||||
:open.sync="open"
|
||||
title="Notification"
|
||||
>
|
||||
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. At dolorum eius vero expedita ut voluptates possimus recusandae id incidunt obcaecati asperiores eum, laborum dolore facilis aperiam quidem. Maiores, non eum.</p>
|
||||
</veui-embedded>
|
||||
</section>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Embedded, Button } from 'veui'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-embedded': Embedded,
|
||||
'veui-button': Button
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
open: false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped docs>
|
||||
section {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
</style>
|
63
one/docs/demo/filter-panel/default.vue
Normal file
63
one/docs/demo/filter-panel/default.vue
Normal file
@@ -0,0 +1,63 @@
|
||||
<template>
|
||||
<article>
|
||||
<veui-filter-panel
|
||||
title="Browsers"
|
||||
:datasource="browsersDatasource"
|
||||
>
|
||||
<template slot-scope="{ items }">
|
||||
<div
|
||||
v-for="item in items"
|
||||
v-show="!item.hidden"
|
||||
:key="item.value"
|
||||
class="item"
|
||||
>
|
||||
{{ item.label }}
|
||||
</div>
|
||||
</template>
|
||||
</veui-filter-panel>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { FilterPanel } from 'veui'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-filter-panel': FilterPanel
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
browsers: [
|
||||
'Google Chrome',
|
||||
'Apple Safari',
|
||||
'Microsoft Edge',
|
||||
'Mozilla Firefox',
|
||||
'Opera',
|
||||
'Vivaldi',
|
||||
'Internet Explorer',
|
||||
'Maxthon',
|
||||
'Android Browser',
|
||||
'UC Browser',
|
||||
'Samsung Internet',
|
||||
'QQ Browser'
|
||||
]
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
browsersDatasource () {
|
||||
return this.browsers.map(label => {
|
||||
return {
|
||||
label,
|
||||
value: label.toLowerCase().replace(/\s+/g, '-')
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" docs scoped>
|
||||
.item {
|
||||
padding: 8px 15px;
|
||||
}
|
||||
</style>
|
62
one/docs/demo/focus-visible.vue
Normal file
62
one/docs/demo/focus-visible.vue
Normal file
@@ -0,0 +1,62 @@
|
||||
<template>
|
||||
<article>
|
||||
<button>:focus</button> <button class="special">
|
||||
.focus-visible
|
||||
</button>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<style lang="stylus" scoped docs>
|
||||
p
|
||||
margin-bottom 1em
|
||||
|
||||
button
|
||||
width 120px
|
||||
height 36px
|
||||
margin-right 1em
|
||||
background #fff
|
||||
border solid 1px #999
|
||||
padding 3px 6px
|
||||
text-align center
|
||||
transition background-color 0.3s
|
||||
|
||||
&:hover
|
||||
background-color #f8f8f8
|
||||
|
||||
&:active
|
||||
background-color #eee
|
||||
</style>
|
||||
|
||||
<style lang="less" scoped>
|
||||
button {
|
||||
&:focus {
|
||||
outline: 2px solid #eee;
|
||||
}
|
||||
}
|
||||
|
||||
.special {
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
&.focus-visible {
|
||||
outline: 2px solid #eee;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<docs>
|
||||
使用了 polyfill 以后 `:focus` 样式在鼠标、键盘激活时均会展现,而使用了 `.focus-visible` 样式仅在通过键盘激活时展现。
|
||||
|
||||
:::warning
|
||||
本例非 DLS 样式,仅作为示例。需注意对 `:focus-visible` 的处理在 Firefox 和 Safari 下无效,目前在这两个浏览器下点击不会使按钮处于 `:focus` 状态。
|
||||
:::
|
||||
</docs>
|
||||
|
||||
<docs locale="en-US">
|
||||
After including the polyfill, `:focus` styles are applied both with mouse clicks and keyboard activation, while `.focus-visible` styles are only applied with keyboard activation.
|
||||
|
||||
:::warning
|
||||
This example is only for demonstration purpose and doesn't reflect DLS's styles. Please note that our polyfill for `:focus-visible` works differently in Firefox and Safari. Clicking a button in these browsers won't set the `:focus` state on the button.
|
||||
:::
|
||||
</docs>
|
38
one/docs/demo/form/disabled.vue
Normal file
38
one/docs/demo/form/disabled.vue
Normal file
@@ -0,0 +1,38 @@
|
||||
<template>
|
||||
<article>
|
||||
<section>
|
||||
<veui-checkbox v-model="disabled">
|
||||
禁用
|
||||
</veui-checkbox>
|
||||
</section>
|
||||
<veui-form
|
||||
:data="formData"
|
||||
:disabled="disabled"
|
||||
>
|
||||
<veui-field label="姓名:">
|
||||
<veui-input v-model="formData.name"/>
|
||||
</veui-field>
|
||||
</veui-form>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Form, Field, Input, Checkbox } from 'veui'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-checkbox': Checkbox,
|
||||
'veui-form': Form,
|
||||
'veui-field': Field,
|
||||
'veui-input': Input
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
disabled: true,
|
||||
formData: {
|
||||
name: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
84
one/docs/demo/form/normal.vue
Normal file
84
one/docs/demo/form/normal.vue
Normal file
@@ -0,0 +1,84 @@
|
||||
<template>
|
||||
<article>
|
||||
<veui-form :data="formData">
|
||||
<veui-field label="状态:">
|
||||
<veui-select
|
||||
v-model="formData.statusSelected"
|
||||
:options="statusOptions"
|
||||
/>
|
||||
</veui-field>
|
||||
|
||||
<veui-field label="时间:">
|
||||
<veui-datepicker
|
||||
v-model="formData.range"
|
||||
range
|
||||
/>
|
||||
</veui-field>
|
||||
|
||||
<veui-field>
|
||||
<veui-search-box
|
||||
v-model="formData.query"
|
||||
placeholder="请输入搜索内容"
|
||||
/>
|
||||
</veui-field>
|
||||
|
||||
<template #actions>
|
||||
<veui-button
|
||||
ui="primary"
|
||||
type="submit"
|
||||
>
|
||||
提交
|
||||
</veui-button>
|
||||
<veui-button>取消</veui-button>
|
||||
</template>
|
||||
</veui-form>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import moment from 'moment'
|
||||
import { Form, Field, Button, Select, DatePicker, SearchBox } from 'veui'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-form': Form,
|
||||
'veui-field': Field,
|
||||
'veui-button': Button,
|
||||
'veui-select': Select,
|
||||
'veui-datepicker': DatePicker,
|
||||
'veui-search-box': SearchBox
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
statusOptions: [
|
||||
{
|
||||
label: '状态1',
|
||||
value: 1
|
||||
},
|
||||
{
|
||||
label: '状态2',
|
||||
value: 2
|
||||
},
|
||||
{
|
||||
label: '状态3',
|
||||
value: 3
|
||||
},
|
||||
{
|
||||
label: '状态4',
|
||||
value: 4
|
||||
}
|
||||
],
|
||||
formData: {
|
||||
statusSelected: 1,
|
||||
query: '',
|
||||
range: [
|
||||
moment().toDate(),
|
||||
moment()
|
||||
.add(3, 'month')
|
||||
.toDate()
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
38
one/docs/demo/form/readonly.vue
Normal file
38
one/docs/demo/form/readonly.vue
Normal file
@@ -0,0 +1,38 @@
|
||||
<template>
|
||||
<article>
|
||||
<section>
|
||||
<veui-checkbox v-model="readonly">
|
||||
只读
|
||||
</veui-checkbox>
|
||||
</section>
|
||||
<veui-form
|
||||
:data="formData"
|
||||
:readonly="readonly"
|
||||
>
|
||||
<veui-field label="姓名:">
|
||||
<veui-input v-model="formData.name"/>
|
||||
</veui-field>
|
||||
</veui-form>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Form, Field, Input, Checkbox } from 'veui'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-checkbox': Checkbox,
|
||||
'veui-form': Form,
|
||||
'veui-field': Field,
|
||||
'veui-input': Input
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
readonly: true,
|
||||
formData: {
|
||||
name: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
326
one/docs/demo/form/validate.vue
Normal file
326
one/docs/demo/form/validate.vue
Normal file
@@ -0,0 +1,326 @@
|
||||
<template>
|
||||
<article>
|
||||
<veui-form
|
||||
ref="form"
|
||||
:before-validate="beforeValidate"
|
||||
:after-validate="afterValidate"
|
||||
:readonly="isValidating"
|
||||
:data="formData"
|
||||
:validators="validators"
|
||||
@invalid="handleInvalid"
|
||||
>
|
||||
<veui-field
|
||||
name="name"
|
||||
label="姓名"
|
||||
rules="required"
|
||||
>
|
||||
<veui-input v-model="formData.name"/>
|
||||
</veui-field>
|
||||
|
||||
<veui-field
|
||||
name="age"
|
||||
:rules="ageRule"
|
||||
label="年龄"
|
||||
>
|
||||
<veui-input
|
||||
v-model="formData.age"
|
||||
placeholder="错误提示优先出在右侧"
|
||||
/>
|
||||
</veui-field>
|
||||
|
||||
<veui-field
|
||||
name="desc"
|
||||
rules="required"
|
||||
label="介绍"
|
||||
>
|
||||
<veui-textarea
|
||||
v-model="formData.desc"
|
||||
rows="3"
|
||||
/>
|
||||
</veui-field>
|
||||
|
||||
<veui-fieldset
|
||||
name="phoneSet"
|
||||
label="电话"
|
||||
required
|
||||
>
|
||||
<veui-field
|
||||
name="phoneType"
|
||||
:rules="numRequiredRule"
|
||||
>
|
||||
<veui-select
|
||||
v-model="formData.phoneType"
|
||||
:options="phoneTypeOptions"
|
||||
/>
|
||||
</veui-field>
|
||||
|
||||
<veui-field
|
||||
name="phone"
|
||||
:rules="numRequiredRule"
|
||||
>
|
||||
<veui-input v-model="formData.phone"/>
|
||||
</veui-field>
|
||||
</veui-fieldset>
|
||||
|
||||
<veui-field
|
||||
name="hobby"
|
||||
:rules="hobbyRule"
|
||||
label="爱好"
|
||||
tip="选择则至少选三个"
|
||||
>
|
||||
<veui-checkbox-group
|
||||
v-model="formData.hobby"
|
||||
:items="hobbyItems"
|
||||
/>
|
||||
</veui-field>
|
||||
|
||||
<veui-fieldset
|
||||
label="预期收入"
|
||||
class="salary"
|
||||
tip="联合校验,下限必须小于上限"
|
||||
required
|
||||
>
|
||||
<veui-field
|
||||
name="start"
|
||||
:rules="numRequiredRule"
|
||||
>
|
||||
<veui-input v-model="formData.start"/>
|
||||
</veui-field>
|
||||
<veui-span>-</veui-span>
|
||||
<veui-field
|
||||
name="end"
|
||||
:rules="numRequiredRule"
|
||||
>
|
||||
<veui-input v-model="formData.end"/>
|
||||
</veui-field>
|
||||
<veui-span>万</veui-span>
|
||||
</veui-fieldset>
|
||||
|
||||
<veui-field
|
||||
label="收入下限"
|
||||
name="floor"
|
||||
:rules="[
|
||||
{name: 'required', value: true},
|
||||
{name: 'min', value: 3500, message: '最低收入不小于 3500'}
|
||||
]"
|
||||
>
|
||||
<veui-number-input v-model="formData.floor"/>
|
||||
</veui-field>
|
||||
|
||||
<veui-field
|
||||
name="term"
|
||||
:rules="termRequiredRule"
|
||||
label="协议"
|
||||
>
|
||||
<veui-checkbox
|
||||
v-model="formData.term"
|
||||
>
|
||||
我已阅读并同意工作协议
|
||||
</veui-checkbox>
|
||||
</veui-field>
|
||||
|
||||
<template #actions>
|
||||
<veui-button
|
||||
ui="primary"
|
||||
:loading="isValidating"
|
||||
type="submit"
|
||||
>
|
||||
提交
|
||||
</veui-button>
|
||||
<veui-button
|
||||
:loading="isValidating"
|
||||
@click="() => this.$refs.form.reset()"
|
||||
>
|
||||
重置
|
||||
</veui-button>
|
||||
</template>
|
||||
</veui-form>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
Form,
|
||||
Fieldset,
|
||||
Field,
|
||||
Span,
|
||||
Input,
|
||||
Button,
|
||||
Select,
|
||||
Textarea,
|
||||
Checkbox,
|
||||
CheckboxGroup,
|
||||
NumberInput
|
||||
} from 'veui'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-span': Span,
|
||||
'veui-input': Input,
|
||||
'veui-number-input': NumberInput,
|
||||
'veui-button': Button,
|
||||
'veui-form': Form,
|
||||
'veui-fieldset': Fieldset,
|
||||
'veui-field': Field,
|
||||
'veui-select': Select,
|
||||
'veui-checkbox': Checkbox,
|
||||
'veui-checkbox-group': CheckboxGroup,
|
||||
'veui-textarea': Textarea
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
formData: {
|
||||
name: 'liyunteng1',
|
||||
name1: 'liyunteng2',
|
||||
age: null,
|
||||
desc: '',
|
||||
hobby: ['🏸'],
|
||||
phone: '18888888888',
|
||||
phoneType: 'mobile',
|
||||
start: null,
|
||||
end: null,
|
||||
term: null,
|
||||
floor: 3501
|
||||
},
|
||||
hobbyItems: [
|
||||
{
|
||||
value: '⚽️',
|
||||
label: '足球'
|
||||
},
|
||||
{
|
||||
value: '🏀',
|
||||
label: '篮球'
|
||||
},
|
||||
{
|
||||
value: '🏸',
|
||||
label: '羽毛球'
|
||||
},
|
||||
{
|
||||
value: '🎾',
|
||||
label: '网球'
|
||||
}
|
||||
],
|
||||
phoneTypeOptions: [
|
||||
{
|
||||
label: '座机',
|
||||
value: 'phone'
|
||||
},
|
||||
{
|
||||
label: '手机',
|
||||
value: 'mobile'
|
||||
}
|
||||
],
|
||||
requiredRule: [
|
||||
{
|
||||
name: 'required',
|
||||
value: true,
|
||||
triggers: 'blur,input'
|
||||
}
|
||||
],
|
||||
numRequiredRule: [
|
||||
{
|
||||
name: 'numeric',
|
||||
value: true,
|
||||
triggers: 'blur,input'
|
||||
},
|
||||
{
|
||||
name: 'required',
|
||||
value: true,
|
||||
triggers: 'blur,input'
|
||||
}
|
||||
],
|
||||
termRequiredRule: [
|
||||
{
|
||||
name: 'required',
|
||||
value: true,
|
||||
message: '请勾选阅读协议',
|
||||
triggers: 'change'
|
||||
}
|
||||
],
|
||||
dynamicNameRule: [
|
||||
{
|
||||
name: 'required',
|
||||
value: true,
|
||||
triggers: 'blur,input'
|
||||
},
|
||||
{
|
||||
name: 'minLength',
|
||||
value: 2
|
||||
}
|
||||
],
|
||||
ageRule: [
|
||||
{
|
||||
name: 'required',
|
||||
value: true,
|
||||
triggers: 'input'
|
||||
},
|
||||
{
|
||||
name: 'numeric',
|
||||
value: true,
|
||||
triggers: 'input'
|
||||
},
|
||||
{
|
||||
name: 'maxLength',
|
||||
value: 3,
|
||||
triggers: 'change'
|
||||
}
|
||||
],
|
||||
hobbyRule: [
|
||||
{
|
||||
name: 'minLength',
|
||||
value: 3,
|
||||
message: '至少选择三个爱好',
|
||||
triggers: 'change'
|
||||
}
|
||||
],
|
||||
isValidating: false,
|
||||
validators: [
|
||||
{
|
||||
fields: ['start', 'end'],
|
||||
handler (start, end) {
|
||||
if (start == null || end == null) {
|
||||
return true
|
||||
}
|
||||
|
||||
if (parseInt(start, 10) >= parseInt(end, 10)) {
|
||||
return {
|
||||
start: '下限必须小于上限'
|
||||
}
|
||||
}
|
||||
return true
|
||||
},
|
||||
triggers: ['change', 'submit,input']
|
||||
},
|
||||
{
|
||||
fields: ['phone'],
|
||||
validate (phone) {
|
||||
return new Promise(function (resolve) {
|
||||
setTimeout(function () {
|
||||
let res
|
||||
if (phone === '18888888888') {
|
||||
res = {
|
||||
phone: '该手机已被注册'
|
||||
}
|
||||
}
|
||||
return resolve(res)
|
||||
}, 3000)
|
||||
})
|
||||
},
|
||||
triggers: ['input']
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
beforeValidate () {
|
||||
this.isValidating = true
|
||||
},
|
||||
afterValidate () {
|
||||
this.isValidating = false
|
||||
},
|
||||
handleInvalid () {
|
||||
this.isValidating = false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
82
one/docs/demo/grid/default.vue
Normal file
82
one/docs/demo/grid/default.vue
Normal file
@@ -0,0 +1,82 @@
|
||||
<template>
|
||||
<article>
|
||||
<veui-grid-container>
|
||||
<veui-grid-row>
|
||||
<veui-grid-column :span="8">
|
||||
<div class="content">
|
||||
8/24
|
||||
</div>
|
||||
</veui-grid-column>
|
||||
<veui-grid-column :span="16">
|
||||
<div class="content">
|
||||
16/24
|
||||
</div>
|
||||
</veui-grid-column>
|
||||
</veui-grid-row>
|
||||
<veui-grid-row>
|
||||
<veui-grid-column :span="6">
|
||||
<div class="content">
|
||||
6/24
|
||||
</div>
|
||||
</veui-grid-column>
|
||||
<veui-grid-column :span="6">
|
||||
<div class="content">
|
||||
6/24
|
||||
</div>
|
||||
</veui-grid-column>
|
||||
<veui-grid-column :span="6">
|
||||
<div class="content">
|
||||
6/24
|
||||
</div>
|
||||
</veui-grid-column>
|
||||
<veui-grid-column :span="6">
|
||||
<div class="content">
|
||||
6/24
|
||||
</div>
|
||||
</veui-grid-column>
|
||||
</veui-grid-row>
|
||||
<veui-grid-row>
|
||||
<veui-grid-column :span="12">
|
||||
<div class="content">
|
||||
12/24
|
||||
</div>
|
||||
</veui-grid-column>
|
||||
<veui-grid-column :span="12">
|
||||
<div class="content">
|
||||
12/24
|
||||
</div>
|
||||
</veui-grid-column>
|
||||
</veui-grid-row>
|
||||
</veui-grid-container>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { GridContainer, GridRow, GridColumn } from 'veui'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-grid-container': GridContainer,
|
||||
'veui-grid-row': GridRow,
|
||||
'veui-grid-column': GridColumn
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.veui-grid-row {
|
||||
& + & {
|
||||
margin: 2px 0; /* Just for showcase */
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="less" scoped docs>
|
||||
.content {
|
||||
background-color: #eee;
|
||||
height: 100%;
|
||||
line-height: 60px;
|
||||
border-radius: 2px;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
77
one/docs/demo/grid/fixed.vue
Normal file
77
one/docs/demo/grid/fixed.vue
Normal file
@@ -0,0 +1,77 @@
|
||||
<template>
|
||||
<article>
|
||||
<veui-grid-container
|
||||
:columns="12"
|
||||
:gutter="10"
|
||||
:margin="0"
|
||||
>
|
||||
<veui-grid-row>
|
||||
<veui-grid-column :span="3">
|
||||
<div class="content">
|
||||
3/12
|
||||
</div>
|
||||
</veui-grid-column>
|
||||
<veui-grid-column :span="9">
|
||||
<div class="content">
|
||||
9/12
|
||||
</div>
|
||||
</veui-grid-column>
|
||||
</veui-grid-row>
|
||||
<veui-grid-row>
|
||||
<veui-grid-column :span="4">
|
||||
<div class="content">
|
||||
4/12
|
||||
</div>
|
||||
</veui-grid-column>
|
||||
<veui-grid-column :span="4">
|
||||
<div class="content">
|
||||
4/12
|
||||
</div>
|
||||
</veui-grid-column>
|
||||
<veui-grid-column :span="4">
|
||||
<div class="content">
|
||||
4/12
|
||||
</div>
|
||||
</veui-grid-column>
|
||||
</veui-grid-row>
|
||||
</veui-grid-container>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { GridContainer, GridRow, GridColumn } from 'veui'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-grid-container': GridContainer,
|
||||
'veui-grid-row': GridRow,
|
||||
'veui-grid-column': GridColumn
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
article {
|
||||
width: 400px; /* Fixed-width container */
|
||||
}
|
||||
|
||||
.veui-grid-row {
|
||||
& + & {
|
||||
margin: 2px 0; /* Just for showcase */
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="less" scoped docs>
|
||||
.content {
|
||||
background-color: #eee;
|
||||
height: 100%;
|
||||
line-height: 60px;
|
||||
border-radius: 2px;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
|
||||
<docs>
|
||||
可以在 `GridContainer` 上使用 `columns`/`margin`/`gutter` 调整布局参数。
|
||||
</docs>
|
68
one/docs/demo/icon/default.vue
Normal file
68
one/docs/demo/icon/default.vue
Normal file
@@ -0,0 +1,68 @@
|
||||
<template>
|
||||
<article>
|
||||
<div
|
||||
v-for="name in names"
|
||||
:key="name"
|
||||
class="item"
|
||||
>
|
||||
<div class="icon">
|
||||
<veui-icon :name="name"/>
|
||||
</div>
|
||||
<div class="name">
|
||||
{{ name }}
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Icon } from 'veui'
|
||||
import 'veui-theme-dls-icons'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-icon': Icon
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
names: Object.keys(Icon.icons).sort()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped docs>
|
||||
article {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.item {
|
||||
@grid-size: 128px;
|
||||
float: left;
|
||||
width: @grid-size;
|
||||
height: calc(@grid-size + 3em);
|
||||
text-align: center;
|
||||
margin: 1em 2em;
|
||||
|
||||
.icon {
|
||||
width: @grid-size;
|
||||
height: @grid-size;
|
||||
border: 1px solid transparent;
|
||||
font-size: 1.5em;
|
||||
line-height: @grid-size;
|
||||
border-radius: 4px;
|
||||
transition: border-color .2s;
|
||||
|
||||
&:hover {
|
||||
border-color: #ccc;
|
||||
}
|
||||
}
|
||||
|
||||
.name {
|
||||
margin-top: 0.6em;
|
||||
color: #333;
|
||||
font-size: 0.8em;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
</style>
|
126
one/docs/demo/input-group/default.vue
Normal file
126
one/docs/demo/input-group/default.vue
Normal file
@@ -0,0 +1,126 @@
|
||||
<template>
|
||||
<article>
|
||||
<section>
|
||||
<h4>Select + Input + Button</h4>
|
||||
<veui-input-group>
|
||||
<veui-select
|
||||
:options="protocols"
|
||||
style="width: 100px"
|
||||
/>
|
||||
<veui-input/>
|
||||
<veui-button ui="primary">
|
||||
Submit
|
||||
</veui-button>
|
||||
</veui-input-group>
|
||||
</section>
|
||||
<section>
|
||||
<h4>Label + NumberInput + Button + <code>ui="s"</code></h4>
|
||||
<veui-input-group ui="s">
|
||||
<veui-label for="bid">
|
||||
USD
|
||||
</veui-label>
|
||||
<veui-number-input
|
||||
ref="bid"
|
||||
v-model="bid"
|
||||
style="width: 120px"
|
||||
/>
|
||||
<veui-button>Submit</veui-button>
|
||||
</veui-input-group>
|
||||
</section>
|
||||
<section>
|
||||
<h4>NumberInput + Span + NumberInput + <code>ui="xs"</code></h4>
|
||||
<veui-input-group ui="xs">
|
||||
<veui-number-input v-model="width"/>
|
||||
<veui-span>×</veui-span>
|
||||
<veui-number-input v-model="height"/>
|
||||
</veui-input-group>
|
||||
</section>
|
||||
<section>
|
||||
<h4>Autocomplete + ButtonGroup</h4>
|
||||
<veui-input-group>
|
||||
<veui-autocomplete :datasource="suggestions"/>
|
||||
<veui-button-group
|
||||
:items="ops"
|
||||
ui="primary"
|
||||
/>
|
||||
</veui-input-group>
|
||||
</section>
|
||||
<section>
|
||||
<h4>Select + SearchBox + <code>ui="l"</code></h4>
|
||||
<veui-input-group ui="l">
|
||||
<veui-select
|
||||
:options="types"
|
||||
:value="type"
|
||||
style="width: 120px"
|
||||
/>
|
||||
<veui-search-box/>
|
||||
</veui-input-group>
|
||||
</section>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
InputGroup,
|
||||
ButtonGroup,
|
||||
Select,
|
||||
Input,
|
||||
NumberInput,
|
||||
Button,
|
||||
Autocomplete,
|
||||
SearchBox,
|
||||
Label,
|
||||
Span
|
||||
} from 'veui'
|
||||
|
||||
export default {
|
||||
name: 'text-input',
|
||||
components: {
|
||||
'veui-input-group': InputGroup,
|
||||
'veui-button-group': ButtonGroup,
|
||||
'veui-input': Input,
|
||||
'veui-select': Select,
|
||||
'veui-number-input': NumberInput,
|
||||
'veui-button': Button,
|
||||
'veui-autocomplete': Autocomplete,
|
||||
'veui-search-box': SearchBox,
|
||||
'veui-label': Label,
|
||||
'veui-span': Span
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
protocols: [
|
||||
{ label: 'https://', value: 'https' },
|
||||
{ label: 'http://', value: 'http' }
|
||||
],
|
||||
bid: 1024,
|
||||
width: 1024,
|
||||
height: 768,
|
||||
ops: [
|
||||
{ label: 'Save', value: 'save' },
|
||||
{ label: 'Submit', value: 'submit' }
|
||||
],
|
||||
types: [
|
||||
{ label: 'By ID', value: 'id' },
|
||||
{ label: 'By Name', value: 'name' }
|
||||
],
|
||||
type: 'id',
|
||||
suggestions: [
|
||||
{ value: 'Steve Rogers' },
|
||||
{ value: 'Tony Stark' },
|
||||
{ value: 'Thor' },
|
||||
{ value: 'Hulk' },
|
||||
{ value: 'Stephen Strange' },
|
||||
{ value: 'Natasha Romanov' },
|
||||
{ value: 'Loki' }
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped docs>
|
||||
section {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
</style>
|
61
one/docs/demo/input/disabled.vue
Normal file
61
one/docs/demo/input/disabled.vue
Normal file
@@ -0,0 +1,61 @@
|
||||
<template>
|
||||
<article>
|
||||
<section>
|
||||
<veui-checkbox v-model="disabled">
|
||||
Disabled
|
||||
</veui-checkbox>
|
||||
</section>
|
||||
<section>
|
||||
<p>
|
||||
<veui-input
|
||||
:disabled="disabled"
|
||||
ui="l"
|
||||
value="Large"
|
||||
/>
|
||||
</p>
|
||||
<p>
|
||||
<veui-input
|
||||
:disabled="disabled"
|
||||
value="Normal"
|
||||
/>
|
||||
</p>
|
||||
<p>
|
||||
<veui-input
|
||||
:disabled="disabled"
|
||||
ui="s"
|
||||
value="Small"
|
||||
/>
|
||||
</p>
|
||||
<p>
|
||||
<veui-input
|
||||
:disabled="disabled"
|
||||
ui="xs"
|
||||
value="Extra small"
|
||||
/>
|
||||
</p>
|
||||
</section>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Input, Checkbox } from 'veui'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-input': Input,
|
||||
'veui-checkbox': Checkbox
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
disabled: true
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped docs>
|
||||
section,
|
||||
p {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
</style>
|
61
one/docs/demo/input/readonly.vue
Normal file
61
one/docs/demo/input/readonly.vue
Normal file
@@ -0,0 +1,61 @@
|
||||
<template>
|
||||
<article>
|
||||
<section>
|
||||
<veui-checkbox v-model="readonly">
|
||||
Read-only
|
||||
</veui-checkbox>
|
||||
</section>
|
||||
<section>
|
||||
<p>
|
||||
<veui-input
|
||||
:readonly="readonly"
|
||||
ui="l"
|
||||
value="Large"
|
||||
/>
|
||||
</p>
|
||||
<p>
|
||||
<veui-input
|
||||
:readonly="readonly"
|
||||
value="Normal"
|
||||
/>
|
||||
</p>
|
||||
<p>
|
||||
<veui-input
|
||||
:readonly="readonly"
|
||||
ui="s"
|
||||
value="Small"
|
||||
/>
|
||||
</p>
|
||||
<p>
|
||||
<veui-input
|
||||
:readonly="readonly"
|
||||
ui="xs"
|
||||
value="Extra small"
|
||||
/>
|
||||
</p>
|
||||
</section>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Input, Checkbox } from 'veui'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-input': Input,
|
||||
'veui-checkbox': Checkbox
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
readonly: true
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped docs>
|
||||
section,
|
||||
p {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
</style>
|
39
one/docs/demo/input/size.vue
Normal file
39
one/docs/demo/input/size.vue
Normal file
@@ -0,0 +1,39 @@
|
||||
<template>
|
||||
<article>
|
||||
<p>
|
||||
<veui-input
|
||||
ui="l"
|
||||
value="Large"
|
||||
/>
|
||||
</p>
|
||||
<p><veui-input value="Normal"/></p>
|
||||
<p>
|
||||
<veui-input
|
||||
ui="s"
|
||||
value="Small"
|
||||
/>
|
||||
</p>
|
||||
<p>
|
||||
<veui-input
|
||||
ui="xs"
|
||||
value="Extra small"
|
||||
/>
|
||||
</p>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Input } from 'veui'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-input': Input
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped docs>
|
||||
p {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
</style>
|
55
one/docs/demo/label/default.vue
Normal file
55
one/docs/demo/label/default.vue
Normal file
@@ -0,0 +1,55 @@
|
||||
<template>
|
||||
<article>
|
||||
<section>
|
||||
<h4>Inline with Select</h4>
|
||||
<veui-label>
|
||||
Click me:
|
||||
<veui-select
|
||||
:options="protocols"
|
||||
style="width: 100px"
|
||||
/>
|
||||
</veui-label>
|
||||
</section>
|
||||
<section>
|
||||
<h4><code>for</code> + <code>ref</code> with Input</h4>
|
||||
<veui-label for="origin">
|
||||
Click me:
|
||||
</veui-label>
|
||||
<veui-input
|
||||
ref="origin"
|
||||
style="width: 200px"
|
||||
/>
|
||||
</section>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Label, Select, Input } from 'veui'
|
||||
|
||||
export default {
|
||||
name: 'text-input',
|
||||
components: {
|
||||
'veui-label': Label,
|
||||
'veui-select': Select,
|
||||
'veui-input': Input
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
protocols: [
|
||||
{ label: 'https://', value: 'https' },
|
||||
{ label: 'http://', value: 'http' }
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped docs>
|
||||
section {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
h4 {
|
||||
margin-top: 0;
|
||||
}
|
||||
</style>
|
55
one/docs/demo/link/default.vue
Normal file
55
one/docs/demo/link/default.vue
Normal file
@@ -0,0 +1,55 @@
|
||||
<template>
|
||||
<article>
|
||||
<section>
|
||||
<h4>Router link</h4>
|
||||
<div>
|
||||
<veui-link :to="{ name: 'components-icon' }">
|
||||
Previous
|
||||
</veui-link>
|
||||
</div>
|
||||
</section>
|
||||
<section>
|
||||
<h4>Native link (<code>ui="strong s"</code>)</h4>
|
||||
<div>
|
||||
<veui-link
|
||||
ui="strong s"
|
||||
native
|
||||
to="./pagination"
|
||||
>
|
||||
Next
|
||||
</veui-link>
|
||||
</div>
|
||||
</section>
|
||||
<section>
|
||||
<h4>External link</h4>
|
||||
<div>
|
||||
<veui-link
|
||||
to="https://www.baidu.com/"
|
||||
target="_blank"
|
||||
>
|
||||
Baidu
|
||||
</veui-link>
|
||||
</div>
|
||||
</section>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Link } from 'veui'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-link': Link
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped docs>
|
||||
h4 {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
section:not(:last-child) {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
</style>
|
34
one/docs/demo/loading/layout.vue
Normal file
34
one/docs/demo/loading/layout.vue
Normal file
@@ -0,0 +1,34 @@
|
||||
<template>
|
||||
<article class="container">
|
||||
<veui-loading loading>
|
||||
Horizontal
|
||||
</veui-loading>
|
||||
<veui-loading
|
||||
loading
|
||||
ui="vertical"
|
||||
>
|
||||
Vertical
|
||||
</veui-loading>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Loading } from 'veui'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-loading': Loading
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped docs>
|
||||
.container {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
|
||||
.veui-loading {
|
||||
margin-left: 1em;
|
||||
}
|
||||
}
|
||||
</style>
|
90
one/docs/demo/loading/size.vue
Normal file
90
one/docs/demo/loading/size.vue
Normal file
@@ -0,0 +1,90 @@
|
||||
<template>
|
||||
<article>
|
||||
<div class="container">
|
||||
<veui-loading
|
||||
loading
|
||||
ui="s"
|
||||
>
|
||||
s
|
||||
</veui-loading>
|
||||
<veui-loading
|
||||
loading
|
||||
ui="m"
|
||||
>
|
||||
m
|
||||
</veui-loading>
|
||||
<veui-loading
|
||||
loading
|
||||
ui="l"
|
||||
>
|
||||
l
|
||||
</veui-loading>
|
||||
</div>
|
||||
<div class="container">
|
||||
<veui-loading
|
||||
loading
|
||||
ui="strong s"
|
||||
>
|
||||
s
|
||||
</veui-loading>
|
||||
<veui-loading
|
||||
loading
|
||||
ui="strong m"
|
||||
>
|
||||
m
|
||||
</veui-loading>
|
||||
<veui-loading
|
||||
loading
|
||||
ui="strong l"
|
||||
>
|
||||
l
|
||||
</veui-loading>
|
||||
</div>
|
||||
<div class="container">
|
||||
<veui-loading
|
||||
loading
|
||||
class="reverse"
|
||||
ui="reverse s"
|
||||
>
|
||||
s
|
||||
</veui-loading>
|
||||
<veui-loading
|
||||
loading
|
||||
class="reverse"
|
||||
ui="reverse m"
|
||||
>
|
||||
m
|
||||
</veui-loading>
|
||||
<veui-loading
|
||||
loading
|
||||
class="reverse"
|
||||
ui="reverse l"
|
||||
>
|
||||
l
|
||||
</veui-loading>
|
||||
</div>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Loading } from 'veui'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-loading': Loading
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped docs-loading>
|
||||
.reverse {
|
||||
background: #ccc;
|
||||
padding: 8px;
|
||||
}
|
||||
.veui-loading {
|
||||
margin-left: 1em;
|
||||
}
|
||||
.container {
|
||||
margin-bottom: 2em;
|
||||
}
|
||||
</style>
|
68
one/docs/demo/loading/slot.vue
Normal file
68
one/docs/demo/loading/slot.vue
Normal file
@@ -0,0 +1,68 @@
|
||||
<template>
|
||||
<article>
|
||||
<div>
|
||||
Custom icon-star:
|
||||
<veui-loading
|
||||
loading
|
||||
ui="strong"
|
||||
>
|
||||
<template #spinner>
|
||||
<veui-icon
|
||||
spin
|
||||
name="star"
|
||||
/>
|
||||
</template>
|
||||
loading...
|
||||
</veui-loading>
|
||||
</div>
|
||||
<div>
|
||||
Custom icon-sun:
|
||||
<veui-loading loading>
|
||||
<template #spinner>
|
||||
<veui-icon
|
||||
spin
|
||||
name="sun"
|
||||
/>
|
||||
</template>
|
||||
loading...
|
||||
</veui-loading>
|
||||
</div>
|
||||
<div>
|
||||
Custom icon-umbrella:
|
||||
<veui-loading
|
||||
loading
|
||||
ui="reverse"
|
||||
class="reverse"
|
||||
>
|
||||
<template #spinner>
|
||||
<veui-icon
|
||||
spin
|
||||
name="umbrella"
|
||||
/>
|
||||
</template>
|
||||
loading...
|
||||
</veui-loading>
|
||||
</div>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Icon, Loading } from 'veui'
|
||||
import 'vue-awesome/icons/sun'
|
||||
import 'vue-awesome/icons/star'
|
||||
import 'vue-awesome/icons/umbrella'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-icon': Icon,
|
||||
'veui-loading': Loading
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped docs>
|
||||
.reverse {
|
||||
background: #ccc;
|
||||
padding: 8px;
|
||||
}
|
||||
</style>
|
43
one/docs/demo/loading/style.vue
Normal file
43
one/docs/demo/loading/style.vue
Normal file
@@ -0,0 +1,43 @@
|
||||
<template>
|
||||
<article>
|
||||
<veui-loading
|
||||
loading
|
||||
ui="normal"
|
||||
>
|
||||
Normal
|
||||
</veui-loading>
|
||||
<veui-loading
|
||||
loading
|
||||
ui="strong"
|
||||
>
|
||||
Strong
|
||||
</veui-loading>
|
||||
<veui-loading
|
||||
loading
|
||||
ui="reverse"
|
||||
class="reverse"
|
||||
>
|
||||
Reverse
|
||||
</veui-loading>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Loading } from 'veui'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-loading': Loading
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped docs>
|
||||
.veui-loading {
|
||||
margin-left: 1em;
|
||||
}
|
||||
.reverse {
|
||||
background: #ccc;
|
||||
padding: 8px;
|
||||
}
|
||||
</style>
|
97
one/docs/demo/menu/collaspible.vue
Normal file
97
one/docs/demo/menu/collaspible.vue
Normal file
@@ -0,0 +1,97 @@
|
||||
<template>
|
||||
<article>
|
||||
<section>
|
||||
<veui-menu
|
||||
:items="items"
|
||||
collapsible
|
||||
/>
|
||||
</section>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Menu } from 'veui'
|
||||
import 'veui-theme-dls-icons/calendar'
|
||||
import 'veui-theme-dls-icons/bullseye'
|
||||
import 'veui-theme-dls-icons/clock'
|
||||
import 'veui-theme-dls-icons/eye'
|
||||
|
||||
export default {
|
||||
name: 'veui-menu-demo',
|
||||
components: {
|
||||
'veui-menu': Menu
|
||||
},
|
||||
data () {
|
||||
let items = [
|
||||
{
|
||||
label: 'Group One',
|
||||
name: 'group-one',
|
||||
icon: 'calendar',
|
||||
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',
|
||||
icon: 'bullseye',
|
||||
children: [
|
||||
{
|
||||
label: 'Disabled',
|
||||
name: 'Disabled',
|
||||
disabled: true,
|
||||
children: [
|
||||
{
|
||||
label: 'Link',
|
||||
name: 'Link',
|
||||
to: '/components/link'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Navigation Three',
|
||||
name: 'nav-three',
|
||||
icon: 'eye',
|
||||
disabled: true
|
||||
},
|
||||
{
|
||||
label: 'Navigation Four',
|
||||
name: 'nav-four',
|
||||
icon: 'clock',
|
||||
children: [
|
||||
{
|
||||
label: 'Progress',
|
||||
to: '/components/progress'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
return {
|
||||
items
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
86
one/docs/demo/menu/normal.vue
Normal file
86
one/docs/demo/menu/normal.vue
Normal file
@@ -0,0 +1,86 @@
|
||||
<template>
|
||||
<article>
|
||||
<section>
|
||||
<veui-menu :items="items"/>
|
||||
</section>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Menu } from 'veui'
|
||||
|
||||
export default {
|
||||
name: 'veui-menu-demo',
|
||||
components: {
|
||||
'veui-menu': Menu
|
||||
},
|
||||
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>
|
95
one/docs/demo/menu/slot.vue
Normal file
95
one/docs/demo/menu/slot.vue
Normal file
@@ -0,0 +1,95 @@
|
||||
<template>
|
||||
<article>
|
||||
<section>
|
||||
<veui-menu
|
||||
:items="items"
|
||||
collapsible
|
||||
>
|
||||
<template #icon>
|
||||
<veui-icon name="calendar"/>
|
||||
</template>
|
||||
</veui-menu>
|
||||
</section>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Menu, Icon } from 'veui'
|
||||
import 'veui-theme-dls-icons/calendar'
|
||||
|
||||
export default {
|
||||
name: 'veui-menu-demo',
|
||||
components: {
|
||||
'veui-menu': Menu,
|
||||
'veui-icon': Icon
|
||||
},
|
||||
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>
|
55
one/docs/demo/number-input/disabled.vue
Normal file
55
one/docs/demo/number-input/disabled.vue
Normal file
@@ -0,0 +1,55 @@
|
||||
<template>
|
||||
<article>
|
||||
<section>
|
||||
<veui-checkbox v-model="disabled">
|
||||
禁用
|
||||
</veui-checkbox>
|
||||
</section>
|
||||
<section>
|
||||
<p>
|
||||
<veui-number-input
|
||||
v-model="value"
|
||||
:disabled="disabled"
|
||||
/>
|
||||
</p>
|
||||
<p>
|
||||
<veui-number-input
|
||||
v-model="value"
|
||||
:disabled="disabled"
|
||||
ui="s"
|
||||
/>
|
||||
</p>
|
||||
<p>
|
||||
<veui-number-input
|
||||
v-model="value"
|
||||
:disabled="disabled"
|
||||
ui="xs"
|
||||
/>
|
||||
</p>
|
||||
</section>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { NumberInput, Checkbox } from 'veui'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-number-input': NumberInput,
|
||||
'veui-checkbox': Checkbox
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
disabled: true,
|
||||
value: 0
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped docs>
|
||||
section,
|
||||
p {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
</style>
|
55
one/docs/demo/number-input/readonly.vue
Normal file
55
one/docs/demo/number-input/readonly.vue
Normal file
@@ -0,0 +1,55 @@
|
||||
<template>
|
||||
<article>
|
||||
<section>
|
||||
<veui-checkbox v-model="readonly">
|
||||
只读
|
||||
</veui-checkbox>
|
||||
</section>
|
||||
<section>
|
||||
<p>
|
||||
<veui-number-input
|
||||
v-model="value"
|
||||
:readonly="readonly"
|
||||
/>
|
||||
</p>
|
||||
<p>
|
||||
<veui-number-input
|
||||
v-model="value"
|
||||
:readonly="readonly"
|
||||
ui="s"
|
||||
/>
|
||||
</p>
|
||||
<p>
|
||||
<veui-number-input
|
||||
v-model="value"
|
||||
:readonly="readonly"
|
||||
ui="xs"
|
||||
/>
|
||||
</p>
|
||||
</section>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { NumberInput, Checkbox } from 'veui'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-number-input': NumberInput,
|
||||
'veui-checkbox': Checkbox
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
readonly: true,
|
||||
value: 0
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped docs>
|
||||
section,
|
||||
p {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
</style>
|
40
one/docs/demo/number-input/size.vue
Normal file
40
one/docs/demo/number-input/size.vue
Normal file
@@ -0,0 +1,40 @@
|
||||
<template>
|
||||
<article>
|
||||
<p>
|
||||
<veui-number-input v-model="value"/>
|
||||
</p>
|
||||
<p>
|
||||
<veui-number-input
|
||||
v-model="value"
|
||||
ui="s"
|
||||
/>
|
||||
</p>
|
||||
<p>
|
||||
<veui-number-input
|
||||
v-model="value"
|
||||
ui="xs"
|
||||
/>
|
||||
</p>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { NumberInput } from 'veui'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-number-input': NumberInput
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
value: 0
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped docs>
|
||||
p {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
</style>
|
67
one/docs/demo/overlay/position.vue
Normal file
67
one/docs/demo/overlay/position.vue
Normal file
@@ -0,0 +1,67 @@
|
||||
<template>
|
||||
<article>
|
||||
<veui-button
|
||||
ref="toggle"
|
||||
@click="open = !open"
|
||||
>
|
||||
Toggle
|
||||
</veui-button>
|
||||
<veui-overlay
|
||||
:open.sync="open"
|
||||
overlay-class="centered-overlay"
|
||||
>
|
||||
<div v-outside:toggle="hide">
|
||||
Centered
|
||||
</div>
|
||||
</veui-overlay>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Overlay, Button } from 'veui'
|
||||
import outside from 'veui/directives/outside'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-overlay': Overlay,
|
||||
'veui-button': Button
|
||||
},
|
||||
directives: { outside },
|
||||
data () {
|
||||
return {
|
||||
open: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
hide () {
|
||||
this.open = false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.centered-overlay {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 200px;
|
||||
height: 100px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="less" docs>
|
||||
@import "~veui-theme-dls/lib.less";
|
||||
|
||||
.centered-overlay {
|
||||
line-height: 100px;
|
||||
text-align: center;
|
||||
border: 1px solid @veui-gray-color-5;
|
||||
background-color: #fff;
|
||||
}
|
||||
</style>
|
||||
|
||||
<docs>
|
||||
使用常见的 CSS 定位方法,可以自定义。
|
||||
</docs>
|
45
one/docs/demo/overlay/relative-base.vue
Normal file
45
one/docs/demo/overlay/relative-base.vue
Normal file
@@ -0,0 +1,45 @@
|
||||
<template>
|
||||
<article>
|
||||
<veui-button
|
||||
ref="toggle"
|
||||
@click="open = !open"
|
||||
>
|
||||
Toggle
|
||||
</veui-button>
|
||||
<veui-overlay
|
||||
target="toggle"
|
||||
position="top-start"
|
||||
:open.sync="open"
|
||||
overlay-class="relative-overlay"
|
||||
>
|
||||
<div v-outside:toggle="hide">
|
||||
Relatively Positioned
|
||||
</div>
|
||||
</veui-overlay>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Overlay, Button } from 'veui'
|
||||
import outside from 'veui/directives/outside'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-overlay': Overlay,
|
||||
'veui-button': Button
|
||||
},
|
||||
directives: { outside },
|
||||
data () {
|
||||
return {
|
||||
open: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
hide () {
|
||||
this.open = false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" src="./relative.less" docs></style>
|
18
one/docs/demo/overlay/relative.less
Normal file
18
one/docs/demo/overlay/relative.less
Normal file
@@ -0,0 +1,18 @@
|
||||
@import "~veui-theme-dls/lib.less";
|
||||
|
||||
.veui-overlay {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.relative-overlay {
|
||||
width: 200px;
|
||||
height: 100px;
|
||||
line-height: 100px;
|
||||
text-align: center;
|
||||
border: 1px solid @veui-gray-color-5;
|
||||
background-color: #fff;
|
||||
|
||||
.veui-button {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
100
one/docs/demo/overlay/stack-display-order-with-on-overlay.vue
Normal file
100
one/docs/demo/overlay/stack-display-order-with-on-overlay.vue
Normal file
@@ -0,0 +1,100 @@
|
||||
<template>
|
||||
<article>
|
||||
<veui-button
|
||||
ref="a"
|
||||
@click="aOpen = !aOpen"
|
||||
>
|
||||
Toggle A
|
||||
</veui-button>
|
||||
<veui-overlay
|
||||
target="a"
|
||||
position="top-start"
|
||||
:open.sync="aOpen"
|
||||
overlay-class="relative-overlay"
|
||||
>
|
||||
A
|
||||
</veui-overlay>
|
||||
|
||||
<veui-button
|
||||
ref="b"
|
||||
@click="bOpen = !bOpen"
|
||||
>
|
||||
Toggle B
|
||||
</veui-button>
|
||||
<veui-overlay
|
||||
target="b"
|
||||
position="top-start"
|
||||
:open.sync="bOpen"
|
||||
overlay-class="relative-overlay"
|
||||
>
|
||||
B
|
||||
<veui-button
|
||||
ref="b-a"
|
||||
ui="s"
|
||||
@click="bAOpen = !bAOpen"
|
||||
>
|
||||
Toggle B-A
|
||||
</veui-button>
|
||||
<veui-overlay
|
||||
target="b-a"
|
||||
position="top-start"
|
||||
:open.sync="bAOpen"
|
||||
overlay-class="relative-overlay"
|
||||
>
|
||||
B-A
|
||||
</veui-overlay>
|
||||
</veui-overlay>
|
||||
|
||||
<veui-button
|
||||
ref="c"
|
||||
@click="cOpen = !cOpen"
|
||||
>
|
||||
Toggle C
|
||||
</veui-button>
|
||||
<veui-overlay
|
||||
target="c"
|
||||
position="top-start"
|
||||
:open.sync="cOpen"
|
||||
overlay-class="relative-overlay"
|
||||
>
|
||||
C
|
||||
</veui-overlay>
|
||||
<veui-button
|
||||
ui="xs"
|
||||
@click="aOpen = bOpen = cOpen = bAOpen = false"
|
||||
>
|
||||
Hide all
|
||||
</veui-button>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Overlay, Button } from 'veui'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-overlay': Overlay,
|
||||
'veui-button': Button
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
aOpen: false,
|
||||
bOpen: false,
|
||||
cOpen: false,
|
||||
bAOpen: false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" docs scoped>
|
||||
.veui-overlay {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.veui-button {
|
||||
margin-right: 10px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="less" src="./relative.less" docs></style>
|
84
one/docs/demo/overlay/stack-display-order.vue
Normal file
84
one/docs/demo/overlay/stack-display-order.vue
Normal file
@@ -0,0 +1,84 @@
|
||||
<template>
|
||||
<article>
|
||||
<veui-button
|
||||
ref="a"
|
||||
@click="aOpen = !aOpen"
|
||||
>
|
||||
Toggle A
|
||||
</veui-button>
|
||||
<veui-overlay
|
||||
target="a"
|
||||
position="top-start"
|
||||
:open.sync="aOpen"
|
||||
overlay-class="relative-overlay"
|
||||
>
|
||||
A
|
||||
</veui-overlay>
|
||||
|
||||
<veui-button
|
||||
ref="b"
|
||||
@click="bOpen = !bOpen"
|
||||
>
|
||||
Toggle B
|
||||
</veui-button>
|
||||
<veui-overlay
|
||||
target="b"
|
||||
position="top-start"
|
||||
:open.sync="bOpen"
|
||||
overlay-class="relative-overlay"
|
||||
>
|
||||
B
|
||||
</veui-overlay>
|
||||
|
||||
<veui-button
|
||||
ref="c"
|
||||
@click="cOpen = !cOpen"
|
||||
>
|
||||
Toggle C
|
||||
</veui-button>
|
||||
<veui-overlay
|
||||
target="c"
|
||||
position="top-start"
|
||||
:open.sync="cOpen"
|
||||
overlay-class="relative-overlay"
|
||||
>
|
||||
C
|
||||
</veui-overlay>
|
||||
<veui-button
|
||||
ui="xs"
|
||||
@click="aOpen = bOpen = cOpen = false"
|
||||
>
|
||||
Hide all
|
||||
</veui-button>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Overlay, Button } from 'veui'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-overlay': Overlay,
|
||||
'veui-button': Button
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
aOpen: false,
|
||||
bOpen: false,
|
||||
cOpen: false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" docs scoped>
|
||||
.veui-overlay {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.veui-button {
|
||||
margin-right: 10px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="less" src="./relative.less" docs></style>
|
69
one/docs/demo/overlay/stack-on-overlay.vue
Normal file
69
one/docs/demo/overlay/stack-on-overlay.vue
Normal file
@@ -0,0 +1,69 @@
|
||||
<template>
|
||||
<article>
|
||||
<veui-button
|
||||
ref="parent"
|
||||
@click="parentOpen = !parentOpen"
|
||||
>
|
||||
Toggle
|
||||
</veui-button>
|
||||
<veui-overlay
|
||||
target="parent"
|
||||
position="top-start"
|
||||
:open.sync="parentOpen"
|
||||
overlay-class="relative-overlay"
|
||||
>
|
||||
<veui-button
|
||||
ref="child"
|
||||
@click="childOpen = !childOpen"
|
||||
>
|
||||
Toggle
|
||||
</veui-button>
|
||||
<veui-overlay
|
||||
target="child"
|
||||
position="top-start"
|
||||
:open.sync="childOpen"
|
||||
overlay-class="relative-overlay"
|
||||
>
|
||||
Child Overlay
|
||||
</veui-overlay>
|
||||
</veui-overlay>
|
||||
<veui-button
|
||||
ui="xs"
|
||||
@click="parentOpen = childOpen = false"
|
||||
>
|
||||
Hide all
|
||||
</veui-button>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Overlay, Button } from 'veui'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-overlay': Overlay,
|
||||
'veui-button': Button
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
parentOpen: false,
|
||||
childOpen: false
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
parentOpen (val) {
|
||||
if (!val) {
|
||||
this.childOpen = false
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" docs scoped>
|
||||
.veui-button {
|
||||
margin-right: 10px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="less" src="./relative.less" docs></style>
|
37
one/docs/demo/pagination/goto.vue
Normal file
37
one/docs/demo/pagination/goto.vue
Normal file
@@ -0,0 +1,37 @@
|
||||
<template>
|
||||
<article>
|
||||
<veui-pagination
|
||||
:page="page"
|
||||
:total="total"
|
||||
:to="to"
|
||||
goto
|
||||
/>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Pagination } from 'veui'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-pagination': Pagination
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
to: './pagination?page=:page',
|
||||
total: 10101
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
page () {
|
||||
return Number(this.$route.query.page) || 1
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped docs>
|
||||
article {
|
||||
text-align: right;
|
||||
}
|
||||
</style>
|
52
one/docs/demo/pagination/size.vue
Normal file
52
one/docs/demo/pagination/size.vue
Normal file
@@ -0,0 +1,52 @@
|
||||
<template>
|
||||
<article>
|
||||
<veui-pagination
|
||||
:page="page"
|
||||
:total="total"
|
||||
:to="to"
|
||||
/>
|
||||
<veui-pagination
|
||||
:page="page"
|
||||
:total="total"
|
||||
:to="to"
|
||||
ui="s"
|
||||
/>
|
||||
<veui-pagination
|
||||
:page="page"
|
||||
:total="total"
|
||||
:to="to"
|
||||
ui="xs"
|
||||
/>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Pagination } from 'veui'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-pagination': Pagination
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
to: './pagination?page=:page',
|
||||
total: 10101
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
page () {
|
||||
return Number(this.$route.query.page) || 1
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped docs>
|
||||
article {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.veui-pagination {
|
||||
margin: 1.2em 0;
|
||||
}
|
||||
</style>
|
224
one/docs/demo/popover/position.vue
Normal file
224
one/docs/demo/popover/position.vue
Normal file
@@ -0,0 +1,224 @@
|
||||
<template>
|
||||
<article>
|
||||
<veui-grid-container :columns="5">
|
||||
<veui-grid-row>
|
||||
<veui-grid-column
|
||||
:span="1"
|
||||
:offset="1"
|
||||
>
|
||||
<span
|
||||
ref="ts"
|
||||
class="target"
|
||||
>top-start</span>
|
||||
<veui-popover
|
||||
target="ts"
|
||||
position="top-start"
|
||||
>
|
||||
Hello.
|
||||
</veui-popover>
|
||||
</veui-grid-column>
|
||||
<veui-grid-column :span="1">
|
||||
<span
|
||||
ref="t"
|
||||
class="target"
|
||||
>top</span>
|
||||
<veui-popover
|
||||
target="t"
|
||||
position="top"
|
||||
>
|
||||
Hello.
|
||||
</veui-popover>
|
||||
</veui-grid-column>
|
||||
<veui-grid-column :span="1">
|
||||
<span
|
||||
ref="te"
|
||||
class="target"
|
||||
>top-end</span>
|
||||
<veui-popover
|
||||
target="te"
|
||||
position="top-end"
|
||||
>
|
||||
Hello.
|
||||
</veui-popover>
|
||||
</veui-grid-column>
|
||||
</veui-grid-row>
|
||||
<veui-grid-row>
|
||||
<veui-grid-column :span="1">
|
||||
<span
|
||||
ref="ls"
|
||||
class="target"
|
||||
>left-start</span>
|
||||
<veui-popover
|
||||
target="ls"
|
||||
position="left-start"
|
||||
>
|
||||
Hello.
|
||||
</veui-popover>
|
||||
</veui-grid-column>
|
||||
<veui-grid-column
|
||||
:span="1"
|
||||
:offset="3"
|
||||
>
|
||||
<span
|
||||
ref="rs"
|
||||
class="target"
|
||||
>right-start</span>
|
||||
<veui-popover
|
||||
target="rs"
|
||||
position="right-start"
|
||||
>
|
||||
Hello.
|
||||
</veui-popover>
|
||||
</veui-grid-column>
|
||||
</veui-grid-row>
|
||||
<veui-grid-row>
|
||||
<veui-grid-column :span="1">
|
||||
<span
|
||||
ref="l"
|
||||
class="target"
|
||||
>left</span>
|
||||
<veui-popover
|
||||
target="l"
|
||||
position="left"
|
||||
>
|
||||
Hello.
|
||||
</veui-popover>
|
||||
</veui-grid-column>
|
||||
<veui-grid-column
|
||||
:span="1"
|
||||
:offset="3"
|
||||
>
|
||||
<span
|
||||
ref="r"
|
||||
class="target"
|
||||
>right</span>
|
||||
<veui-popover
|
||||
target="r"
|
||||
position="right"
|
||||
>
|
||||
Hello.
|
||||
</veui-popover>
|
||||
</veui-grid-column>
|
||||
</veui-grid-row>
|
||||
<veui-grid-row>
|
||||
<veui-grid-column :span="1">
|
||||
<span
|
||||
ref="le"
|
||||
class="target"
|
||||
>left-end</span>
|
||||
<veui-popover
|
||||
target="le"
|
||||
position="left-end"
|
||||
>
|
||||
Hello.
|
||||
</veui-popover>
|
||||
</veui-grid-column>
|
||||
<veui-grid-column
|
||||
:span="1"
|
||||
:offset="3"
|
||||
>
|
||||
<span
|
||||
ref="re"
|
||||
class="target"
|
||||
>right-end</span>
|
||||
<veui-popover
|
||||
target="re"
|
||||
position="right-end"
|
||||
>
|
||||
Hello.
|
||||
</veui-popover>
|
||||
</veui-grid-column>
|
||||
</veui-grid-row>
|
||||
<veui-grid-row>
|
||||
<veui-grid-column
|
||||
:span="1"
|
||||
:offset="1"
|
||||
>
|
||||
<span
|
||||
ref="bs"
|
||||
class="target"
|
||||
>bottom-start</span>
|
||||
<veui-popover
|
||||
target="bs"
|
||||
position="bottom-start"
|
||||
>
|
||||
Hello.
|
||||
</veui-popover>
|
||||
</veui-grid-column>
|
||||
<veui-grid-column :span="1">
|
||||
<span
|
||||
ref="b"
|
||||
class="target"
|
||||
>bottom</span>
|
||||
<veui-popover
|
||||
target="b"
|
||||
position="bottom"
|
||||
>
|
||||
Hello.
|
||||
</veui-popover>
|
||||
</veui-grid-column>
|
||||
<veui-grid-column :span="1">
|
||||
<span
|
||||
ref="be"
|
||||
class="target"
|
||||
>bottom-end</span>
|
||||
<veui-popover
|
||||
target="be"
|
||||
position="bottom-end"
|
||||
>
|
||||
Hello.
|
||||
</veui-popover>
|
||||
</veui-grid-column>
|
||||
</veui-grid-row>
|
||||
</veui-grid-container>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { GridContainer, GridRow, GridColumn, Popover } from 'veui'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-grid-container': GridContainer,
|
||||
'veui-grid-row': GridRow,
|
||||
'veui-grid-column': GridColumn,
|
||||
'veui-popover': Popover
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
ui: null
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped docs>
|
||||
.veui-grid-container {
|
||||
width: 80%;
|
||||
min-width: 600px;
|
||||
}
|
||||
|
||||
.veui-grid-row {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.veui-grid-column {
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
line-height: 2;
|
||||
}
|
||||
|
||||
.target {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
padding: 0.5em 0;
|
||||
border: 1px solid #999;
|
||||
border-radius: 2px;
|
||||
transition: background-color 0.3s;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background-color: #f7f7f7;
|
||||
}
|
||||
}
|
||||
</style>
|
78
one/docs/demo/popover/trigger.vue
Normal file
78
one/docs/demo/popover/trigger.vue
Normal file
@@ -0,0 +1,78 @@
|
||||
<template>
|
||||
<article>
|
||||
<section>
|
||||
<code>trigger="{{ trigger }}"</code>
|
||||
</section>
|
||||
<section>
|
||||
Open trigger: <veui-select
|
||||
v-model="open"
|
||||
:options="triggers"
|
||||
/>
|
||||
</section>
|
||||
<section>
|
||||
Close trigger: <veui-select
|
||||
v-model="close"
|
||||
:options="triggers"
|
||||
/>
|
||||
</section>
|
||||
<section>
|
||||
<span
|
||||
ref="text"
|
||||
tabindex="0"
|
||||
>Trigger <b><code>{{ open }}</code></b> over here.</span>
|
||||
<veui-popover
|
||||
target="text"
|
||||
:trigger="trigger"
|
||||
>
|
||||
This is a popover.
|
||||
</veui-popover>
|
||||
</section>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Popover, Select } from 'veui'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-popover': Popover,
|
||||
'veui-select': Select
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
open: 'hover',
|
||||
close: 'hover',
|
||||
triggers: [
|
||||
{ label: 'hover', value: 'hover' },
|
||||
{ label: 'click', value: 'click' },
|
||||
{ label: 'mousedown', value: 'mousedown' },
|
||||
{ label: 'mouseup', value: 'mouseup' },
|
||||
{ label: 'focus', value: 'focus' }
|
||||
]
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
trigger () {
|
||||
if (this.open === this.close) {
|
||||
return this.open
|
||||
}
|
||||
return `${this.open}-${this.close}`
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped docs>
|
||||
section + section {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
span {
|
||||
outline: none;
|
||||
|
||||
&.focus-visible {
|
||||
outline: 2px solid #ccc;
|
||||
outline-offset: 3px;
|
||||
}
|
||||
}
|
||||
</style>
|
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user