initial
This commit is contained in:
@@ -1,29 +0,0 @@
|
||||
<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 scoped>
|
||||
section {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,60 +0,0 @@
|
||||
<template>
|
||||
<article>
|
||||
<section>
|
||||
<div class="control-wrap">
|
||||
<veui-radio-button-group
|
||||
v-model="position"
|
||||
class="control-item"
|
||||
ui="s"
|
||||
:items="positions"
|
||||
/>
|
||||
</div>
|
||||
<veui-accordion :toggle-position="position">
|
||||
<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, RadioButtonGroup } from 'veui'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-accordion': Accordion,
|
||||
'veui-collapse': Collapse,
|
||||
'veui-radio-button-group': RadioButtonGroup
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
position: 'start',
|
||||
positions: [
|
||||
{ label: 'start', value: 'start' },
|
||||
{ label: 'end', value: 'end' },
|
||||
{ label: 'none', value: 'none' }
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
section {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.control-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.control-item {
|
||||
margin-right: 12px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,41 +0,0 @@
|
||||
<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 scoped>
|
||||
section {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,87 +0,0 @@
|
||||
<template>
|
||||
<article>
|
||||
<section>
|
||||
<div class="control-wrap">
|
||||
<veui-radio-button-group
|
||||
v-model="variant"
|
||||
ui="s"
|
||||
class="control-item"
|
||||
:items="variants"
|
||||
/>
|
||||
<veui-radio-button-group
|
||||
v-model="bordered"
|
||||
ui="s"
|
||||
class="control-item"
|
||||
:items="[
|
||||
{ label: 'default', value: '' },
|
||||
{ label: 'bordered', value: 'bordered' },
|
||||
{ label: 'borderless', value: 'borderless' }
|
||||
]"
|
||||
/>
|
||||
<veui-check-button-group
|
||||
v-model="dull"
|
||||
ui="s"
|
||||
class="control-item"
|
||||
:items="[{ label: 'dull', value: 'dull' }]"
|
||||
/>
|
||||
</div>
|
||||
<veui-accordion :ui="realVariants">
|
||||
<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, RadioButtonGroup, CheckButtonGroup } from 'veui'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-accordion': Accordion,
|
||||
'veui-collapse': Collapse,
|
||||
'veui-radio-button-group': RadioButtonGroup,
|
||||
'veui-check-button-group': CheckButtonGroup
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
variants: [
|
||||
{ label: 'default', value: '' },
|
||||
{ label: 'simple', value: 'simple' },
|
||||
{ label: 'basic', value: 'basic' },
|
||||
{ label: 'strong', value: 'strong' }
|
||||
],
|
||||
variant: '',
|
||||
bordered: '',
|
||||
dull: null
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
realVariants () {
|
||||
return [this.variant, this.bordered || '', this.dull || '']
|
||||
.join(' ')
|
||||
.trim()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
section {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.control-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.control-item {
|
||||
margin-right: 12px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,65 +0,0 @@
|
||||
<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, toast } from 'veui'
|
||||
import 'veui-theme-dls-icons/info-circle'
|
||||
|
||||
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>
|
||||
.veui-button {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.icon {
|
||||
vertical-align: -2px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,67 +0,0 @@
|
||||
<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>
|
||||
.veui-button {
|
||||
margin-right: 10px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,37 +0,0 @@
|
||||
<template>
|
||||
<article>
|
||||
<veui-alert
|
||||
type="success"
|
||||
ui="strong"
|
||||
message="恭喜你，你的请求已成功处理"
|
||||
closable
|
||||
>
|
||||
<template #title>
|
||||
恭喜你
|
||||
</template>
|
||||
<template #extra>
|
||||
<veui-button ui="text">
|
||||
查看详情
|
||||
</veui-button>
|
||||
</template>
|
||||
恭喜你，你的请求已成功处理
|
||||
</veui-alert>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Alert, Button } from 'veui'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-alert': Alert,
|
||||
'veui-button': Button
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.veui-alert {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,46 +0,0 @@
|
||||
<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`](#props-closable) 属性为 `true` 来允许提示被用户主动关闭，还可以通过指定 [`close-label`](#props-close-label) 属性来将关闭按钮以文字形式展现。
|
||||
</docs>
|
||||
|
||||
<docs locale="en-US">
|
||||
Set the [`closable`](#props-closable) prop to `true` to allow the alert message to be closed by users. You can also use the [`close-label`](#props-close-label) prop to make the close button shown as specified text.
|
||||
</docs>
|
||||
@@ -1,38 +0,0 @@
|
||||
<template>
|
||||
<article>
|
||||
<veui-alert
|
||||
type="success"
|
||||
title="消息标题"
|
||||
>
|
||||
Your profile has been updated.
|
||||
</veui-alert>
|
||||
<veui-alert
|
||||
type="success"
|
||||
>
|
||||
Your profile has been updated.
|
||||
<template #title>
|
||||
消息标题
|
||||
</template>
|
||||
</veui-alert>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Alert } from 'veui'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-alert': Alert
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.veui-alert {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<docs>
|
||||
可将消息标题写在 `title` 插槽中，也可以通过 `title` 属性进行指定。
|
||||
</docs>
|
||||
@@ -1,41 +0,0 @@
|
||||
<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>slot-scope</code> is deprecated. Use <code>v-slot</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>
|
||||
.veui-alert {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<docs>
|
||||
可将消息内容写在默认插槽中，也可以通过 [`message`](#props-message) 属性进行指定。
|
||||
</docs>
|
||||
|
||||
<docs locale="en-US">
|
||||
Messages can either be specified in the default slot, or via the [`message`](#props-message) prop.
|
||||
</docs>
|
||||
@@ -1,108 +0,0 @@
|
||||
<template>
|
||||
<article class="anchor-offset-demo">
|
||||
<div
|
||||
ref="container"
|
||||
class="anchor-wrapper"
|
||||
>
|
||||
<div
|
||||
v-for="i in coffees"
|
||||
:id="i.value.indexOf('#') >= 0 ? i.value.slice(1) : i.value"
|
||||
:key="i.value"
|
||||
class="block"
|
||||
>
|
||||
{{ i.label }}
|
||||
</div>
|
||||
</div>
|
||||
<section class="anchor-two">
|
||||
<veui-anchor
|
||||
:items="coffees"
|
||||
container="container"
|
||||
/>
|
||||
</section>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Anchor } from 'veui'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-anchor': Anchor
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
coffees: [
|
||||
{
|
||||
label: 'Infused',
|
||||
value: '#infused',
|
||||
children: [
|
||||
{
|
||||
label: 'Breadcrumb',
|
||||
value: '/components/breadcrumb'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Boiled',
|
||||
value: '#boiled',
|
||||
children: [
|
||||
{
|
||||
label: 'Button',
|
||||
value: '/components/button'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Espresso',
|
||||
value: '#espresso'
|
||||
},
|
||||
{
|
||||
label: 'Milk coffee',
|
||||
value: '#milk-coffee'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.anchor-offset-demo {
|
||||
position: relative;
|
||||
|
||||
.anchor-wrapper {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 300px;
|
||||
overflow: auto;
|
||||
border: 1px dashed;
|
||||
|
||||
& > section {
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
|
||||
.block {
|
||||
white-space: nowrap;
|
||||
border-top: 1px solid #000;
|
||||
width: 100px;
|
||||
height: 150px;
|
||||
flex: none;
|
||||
|
||||
& + .block {
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.anchor-two {
|
||||
position: absolute;
|
||||
left: 250px;
|
||||
top: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<docs>
|
||||
虚线框标记容器，实线标记锚点项顶部，当二者重合触发激活。
|
||||
</docs>
|
||||
@@ -1,143 +0,0 @@
|
||||
<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: '#infused1',
|
||||
children: [
|
||||
{
|
||||
label: 'Breadcrumb',
|
||||
value: '/components/breadcrumb'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Boiled',
|
||||
value: '#boiled1',
|
||||
children: [
|
||||
{
|
||||
label: 'Button',
|
||||
value: '/components/button'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Espresso',
|
||||
value: '#espresso1'
|
||||
},
|
||||
{
|
||||
label: 'Milk coffee',
|
||||
value: '#milk-coffee1'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.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（切换于此）";
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
color: red;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.sticky-offset-line {
|
||||
top: 30px;
|
||||
left: 250px;
|
||||
|
||||
&::after {
|
||||
content: "stickyOffset（吸附于此）";
|
||||
}
|
||||
}
|
||||
|
||||
.anchor-wrapper {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 300px;
|
||||
overflow: auto;
|
||||
border: 1px dashed;
|
||||
|
||||
& > section {
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
|
||||
.block {
|
||||
white-space: nowrap;
|
||||
border-top: 1px solid #000;
|
||||
width: 100px;
|
||||
height: 150px;
|
||||
flex: none;
|
||||
|
||||
& + .block {
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.anchor-two {
|
||||
position: absolute;
|
||||
left: 250px;
|
||||
top: 50px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<docs>
|
||||
虚线框标记容器，黑实线标记锚点项顶部。
|
||||
|
||||
当黑实线和 `tagetOffset` 线重合触发激活。
|
||||
|
||||
`Anchor` 吸附在 `stickyOffset` 线处。
|
||||
</docs>
|
||||
@@ -1,115 +0,0 @@
|
||||
<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-two">
|
||||
<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: '#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>
|
||||
.anchor-demo {
|
||||
position: relative;
|
||||
|
||||
.anchor-wrapper {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 300px;
|
||||
overflow: auto;
|
||||
border: 1px dashed;
|
||||
|
||||
& > section {
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
|
||||
.block {
|
||||
white-space: nowrap;
|
||||
border-top: 1px solid #000;
|
||||
width: 100px;
|
||||
height: 150px;
|
||||
flex: none;
|
||||
|
||||
& + .block {
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.anchor-one {
|
||||
position: absolute;
|
||||
left: 250px;
|
||||
top: 50px;
|
||||
}
|
||||
|
||||
.anchor-two {
|
||||
position: absolute;
|
||||
left: 250px;
|
||||
top: 50px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<docs>
|
||||
虚线框标记容器，实线标记锚点项顶部，当二者重合触发激活。
|
||||
</docs>
|
||||
@@ -1,72 +0,0 @@
|
||||
<template>
|
||||
<article class="autocomplete-normal-demo">
|
||||
<section>
|
||||
<h3>大小写敏感搜索叶子节点</h3>
|
||||
<veui-autocomplete
|
||||
:datasource="suggestions"
|
||||
placeholder="请输入"
|
||||
suggest-trigger="focus"
|
||||
:match="match"
|
||||
:filter="filter"
|
||||
/>
|
||||
</section>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Autocomplete } from 'veui'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-autocomplete': Autocomplete
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
suggestions: [
|
||||
{
|
||||
label: 'Milk coffee',
|
||||
value: 'milk-coffee',
|
||||
options: [
|
||||
{
|
||||
value: 'Moka'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: 'Turkish'
|
||||
},
|
||||
{
|
||||
value: 'latte'
|
||||
},
|
||||
{
|
||||
value: 'cappuccino'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
match ({ label }, keyword) {
|
||||
const index = label.indexOf(keyword)
|
||||
return index >= 0
|
||||
? [[index, index + keyword.length]]
|
||||
: false
|
||||
},
|
||||
filter ({ options }, _, { offsets }) {
|
||||
// 不要父节点，只要叶子节点
|
||||
return options && options.length
|
||||
? false
|
||||
: offsets === true || (!!offsets && !!offsets.length)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.autocomplete-normal-demo {
|
||||
display: flex;
|
||||
|
||||
section + section {
|
||||
margin-left: 60px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,114 +0,0 @@
|
||||
<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>
|
||||
@@ -1,50 +0,0 @@
|
||||
<template>
|
||||
<article class="autocomplete-normal-demo">
|
||||
<section>
|
||||
<veui-autocomplete
|
||||
:datasource="suggestions"
|
||||
placeholder="请输入"
|
||||
suggest-trigger="focus"
|
||||
strict
|
||||
/>
|
||||
</section>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Autocomplete } from 'veui'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-autocomplete': Autocomplete
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
suggestions: [
|
||||
{
|
||||
value: 'Moka'
|
||||
},
|
||||
{
|
||||
value: 'Turkish'
|
||||
},
|
||||
{
|
||||
value: 'latte'
|
||||
},
|
||||
{
|
||||
value: 'cappuccino'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.autocomplete-normal-demo {
|
||||
display: flex;
|
||||
|
||||
section + section {
|
||||
margin-left: 60px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,43 +0,0 @@
|
||||
<template>
|
||||
<article>
|
||||
<section>
|
||||
<veui-badge type="success">
|
||||
Running
|
||||
</veui-badge>
|
||||
<veui-badge type="info">
|
||||
New
|
||||
</veui-badge>
|
||||
<veui-badge>
|
||||
Rejected
|
||||
</veui-badge>
|
||||
<veui-badge type="warning">
|
||||
Auditing
|
||||
</veui-badge>
|
||||
<veui-badge type="aux">
|
||||
Expired
|
||||
</veui-badge>
|
||||
</section>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Badge } from 'veui'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-badge': Badge
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
section {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
.veui-badge {
|
||||
& + & {
|
||||
margin-left: 30px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,45 +0,0 @@
|
||||
<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>
|
||||
section {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
.veui-badge {
|
||||
& + & {
|
||||
margin-left: 30px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,61 +0,0 @@
|
||||
<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>
|
||||
.veui-badge {
|
||||
margin-right: 2em;
|
||||
}
|
||||
</style>
|
||||
|
||||
<docs>
|
||||
可以使用 [`max`](#props-max) 属性，指定可现实数字的最大值，超过则显示为“<var>max</var>+”。
|
||||
</docs>
|
||||
|
||||
<docs locale="en-US">
|
||||
Use the [`max`](#props-max) prop to specify the max value can be displayed. Displays “<var>max</var>+” when value is larger than `max`.
|
||||
</docs>
|
||||
@@ -1,58 +0,0 @@
|
||||
<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>
|
||||
.veui-badge {
|
||||
& + & {
|
||||
margin-left: 2em;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<docs>
|
||||
可以使用 [`type`](#props-type) 属性，指定徽标在不同功能状态下的样式。
|
||||
</docs>
|
||||
|
||||
<docs locale="en-US">
|
||||
Use the [`type`](#props-type) prop to apply different contextual styles.
|
||||
</docs>
|
||||
@@ -1,26 +0,0 @@
|
||||
<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>
|
||||
@@ -1,32 +0,0 @@
|
||||
<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>
|
||||
@@ -1,55 +0,0 @@
|
||||
<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>
|
||||
.veui-breadcrumb:first-child {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,49 +0,0 @@
|
||||
<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>
|
||||
.veui-breadcrumb:first-child {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,47 +0,0 @@
|
||||
<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>
|
||||
section {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
</style>
|
||||
@@ -1,47 +0,0 @@
|
||||
<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>
|
||||
section {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
</style>
|
||||
@@ -1,76 +0,0 @@
|
||||
<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>
|
||||
section {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
</style>
|
||||
|
||||
<docs>
|
||||
`ButtonGroup` 的 [`disabled`](#props-disabled) 属性仅在使用 `items` 指定内容时生效，如果使用内联的 `Button` 组件，则需要为每个按钮分别指定 [`disabled`](./button#props-disabled) 属性。
|
||||
</docs>
|
||||
|
||||
<docs locale="en-US">
|
||||
The [`disabled`](#props-disabled) prop of `ButtonGroup` only takes effect when the content is specified using `items`, and if inline `Button` components are used, you need to specify the [`disabled`](./button#props-disabled) prop for each button.
|
||||
</docs>
|
||||
@@ -1,43 +0,0 @@
|
||||
<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>
|
||||
.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>
|
||||
@@ -1,41 +0,0 @@
|
||||
<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>
|
||||
.veui-button-group {
|
||||
margin-right: 1em;
|
||||
}
|
||||
</style>
|
||||
@@ -1,49 +0,0 @@
|
||||
<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>
|
||||
<section>
|
||||
<veui-button-group ui="basic">
|
||||
<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>
|
||||
section {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
.veui-button-group {
|
||||
margin-right: 1em;
|
||||
}
|
||||
</style>
|
||||
@@ -1,98 +0,0 @@
|
||||
<template>
|
||||
<article>
|
||||
<section>
|
||||
<veui-checkbox v-model="disabled">
|
||||
Disabled
|
||||
</veui-checkbox>
|
||||
</section>
|
||||
<section>
|
||||
<veui-button
|
||||
ui="primary"
|
||||
:disabled="disabled"
|
||||
>
|
||||
Primary
|
||||
</veui-button>
|
||||
<veui-button :disabled="disabled">
|
||||
Normal
|
||||
</veui-button>
|
||||
<veui-button
|
||||
ui="basic"
|
||||
:disabled="disabled"
|
||||
>
|
||||
Basic
|
||||
</veui-button>
|
||||
<veui-button
|
||||
ui="strong"
|
||||
:disabled="disabled"
|
||||
>
|
||||
Strong
|
||||
</veui-button>
|
||||
<veui-button
|
||||
ui="translucent"
|
||||
:disabled="disabled"
|
||||
>
|
||||
Translucent
|
||||
</veui-button>
|
||||
</section>
|
||||
<section>
|
||||
<veui-button
|
||||
ui="text"
|
||||
:disabled="disabled"
|
||||
>
|
||||
Text
|
||||
</veui-button>
|
||||
<veui-button
|
||||
ui="icon"
|
||||
:disabled="disabled"
|
||||
>
|
||||
<veui-icon name="home"/>
|
||||
</veui-button>
|
||||
<veui-button
|
||||
ui="icon strong"
|
||||
:disabled="disabled"
|
||||
>
|
||||
<veui-icon name="home"/>
|
||||
</veui-button>
|
||||
<veui-button
|
||||
ui="icon aux"
|
||||
:disabled="disabled"
|
||||
>
|
||||
<veui-icon name="home"/>
|
||||
</veui-button>
|
||||
<veui-button
|
||||
ui="primary square"
|
||||
:disabled="disabled"
|
||||
>
|
||||
<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 {
|
||||
disabled: true
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
section {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
.veui-button {
|
||||
margin-right: 1em;
|
||||
}
|
||||
</style>
|
||||
@@ -1,98 +0,0 @@
|
||||
<template>
|
||||
<article>
|
||||
<section>
|
||||
<veui-checkbox v-model="loading">
|
||||
Loading
|
||||
</veui-checkbox>
|
||||
</section>
|
||||
<section>
|
||||
<veui-button
|
||||
ui="primary"
|
||||
:loading="loading"
|
||||
>
|
||||
Primary
|
||||
</veui-button>
|
||||
<veui-button :loading="loading">
|
||||
Normal
|
||||
</veui-button>
|
||||
<veui-button
|
||||
ui="basic"
|
||||
:loading="loading"
|
||||
>
|
||||
Basic
|
||||
</veui-button>
|
||||
<veui-button
|
||||
ui="strong"
|
||||
:loading="loading"
|
||||
>
|
||||
Strong
|
||||
</veui-button>
|
||||
<veui-button
|
||||
ui="translucent"
|
||||
:loading="loading"
|
||||
>
|
||||
Translucent
|
||||
</veui-button>
|
||||
</section>
|
||||
<section>
|
||||
<veui-button
|
||||
ui="text"
|
||||
:loading="loading"
|
||||
>
|
||||
Text
|
||||
</veui-button>
|
||||
<veui-button
|
||||
ui="icon"
|
||||
:loading="loading"
|
||||
>
|
||||
<veui-icon name="home"/>
|
||||
</veui-button>
|
||||
<veui-button
|
||||
ui="icon strong"
|
||||
:loading="loading"
|
||||
>
|
||||
<veui-icon name="home"/>
|
||||
</veui-button>
|
||||
<veui-button
|
||||
ui="icon aux"
|
||||
:loading="loading"
|
||||
>
|
||||
<veui-icon name="home"/>
|
||||
</veui-button>
|
||||
<veui-button
|
||||
ui="primary square"
|
||||
:loading="loading"
|
||||
>
|
||||
<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>
|
||||
section {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
.veui-button {
|
||||
margin-right: 1em;
|
||||
}
|
||||
</style>
|
||||
@@ -1,35 +0,0 @@
|
||||
<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>
|
||||
.veui-button {
|
||||
margin-right: 1em;
|
||||
}
|
||||
</style>
|
||||
@@ -1,58 +0,0 @@
|
||||
<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'
|
||||
import 'veui-theme-dls-icons/home'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-button': Button,
|
||||
'veui-icon': Icon
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.veui-button {
|
||||
margin-right: 1em;
|
||||
}
|
||||
|
||||
section {
|
||||
margin-top: 20px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,118 +0,0 @@
|
||||
<template>
|
||||
<article>
|
||||
<section>
|
||||
<veui-calendar
|
||||
class="demo-date-class"
|
||||
:date-class="holidayClass"
|
||||
/>
|
||||
</section>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { isString, inRange } from 'lodash'
|
||||
import { Calendar } from 'veui'
|
||||
|
||||
const holidays = [
|
||||
[true, ['2022-1-1', '2022-1-3']],
|
||||
|
||||
[true, ['2022-1-31', '2022-2-6']],
|
||||
[false, ['2022-1-29', '2022-1-30']],
|
||||
|
||||
[true, ['2022-4-3', '2022-4-5']],
|
||||
[false, '2022-4-2'],
|
||||
|
||||
[true, ['2022-4-30', '2022-5-4']],
|
||||
[false, '2022-4-24', '2022-5-7'],
|
||||
|
||||
[true, ['2022-6-3', '2022-6-5']],
|
||||
|
||||
[true, ['2022-9-10', '2022-9-12']],
|
||||
|
||||
[true, ['2022-10-1', '2022-10-7']],
|
||||
[false, ['2022-10-8', '2022-10-9']]
|
||||
]
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-calendar': Calendar
|
||||
},
|
||||
computed: {
|
||||
isHoliday () {
|
||||
const items = holidays.map(function ([isHoliday, ...dateRanges]) {
|
||||
dateRanges = dateRanges.map(range => isString(range) ? [range, range] : range)
|
||||
.map(([start, end]) => [parseDateString(start), parseDateString(end, true)])
|
||||
return [isHoliday, dateRanges]
|
||||
})
|
||||
return function (date) {
|
||||
const time = date.getTime()
|
||||
const match = items.find(([, ranges]) => ranges.some(([start, end]) => inRange(time, start, end)))
|
||||
return match ? match[0] : undefined
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
holidayClass (date) {
|
||||
const r = this.isHoliday(date)
|
||||
if (r !== undefined) {
|
||||
return r ? 'x-holiday' : 'x-workday'
|
||||
}
|
||||
return [0, 6].includes(date.getDay()) ? 'x-weekend' : undefined
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function parseDateString (str, isEnd) {
|
||||
const [year, month, day] = str.split('-')
|
||||
return new Date(year, month - 1, isEnd ? +day + 1 : day, 0, 0, 0).getTime()
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.demo-date-class {
|
||||
.x-holiday button,
|
||||
.x-workday button {
|
||||
position: relative;
|
||||
border: 1px solid red;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: -1px;
|
||||
right: -1px;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 0 20px 20px 0;
|
||||
border-color: transparent #ff2600 transparent transparent;
|
||||
|
||||
}
|
||||
&::after {
|
||||
content: "假";
|
||||
position: absolute;
|
||||
top: -1px;
|
||||
right: -1px;
|
||||
font-size: 9px;
|
||||
font-weight: bold;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
.x-workday button {
|
||||
border: 1px solid blue;
|
||||
&::before {
|
||||
border-color: transparent blue transparent transparent;
|
||||
}
|
||||
&::after {
|
||||
content: "班";
|
||||
}
|
||||
}
|
||||
.x-weekend button {
|
||||
opacity: .6;
|
||||
}
|
||||
.veui-calendar-aux {
|
||||
button {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,39 +0,0 @@
|
||||
<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>
|
||||
@@ -1,27 +0,0 @@
|
||||
<template>
|
||||
<article>
|
||||
<section>
|
||||
<h4>只允许选未来的日期</h4>
|
||||
<veui-calendar :disabled-date="disabledDate"/>
|
||||
</section>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Calendar } from 'veui'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-calendar': Calendar
|
||||
},
|
||||
created () {
|
||||
this.now = new Date()
|
||||
this.now.setHours(0, 0, 0, 0)
|
||||
},
|
||||
methods: {
|
||||
disabledDate (date) {
|
||||
return this.now.getTime() > date.getTime()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,33 +0,0 @@
|
||||
<template>
|
||||
<article>
|
||||
<section>
|
||||
<veui-checkbox v-model="isFill">
|
||||
Fill month
|
||||
</veui-checkbox>
|
||||
</section>
|
||||
<veui-calendar :fill-month="isFill"/>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Calendar, Checkbox } from 'veui'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-calendar': Calendar,
|
||||
'veui-checkbox': Checkbox
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
date: new Date(),
|
||||
isFill: true
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
section {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,49 +0,0 @@
|
||||
<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>
|
||||
@@ -1,79 +0,0 @@
|
||||
<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>
|
||||
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>
|
||||
@@ -1,70 +0,0 @@
|
||||
<template>
|
||||
<article>
|
||||
<veui-calendar class="default" v-model="date">
|
||||
<template #before>
|
||||
<div class="before">
|
||||
<veui-button ui="s basic" @click="pickDay(-1)">Yesterday</veui-button>
|
||||
<veui-button ui="s basic" @click="pickDay(0)">Today</veui-button>
|
||||
<veui-button ui="s basic" @click="pickDay(1)">Tomorrow</veui-button>
|
||||
</div>
|
||||
</template>
|
||||
<template #date="d">
|
||||
<sup v-if="d.date === 1" class="month-tip">{{ formatMonth(d) }}</sup>
|
||||
{{ d.date }}
|
||||
</template>
|
||||
</veui-calendar>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Calendar, Button } from 'veui'
|
||||
|
||||
const formatter = new Intl.DateTimeFormat('zh-CN', { month: 'long' })
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-calendar': Calendar,
|
||||
'veui-button': Button
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
date: new Date()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
pickDay (d) {
|
||||
let date = new Date()
|
||||
date.setDate(date.getDate() + d)
|
||||
this.date = date
|
||||
},
|
||||
formatMonth ({ year, month, date }) {
|
||||
return formatter.format(new Date(year, month, date))
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.default {
|
||||
/deep/ .veui-calendar-day,
|
||||
/deep/ .veui-calendar-aux {
|
||||
button {
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
}
|
||||
.month-tip {
|
||||
position: absolute;
|
||||
top: -1px;
|
||||
left: -2px;
|
||||
right: -2px;
|
||||
text-align: center;
|
||||
color: #848b99;
|
||||
}
|
||||
.before {
|
||||
padding: 4px;
|
||||
border-bottom: 1px solid #d8d8d8;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
}
|
||||
</style>
|
||||
@@ -1,37 +0,0 @@
|
||||
<template>
|
||||
<article>
|
||||
<veui-radio-group
|
||||
v-model="type"
|
||||
:items="types"
|
||||
/>
|
||||
<veui-calendar :type="type"/>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Calendar, RadioGroup } from 'veui'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-calendar': Calendar,
|
||||
'veui-radio-group': RadioGroup
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
date: new Date(),
|
||||
type: 'date',
|
||||
types: [
|
||||
{ label: 'date', value: 'date' },
|
||||
{ label: 'month', value: 'month' },
|
||||
{ label: 'year', value: 'year' }
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.veui-radio-group {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,54 +0,0 @@
|
||||
<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`](#props-interval) 属性来指定自动播放的切换间隔时长，使用 [`wrap`](#props-wrap) 属性来允许循环播放，以及使用 [`pause-on-hover`](#props-pause-on-hover) 属性来时光标悬浮在指示器对应项时暂停自动播放。
|
||||
</docs>
|
||||
|
||||
<docs locale="en-US">
|
||||
You can also use the [`autoplay`](#props-autoplay) prop to enable autoplay, use the [`wrap`](#props-wrap) prop to enable looping and use the [`pause-on-hover`](#props-pause-on-hover) prop to pause playing when cursor hover step indicators.
|
||||
</docs>
|
||||
@@ -1,67 +0,0 @@
|
||||
<template>
|
||||
<article>
|
||||
<section>
|
||||
<h4>Effect type</h4>
|
||||
<veui-radio-group
|
||||
v-model="effect"
|
||||
:items="effects"
|
||||
/>
|
||||
</section>
|
||||
<section>
|
||||
<veui-carousel
|
||||
:datasource="items"
|
||||
:effect="effect"
|
||||
/>
|
||||
</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'
|
||||
}
|
||||
],
|
||||
effect: 'fade',
|
||||
effects: [
|
||||
{ label: 'Fade', value: 'fade' },
|
||||
{ label: 'Slide', value: 'slide' }
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
h4 {
|
||||
margin: 0 0 10px;
|
||||
}
|
||||
|
||||
section {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,95 +0,0 @@
|
||||
<template>
|
||||
<article>
|
||||
<section>
|
||||
<h4>Indicator type</h4>
|
||||
<veui-radio-group
|
||||
v-model="indicator"
|
||||
:items="indicators"
|
||||
/>
|
||||
<h4>Indicator position（仅在对齐方式是 end 时生效）</h4>
|
||||
<veui-radio-group
|
||||
v-model="indicatorPosition"
|
||||
:items="positions"
|
||||
/>
|
||||
<h4>Indicator align</h4>
|
||||
<veui-radio-group
|
||||
v-model="align"
|
||||
:items="alignments"
|
||||
/>
|
||||
</section>
|
||||
<section>
|
||||
<veui-carousel
|
||||
:datasource="items"
|
||||
:indicator="indicator"
|
||||
:indicator-position="indicatorPosition"
|
||||
:indicator-align="align"
|
||||
/>
|
||||
</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: 'bar',
|
||||
indicatorPosition: 'inside',
|
||||
align: 'start',
|
||||
indicators: [
|
||||
{ label: 'bar', value: 'bar' },
|
||||
{ label: 'number', value: 'number' },
|
||||
{ label: 'dot', value: 'dot' },
|
||||
{ label: 'none', value: 'none' }
|
||||
],
|
||||
alignments: [
|
||||
{ label: 'start', value: 'start' },
|
||||
{ label: 'end', value: 'end' }
|
||||
],
|
||||
positions: [
|
||||
{ label: 'inside', value: 'inside' },
|
||||
{ label: 'outside', value: 'outside' }
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
h4 {
|
||||
margin: 0 0 10px;
|
||||
|
||||
&:not(:first-child) {
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
section {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,57 +0,0 @@
|
||||
<template>
|
||||
<article>
|
||||
<section>
|
||||
<h4>按 `2/1` 比例展示轮播项</h4>
|
||||
<veui-carousel
|
||||
:datasource="items"
|
||||
effect="slide"
|
||||
indicator-align="end"
|
||||
slide-aspect-ratio="2/1"
|
||||
/>
|
||||
</section>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Carousel } from 'veui'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-carousel': Carousel
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
items: [
|
||||
{
|
||||
src:
|
||||
'https://ecmb.bdimg.com/public01/one-design/2b77cc4a4c5c906993c0e512f3ddaf03.jpg',
|
||||
alt: 'A cute kitty looking at you with its greenish eyes.',
|
||||
label: 'Cat'
|
||||
},
|
||||
{
|
||||
src:
|
||||
'https://ecmb.bdimg.com/public01/one-design/6fedc62b9221846ce5114c7447622e47.jpeg',
|
||||
alt: 'A common kingfisher flying above river.',
|
||||
label: 'Kingfisher'
|
||||
},
|
||||
{
|
||||
src:
|
||||
'https://ecmb.bdimg.com/public01/one-design/e1b6473c898d9e456452ee79d7533a86.jpeg',
|
||||
alt: 'A white and gray dolphin in blue water.',
|
||||
label: 'Dolphin'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
h4 {
|
||||
margin: 0 0 10px;
|
||||
}
|
||||
|
||||
section {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,76 +0,0 @@
|
||||
<template>
|
||||
<article>
|
||||
<section>
|
||||
<h4>2 view, 2 group</h4>
|
||||
<veui-carousel
|
||||
:datasource="items"
|
||||
:slides-per-group="2"
|
||||
:slides-per-view="2"
|
||||
effect="slide"
|
||||
indicator-position="outside"
|
||||
indicator-align="end"
|
||||
wrap
|
||||
/>
|
||||
<h4>2 view, 1 group</h4>
|
||||
<veui-carousel
|
||||
:datasource="items"
|
||||
:slides-per-group="1"
|
||||
:slides-per-view="2"
|
||||
effect="slide"
|
||||
indicator-position="outside"
|
||||
indicator-align="end"
|
||||
wrap
|
||||
/>
|
||||
</section>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Carousel } from 'veui'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-carousel': Carousel
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
items: [
|
||||
{
|
||||
src:
|
||||
'https://ecmb.bdimg.com/public01/one-design/2b77cc4a4c5c906993c0e512f3ddaf03.jpg',
|
||||
alt: 'A cute kitty looking at you with its greenish eyes.',
|
||||
label: 'Cat'
|
||||
},
|
||||
{
|
||||
src:
|
||||
'https://ecmb.bdimg.com/public01/one-design/6fedc62b9221846ce5114c7447622e47.jpeg',
|
||||
alt: 'A common kingfisher flying above river.',
|
||||
label: 'Kingfisher'
|
||||
},
|
||||
{
|
||||
src:
|
||||
'https://ecmb.bdimg.com/public01/one-design/e1b6473c898d9e456452ee79d7533a86.jpeg',
|
||||
alt: 'A white and gray dolphin in blue water.',
|
||||
label: 'Dolphin'
|
||||
},
|
||||
{
|
||||
src:
|
||||
'https://ss3.bdstatic.com/yrwDcj7w0QhBkMak8IuT_XF5ehU5bvGh7c50/logopic/1b61ee88fdb4a4b918816ae1cfd84af1_fullsize.jpg',
|
||||
alt: 'Tesla logo.',
|
||||
label: '特斯拉'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
h4 {
|
||||
margin: 0 0 10px;
|
||||
}
|
||||
|
||||
section {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,64 +0,0 @@
|
||||
<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>
|
||||
h4 {
|
||||
margin: 0 0 10px;
|
||||
}
|
||||
|
||||
section {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,69 +0,0 @@
|
||||
<template>
|
||||
<article>
|
||||
<section>
|
||||
<h4>Controls position</h4>
|
||||
<veui-radio-group
|
||||
v-model="position"
|
||||
:items="positions"
|
||||
/>
|
||||
</section>
|
||||
<section>
|
||||
<veui-carousel
|
||||
:datasource="items"
|
||||
effect="slide"
|
||||
:controls-position="position"
|
||||
vertical
|
||||
/>
|
||||
</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'
|
||||
}
|
||||
],
|
||||
position: 'inside',
|
||||
positions: [
|
||||
{ label: 'Inside', value: 'inside' },
|
||||
{ label: 'Outside', value: 'outside' }
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
h4 {
|
||||
margin: 0 0 10px;
|
||||
}
|
||||
|
||||
section {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,144 +0,0 @@
|
||||
<template>
|
||||
<article>
|
||||
<section>
|
||||
<veui-radio-group
|
||||
v-model="trigger"
|
||||
:items="triggers"
|
||||
/>
|
||||
<veui-cascader
|
||||
:column-trigger="trigger"
|
||||
:options="options"
|
||||
/>
|
||||
</section>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Cascader, RadioGroup } from 'veui'
|
||||
|
||||
const options = [
|
||||
{
|
||||
label: '浙江',
|
||||
value: '浙江',
|
||||
options: [
|
||||
{
|
||||
label: '威海',
|
||||
value: '威海'
|
||||
},
|
||||
{
|
||||
label: '滨州',
|
||||
value: '滨州'
|
||||
},
|
||||
{
|
||||
label: '临沂',
|
||||
value: '临沂'
|
||||
},
|
||||
{
|
||||
label: '东营',
|
||||
value: '东营'
|
||||
},
|
||||
{
|
||||
label: '济南',
|
||||
value: '济南'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: '山东',
|
||||
value: '山东',
|
||||
options: [
|
||||
{
|
||||
label: '菏泽',
|
||||
value: '菏泽',
|
||||
options: [
|
||||
{
|
||||
label: '菏泽1',
|
||||
value: '菏泽1'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: '潍坊',
|
||||
value: '潍坊',
|
||||
options: [
|
||||
{
|
||||
label: '潍坊1',
|
||||
value: '潍坊1'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: '泰山',
|
||||
value: '泰山'
|
||||
},
|
||||
{
|
||||
label: '烟台',
|
||||
value: '烟台'
|
||||
},
|
||||
{
|
||||
label: '华山',
|
||||
value: '华山'
|
||||
},
|
||||
{
|
||||
label: '衡山',
|
||||
value: '衡山'
|
||||
},
|
||||
{
|
||||
label: '嵩山',
|
||||
value: '嵩山'
|
||||
},
|
||||
{
|
||||
label: '恒山',
|
||||
value: '恒山'
|
||||
},
|
||||
{
|
||||
label: '大雪山',
|
||||
value: '大雪山'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: '上海',
|
||||
value: '上海',
|
||||
disabled: true
|
||||
},
|
||||
{
|
||||
label: '北京',
|
||||
value: '北京'
|
||||
},
|
||||
{
|
||||
label: '海外',
|
||||
value: '海外',
|
||||
disabled: true,
|
||||
options: [
|
||||
{
|
||||
label: '日本',
|
||||
value: '日本'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-cascader': Cascader,
|
||||
'veui-radio-group': RadioGroup
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
trigger: 'click',
|
||||
triggers: [
|
||||
{ label: 'click', value: 'click' },
|
||||
{ label: 'hover', value: 'hover' }
|
||||
],
|
||||
options
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.veui-radio-group {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,129 +0,0 @@
|
||||
<template>
|
||||
<article>
|
||||
<veui-cascader
|
||||
v-model="value"
|
||||
searchable
|
||||
inline
|
||||
:options="options"
|
||||
/>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Cascader } from 'veui'
|
||||
|
||||
const options = [
|
||||
{
|
||||
label: '浙江',
|
||||
value: '浙江',
|
||||
options: [
|
||||
{
|
||||
label: '威海',
|
||||
value: '威海'
|
||||
},
|
||||
{
|
||||
label: '滨州',
|
||||
value: '滨州'
|
||||
},
|
||||
{
|
||||
label: '临沂',
|
||||
value: '临沂'
|
||||
},
|
||||
{
|
||||
label: '东营',
|
||||
value: '东营'
|
||||
},
|
||||
{
|
||||
label: '济南',
|
||||
value: '济南'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: '山东',
|
||||
value: '山东',
|
||||
options: [
|
||||
{
|
||||
label: '菏泽',
|
||||
value: '菏泽',
|
||||
options: [
|
||||
{
|
||||
label: '菏泽1',
|
||||
value: '菏泽1'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: '潍坊',
|
||||
value: '潍坊',
|
||||
options: [
|
||||
{
|
||||
label: '潍坊1',
|
||||
value: '潍坊1'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: '泰山',
|
||||
value: '泰山'
|
||||
},
|
||||
{
|
||||
label: '烟台',
|
||||
value: '烟台'
|
||||
},
|
||||
{
|
||||
label: '华山',
|
||||
value: '华山'
|
||||
},
|
||||
{
|
||||
label: '衡山',
|
||||
value: '衡山'
|
||||
},
|
||||
{
|
||||
label: '嵩山',
|
||||
value: '嵩山'
|
||||
},
|
||||
{
|
||||
label: '恒山',
|
||||
value: '恒山'
|
||||
},
|
||||
{
|
||||
label: '大雪山',
|
||||
value: '大雪山'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: '上海',
|
||||
value: '上海',
|
||||
disabled: true
|
||||
},
|
||||
{
|
||||
label: '北京',
|
||||
value: '北京'
|
||||
},
|
||||
{
|
||||
label: '海外',
|
||||
value: '海外',
|
||||
disabled: true,
|
||||
options: [
|
||||
{
|
||||
label: '日本',
|
||||
value: '日本'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-cascader': Cascader
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
value: null,
|
||||
options
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,217 +0,0 @@
|
||||
<template>
|
||||
<article>
|
||||
<section class="cascader-config">
|
||||
<veui-checkbox
|
||||
v-model="clearable2"
|
||||
ui="s"
|
||||
>
|
||||
Clearable
|
||||
</veui-checkbox>
|
||||
<veui-checkbox
|
||||
v-model="showSelectAll2"
|
||||
ui="s"
|
||||
>
|
||||
ShowSelectAll
|
||||
</veui-checkbox>
|
||||
<veui-radio
|
||||
v-model="trigger2"
|
||||
ui="s"
|
||||
value="click"
|
||||
name="columnTrigger2"
|
||||
>
|
||||
click to expand
|
||||
</veui-radio>
|
||||
<veui-radio
|
||||
v-model="trigger2"
|
||||
ui="s"
|
||||
value="hover"
|
||||
name="columnTrigger2"
|
||||
>
|
||||
hover to expand
|
||||
</veui-radio>
|
||||
<label>
|
||||
Max:
|
||||
<veui-number-input
|
||||
v-model="max2"
|
||||
ui="s"
|
||||
/>
|
||||
</label>
|
||||
<label>
|
||||
columnWidth:
|
||||
<veui-input
|
||||
v-model="columnWidth2"
|
||||
ui="s"
|
||||
/>
|
||||
</label>
|
||||
</section>
|
||||
<veui-cascader
|
||||
v-model="value2"
|
||||
class="mt-3p"
|
||||
:options="options"
|
||||
:searchable="searchable2"
|
||||
:column-trigger="trigger2"
|
||||
:clearable="clearable2"
|
||||
:inline="inline2"
|
||||
:show-select-all="showSelectAll2"
|
||||
:max="max2"
|
||||
:column-width="getRealColumnWidth(columnWidth2)"
|
||||
multiple
|
||||
/>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Cascader, Checkbox, Radio, NumberInput, Input } from 'veui'
|
||||
|
||||
const options = [
|
||||
{
|
||||
label: '浙江',
|
||||
value: '浙江',
|
||||
options: [
|
||||
{
|
||||
label: '威海',
|
||||
value: '威海'
|
||||
},
|
||||
{
|
||||
label: '滨州',
|
||||
value: '滨州'
|
||||
},
|
||||
{
|
||||
label: '临沂',
|
||||
value: '临沂'
|
||||
},
|
||||
{
|
||||
label: '东营',
|
||||
value: '东营'
|
||||
},
|
||||
{
|
||||
label: '济南',
|
||||
value: '济南'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: '山东',
|
||||
value: '山东',
|
||||
options: [
|
||||
{
|
||||
label: '菏泽',
|
||||
value: '菏泽',
|
||||
options: [
|
||||
{
|
||||
label: '菏泽1',
|
||||
value: '菏泽1'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: '潍坊',
|
||||
value: '潍坊',
|
||||
options: [
|
||||
{
|
||||
label: '潍坊1',
|
||||
value: '潍坊1'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: '泰山',
|
||||
value: '泰山'
|
||||
},
|
||||
{
|
||||
label: '烟台',
|
||||
value: '烟台'
|
||||
},
|
||||
{
|
||||
label: '华山',
|
||||
value: '华山'
|
||||
},
|
||||
{
|
||||
label: '衡山',
|
||||
value: '衡山'
|
||||
},
|
||||
{
|
||||
label: '嵩山',
|
||||
value: '嵩山'
|
||||
},
|
||||
{
|
||||
label: '恒山',
|
||||
value: '恒山'
|
||||
},
|
||||
{
|
||||
label: '大雪山',
|
||||
value: '大雪山'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: '上海',
|
||||
value: '上海',
|
||||
disabled: true
|
||||
},
|
||||
{
|
||||
label: '北京',
|
||||
value: '北京'
|
||||
},
|
||||
{
|
||||
label: '海外',
|
||||
value: '海外',
|
||||
disabled: true,
|
||||
options: [
|
||||
{
|
||||
label: '日本',
|
||||
value: '日本'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-cascader': Cascader,
|
||||
'veui-checkbox': Checkbox,
|
||||
'veui-radio': Radio,
|
||||
'veui-number-input': NumberInput,
|
||||
'veui-input': Input
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
value2: null,
|
||||
searchable2: true,
|
||||
trigger2: 'click',
|
||||
clearable2: true,
|
||||
inline2: false,
|
||||
columnWidth2: '',
|
||||
showSelectAll2: false,
|
||||
max2: null,
|
||||
options
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getRealColumnWidth (val) {
|
||||
if (val && !isNaN(+val)) {
|
||||
return `${+val}px`
|
||||
}
|
||||
return val
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.cascader-config {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 32px;
|
||||
& > * {
|
||||
margin-right: 8px;
|
||||
font-size: 12px;
|
||||
}
|
||||
.veui-input {
|
||||
width: 80px;
|
||||
}
|
||||
}
|
||||
.mt-3p {
|
||||
margin-top: 12px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,128 +0,0 @@
|
||||
<template>
|
||||
<article>
|
||||
<veui-cascader
|
||||
v-model="value"
|
||||
searchable
|
||||
:options="options"
|
||||
/>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Cascader } from 'veui'
|
||||
|
||||
const options = [
|
||||
{
|
||||
label: '浙江',
|
||||
value: '浙江',
|
||||
options: [
|
||||
{
|
||||
label: '威海',
|
||||
value: '威海'
|
||||
},
|
||||
{
|
||||
label: '滨州',
|
||||
value: '滨州'
|
||||
},
|
||||
{
|
||||
label: '临沂',
|
||||
value: '临沂'
|
||||
},
|
||||
{
|
||||
label: '东营',
|
||||
value: '东营'
|
||||
},
|
||||
{
|
||||
label: '济南',
|
||||
value: '济南'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: '山东',
|
||||
value: '山东',
|
||||
options: [
|
||||
{
|
||||
label: '菏泽',
|
||||
value: '菏泽',
|
||||
options: [
|
||||
{
|
||||
label: '菏泽1',
|
||||
value: '菏泽1'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: '潍坊',
|
||||
value: '潍坊',
|
||||
options: [
|
||||
{
|
||||
label: '潍坊1',
|
||||
value: '潍坊1'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: '泰山',
|
||||
value: '泰山'
|
||||
},
|
||||
{
|
||||
label: '烟台',
|
||||
value: '烟台'
|
||||
},
|
||||
{
|
||||
label: '华山',
|
||||
value: '华山'
|
||||
},
|
||||
{
|
||||
label: '衡山',
|
||||
value: '衡山'
|
||||
},
|
||||
{
|
||||
label: '嵩山',
|
||||
value: '嵩山'
|
||||
},
|
||||
{
|
||||
label: '恒山',
|
||||
value: '恒山'
|
||||
},
|
||||
{
|
||||
label: '大雪山',
|
||||
value: '大雪山'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: '上海',
|
||||
value: '上海',
|
||||
disabled: true
|
||||
},
|
||||
{
|
||||
label: '北京',
|
||||
value: '北京'
|
||||
},
|
||||
{
|
||||
label: '海外',
|
||||
value: '海外',
|
||||
disabled: true,
|
||||
options: [
|
||||
{
|
||||
label: '日本',
|
||||
value: '日本'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-cascader': Cascader
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
value: null,
|
||||
options
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,144 +0,0 @@
|
||||
<template>
|
||||
<article>
|
||||
<section>
|
||||
<veui-radio-group
|
||||
v-model="selectMode"
|
||||
:items="selectModes"
|
||||
/>
|
||||
<veui-cascader
|
||||
:select-mode="selectMode"
|
||||
:options="options"
|
||||
/>
|
||||
</section>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Cascader, RadioGroup } from 'veui'
|
||||
|
||||
const options = [
|
||||
{
|
||||
label: '浙江',
|
||||
value: '浙江',
|
||||
options: [
|
||||
{
|
||||
label: '威海',
|
||||
value: '威海'
|
||||
},
|
||||
{
|
||||
label: '滨州',
|
||||
value: '滨州'
|
||||
},
|
||||
{
|
||||
label: '临沂',
|
||||
value: '临沂'
|
||||
},
|
||||
{
|
||||
label: '东营',
|
||||
value: '东营'
|
||||
},
|
||||
{
|
||||
label: '济南',
|
||||
value: '济南'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: '山东',
|
||||
value: '山东',
|
||||
options: [
|
||||
{
|
||||
label: '菏泽',
|
||||
value: '菏泽',
|
||||
options: [
|
||||
{
|
||||
label: '菏泽1',
|
||||
value: '菏泽1'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: '潍坊',
|
||||
value: '潍坊',
|
||||
options: [
|
||||
{
|
||||
label: '潍坊1',
|
||||
value: '潍坊1'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: '泰山',
|
||||
value: '泰山'
|
||||
},
|
||||
{
|
||||
label: '烟台',
|
||||
value: '烟台'
|
||||
},
|
||||
{
|
||||
label: '华山',
|
||||
value: '华山'
|
||||
},
|
||||
{
|
||||
label: '衡山',
|
||||
value: '衡山'
|
||||
},
|
||||
{
|
||||
label: '嵩山',
|
||||
value: '嵩山'
|
||||
},
|
||||
{
|
||||
label: '恒山',
|
||||
value: '恒山'
|
||||
},
|
||||
{
|
||||
label: '大雪山',
|
||||
value: '大雪山'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: '上海',
|
||||
value: '上海',
|
||||
disabled: true
|
||||
},
|
||||
{
|
||||
label: '北京',
|
||||
value: '北京'
|
||||
},
|
||||
{
|
||||
label: '海外',
|
||||
value: '海外',
|
||||
disabled: true,
|
||||
options: [
|
||||
{
|
||||
label: '日本',
|
||||
value: '日本'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-cascader': Cascader,
|
||||
'veui-radio-group': RadioGroup
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
selectMode: 'any',
|
||||
selectModes: [
|
||||
{ label: 'any', value: 'any' },
|
||||
{ label: 'leaf-only', value: 'leaf-only' }
|
||||
],
|
||||
options
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.veui-radio-group {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,154 +0,0 @@
|
||||
<template>
|
||||
<div class="cascader-wrap">
|
||||
<veui-cascader
|
||||
v-model="value"
|
||||
ui="l"
|
||||
:options="options"
|
||||
/>
|
||||
<veui-cascader
|
||||
v-model="value"
|
||||
:options="options"
|
||||
/>
|
||||
<veui-cascader
|
||||
v-model="value"
|
||||
ui="s"
|
||||
:options="options"
|
||||
/>
|
||||
<veui-cascader
|
||||
v-model="value"
|
||||
ui="xs"
|
||||
:options="options"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Cascader } from 'veui'
|
||||
|
||||
const options = [
|
||||
{
|
||||
label: '浙江',
|
||||
value: '浙江',
|
||||
options: [
|
||||
{
|
||||
label: '威海',
|
||||
value: '威海'
|
||||
},
|
||||
{
|
||||
label: '滨州',
|
||||
value: '滨州'
|
||||
},
|
||||
{
|
||||
label: '临沂',
|
||||
value: '临沂'
|
||||
},
|
||||
{
|
||||
label: '东营',
|
||||
value: '东营'
|
||||
},
|
||||
{
|
||||
label: '济南',
|
||||
value: '济南'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: '山东',
|
||||
value: '山东',
|
||||
options: [
|
||||
{
|
||||
label: '菏泽',
|
||||
value: '菏泽',
|
||||
options: [
|
||||
{
|
||||
label: '菏泽1',
|
||||
value: '菏泽1'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: '潍坊',
|
||||
value: '潍坊',
|
||||
options: [
|
||||
{
|
||||
label: '潍坊1',
|
||||
value: '潍坊1'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: '泰山',
|
||||
value: '泰山'
|
||||
},
|
||||
{
|
||||
label: '烟台',
|
||||
value: '烟台'
|
||||
},
|
||||
{
|
||||
label: '华山',
|
||||
value: '华山'
|
||||
},
|
||||
{
|
||||
label: '衡山',
|
||||
value: '衡山'
|
||||
},
|
||||
{
|
||||
label: '嵩山',
|
||||
value: '嵩山'
|
||||
},
|
||||
{
|
||||
label: '恒山',
|
||||
value: '恒山'
|
||||
},
|
||||
{
|
||||
label: '大雪山',
|
||||
value: '大雪山'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: '上海',
|
||||
value: '上海',
|
||||
disabled: true
|
||||
},
|
||||
{
|
||||
label: '北京',
|
||||
value: '北京'
|
||||
},
|
||||
{
|
||||
label: '海外',
|
||||
value: '海外',
|
||||
disabled: true,
|
||||
options: [
|
||||
{
|
||||
label: '日本',
|
||||
value: '日本'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-cascader': Cascader
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
value: null,
|
||||
options
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.cascader-wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.veui-cascader + .veui-cascader {
|
||||
margin-top: 12px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,144 +0,0 @@
|
||||
<template>
|
||||
<article>
|
||||
<section>
|
||||
<veui-radio-group
|
||||
v-model="valueDisplay"
|
||||
:items="valueDisplays"
|
||||
/>
|
||||
<veui-cascader
|
||||
:value-display="valueDisplay"
|
||||
:options="options"
|
||||
/>
|
||||
</section>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Cascader, RadioGroup } from 'veui'
|
||||
|
||||
const options = [
|
||||
{
|
||||
label: '浙江',
|
||||
value: '浙江',
|
||||
options: [
|
||||
{
|
||||
label: '威海',
|
||||
value: '威海'
|
||||
},
|
||||
{
|
||||
label: '滨州',
|
||||
value: '滨州'
|
||||
},
|
||||
{
|
||||
label: '临沂',
|
||||
value: '临沂'
|
||||
},
|
||||
{
|
||||
label: '东营',
|
||||
value: '东营'
|
||||
},
|
||||
{
|
||||
label: '济南',
|
||||
value: '济南'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: '山东',
|
||||
value: '山东',
|
||||
options: [
|
||||
{
|
||||
label: '菏泽',
|
||||
value: '菏泽',
|
||||
options: [
|
||||
{
|
||||
label: '菏泽1',
|
||||
value: '菏泽1'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: '潍坊',
|
||||
value: '潍坊',
|
||||
options: [
|
||||
{
|
||||
label: '潍坊1',
|
||||
value: '潍坊1'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: '泰山',
|
||||
value: '泰山'
|
||||
},
|
||||
{
|
||||
label: '烟台',
|
||||
value: '烟台'
|
||||
},
|
||||
{
|
||||
label: '华山',
|
||||
value: '华山'
|
||||
},
|
||||
{
|
||||
label: '衡山',
|
||||
value: '衡山'
|
||||
},
|
||||
{
|
||||
label: '嵩山',
|
||||
value: '嵩山'
|
||||
},
|
||||
{
|
||||
label: '恒山',
|
||||
value: '恒山'
|
||||
},
|
||||
{
|
||||
label: '大雪山',
|
||||
value: '大雪山'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: '上海',
|
||||
value: '上海',
|
||||
disabled: true
|
||||
},
|
||||
{
|
||||
label: '北京',
|
||||
value: '北京'
|
||||
},
|
||||
{
|
||||
label: '海外',
|
||||
value: '海外',
|
||||
disabled: true,
|
||||
options: [
|
||||
{
|
||||
label: '日本',
|
||||
value: '日本'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-cascader': Cascader,
|
||||
'veui-radio-group': RadioGroup
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
valueDisplay: 'simple',
|
||||
valueDisplays: [
|
||||
{ label: 'simple', value: 'simple' },
|
||||
{ label: 'complete', value: 'complete' }
|
||||
],
|
||||
options
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.veui-radio-group {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,65 +0,0 @@
|
||||
<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="s"
|
||||
: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>
|
||||
section {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
h4 {
|
||||
margin-top: 0;
|
||||
}
|
||||
</style>
|
||||
@@ -1,50 +0,0 @@
|
||||
<template>
|
||||
<article>
|
||||
<section>
|
||||
<veui-check-button-group
|
||||
v-model="flavor"
|
||||
:items="flavors"
|
||||
/>
|
||||
</section>
|
||||
<section>
|
||||
<veui-check-button-group
|
||||
v-model="flavor"
|
||||
:items="flavors"
|
||||
>
|
||||
<template #desc="{ desc, label }">
|
||||
{{ desc || `a description for ${label}` }}
|
||||
</template>
|
||||
</veui-check-button-group>
|
||||
</section>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { CheckButtonGroup } from 'veui'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-check-button-group': CheckButtonGroup
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
flavor: null,
|
||||
flavors: [
|
||||
{ value: 'LATTE', label: 'Latte', desc: 'a description for latte.' },
|
||||
{ value: 'MOCHA', label: 'Mocha', desc: 'a description for mocha.' },
|
||||
{ value: 'AMERICANO', label: 'Americano' }
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
section {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
h4 {
|
||||
margin-top: 0;
|
||||
}
|
||||
</style>
|
||||
@@ -1,62 +0,0 @@
|
||||
<template>
|
||||
<article>
|
||||
<section>
|
||||
<h4>Select size</h4>
|
||||
<veui-check-button-group
|
||||
v-model="selected"
|
||||
:items="licenses"
|
||||
empty-value="any"
|
||||
/>
|
||||
<p>Checked: {{ readable }}</p>
|
||||
</section>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { CheckButtonGroup } from 'veui'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-check-button-group': CheckButtonGroup
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
selected: ['any'],
|
||||
licenses: [
|
||||
{
|
||||
label: 'Any',
|
||||
value: 'any',
|
||||
exclusive: true
|
||||
},
|
||||
{
|
||||
label: 'Small',
|
||||
value: 'sm'
|
||||
},
|
||||
{
|
||||
label: 'Medium',
|
||||
value: 'md'
|
||||
},
|
||||
{
|
||||
label: 'Large',
|
||||
value: 'lg'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
readable () {
|
||||
return (this.selected || []).join(', ') || '-'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
section {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
h4 {
|
||||
margin-top: 0;
|
||||
}
|
||||
</style>
|
||||
@@ -1,60 +0,0 @@
|
||||
<template>
|
||||
<article>
|
||||
<section>
|
||||
<veui-check-button-group
|
||||
v-model="selected"
|
||||
ui="simple"
|
||||
:items="sizes"
|
||||
/>
|
||||
<p>Checked: {{ readable }}</p>
|
||||
</section>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { CheckButtonGroup } from 'veui'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-check-button-group': CheckButtonGroup
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
selected: ['any'],
|
||||
sizes: [
|
||||
{
|
||||
label: 'Any',
|
||||
value: 'any'
|
||||
},
|
||||
{
|
||||
label: 'Small',
|
||||
value: 'sm'
|
||||
},
|
||||
{
|
||||
label: 'Medium',
|
||||
value: 'md'
|
||||
},
|
||||
{
|
||||
label: 'Large',
|
||||
value: 'lg'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
readable () {
|
||||
return (this.selected || []).join(', ') || '-'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
section {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
h4 {
|
||||
margin-top: 0;
|
||||
}
|
||||
</style>
|
||||
@@ -1,42 +0,0 @@
|
||||
<template>
|
||||
<article>
|
||||
<section>
|
||||
<veui-checkbox v-model="isStable">
|
||||
Stable layout
|
||||
</veui-checkbox>
|
||||
</section>
|
||||
<veui-check-button-group
|
||||
v-model="flavor"
|
||||
:items="flavors"
|
||||
:ui="isStable ? 'stable' : ''"
|
||||
/>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { CheckButtonGroup, Checkbox } from 'veui'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-check-button-group': CheckButtonGroup,
|
||||
'veui-checkbox': Checkbox
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
isStable: true,
|
||||
flavor: null,
|
||||
flavors: [
|
||||
{ value: 'LATTE', label: 'Latte' },
|
||||
{ value: 'MOCHA', label: 'Mocha' },
|
||||
{ value: 'AMERICANO', label: 'Americano' }
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
section {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,65 +0,0 @@
|
||||
<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>
|
||||
section {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
h4 {
|
||||
margin-top: 0;
|
||||
}
|
||||
</style>
|
||||
@@ -1,50 +0,0 @@
|
||||
<template>
|
||||
<article>
|
||||
<section>
|
||||
<veui-checkbox-group
|
||||
v-model="flavor"
|
||||
:items="flavors"
|
||||
/>
|
||||
</section>
|
||||
<section>
|
||||
<veui-checkbox-group
|
||||
v-model="flavor"
|
||||
:items="flavors"
|
||||
>
|
||||
<template #desc="{ desc, label }">
|
||||
{{ desc || `a description for ${label}` }}
|
||||
</template>
|
||||
</veui-checkbox-group>
|
||||
</section>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { CheckboxGroup } from 'veui'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-checkbox-group': CheckboxGroup
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
flavor: null,
|
||||
flavors: [
|
||||
{ value: 'LATTE', label: 'Latte', desc: 'a description for latte.' },
|
||||
{ value: 'MOCHA', label: 'Mocha', desc: 'a description for mocha.' },
|
||||
{ value: 'AMERICANO', label: 'Americano' }
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
section {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
h4 {
|
||||
margin-top: 0;
|
||||
}
|
||||
</style>
|
||||
@@ -1,62 +0,0 @@
|
||||
<template>
|
||||
<article>
|
||||
<section>
|
||||
<h4>Select size</h4>
|
||||
<veui-checkbox-group
|
||||
v-model="selected"
|
||||
:items="licenses"
|
||||
empty-value="any"
|
||||
/>
|
||||
<p>Checked: {{ readable }}</p>
|
||||
</section>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { CheckboxGroup } from 'veui'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-checkbox-group': CheckboxGroup
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
selected: ['any'],
|
||||
licenses: [
|
||||
{
|
||||
label: 'Any',
|
||||
value: 'any',
|
||||
exclusive: true
|
||||
},
|
||||
{
|
||||
label: 'Small',
|
||||
value: 'sm'
|
||||
},
|
||||
{
|
||||
label: 'Medium',
|
||||
value: 'md'
|
||||
},
|
||||
{
|
||||
label: 'Large',
|
||||
value: 'lg'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
readable () {
|
||||
return (this.selected || []).join(', ') || '-'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
section {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
h4 {
|
||||
margin-top: 0;
|
||||
}
|
||||
</style>
|
||||
@@ -1,65 +0,0 @@
|
||||
<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="less" scoped>
|
||||
.veui-checkbox {
|
||||
& + & {
|
||||
margin-left: 20px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<docs>
|
||||
可以使用 [`indeterminate`](#props-indeterminate) 属性来设置半选状态。
|
||||
</docs>
|
||||
|
||||
<docs locale="en-US">
|
||||
Use the [`indeterminate`](#props-indeterminate) prop to put the checkbox in indeterminate state.
|
||||
</docs>
|
||||
@@ -1,33 +0,0 @@
|
||||
<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>
|
||||
@@ -1,57 +0,0 @@
|
||||
<template>
|
||||
<article>
|
||||
<section>
|
||||
<div class="control-wrap">
|
||||
<veui-radio-button-group
|
||||
v-model="position"
|
||||
class="control-item"
|
||||
ui="s"
|
||||
:items="positions"
|
||||
/>
|
||||
</div>
|
||||
<veui-collapse
|
||||
label="Sun"
|
||||
:toggle-position="position"
|
||||
>
|
||||
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>
|
||||
</section>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Collapse, RadioButtonGroup } from 'veui'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-collapse': Collapse,
|
||||
'veui-radio-button-group': RadioButtonGroup
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
position: 'start',
|
||||
positions: [
|
||||
{ label: 'start', value: 'start' },
|
||||
{ label: 'end', value: 'end' },
|
||||
{ label: 'none', value: 'none' }
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
section {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.control-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.control-item {
|
||||
margin-right: 12px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,35 +0,0 @@
|
||||
<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="less" scoped>
|
||||
section {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,84 +0,0 @@
|
||||
<template>
|
||||
<article>
|
||||
<section>
|
||||
<div class="control-wrap">
|
||||
<veui-radio-button-group
|
||||
v-model="variant"
|
||||
ui="s"
|
||||
class="control-item"
|
||||
:items="variants"
|
||||
/>
|
||||
<veui-radio-button-group
|
||||
v-model="bordered"
|
||||
ui="s"
|
||||
class="control-item"
|
||||
:items="[
|
||||
{ label: 'default', value: '' },
|
||||
{ label: 'bordered', value: 'bordered' },
|
||||
{ label: 'borderless', value: 'borderless' }
|
||||
]"
|
||||
/>
|
||||
<veui-check-button-group
|
||||
v-model="dull"
|
||||
ui="s"
|
||||
class="control-item"
|
||||
:items="[{ label: 'dull', value: 'dull' }]"
|
||||
/>
|
||||
</div>
|
||||
<veui-collapse
|
||||
:ui="realVariants"
|
||||
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>
|
||||
</section>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Collapse, RadioButtonGroup, CheckButtonGroup } from 'veui'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-collapse': Collapse,
|
||||
'veui-radio-button-group': RadioButtonGroup,
|
||||
'veui-check-button-group': CheckButtonGroup
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
variants: [
|
||||
{ label: 'default', value: '' },
|
||||
{ label: 'simple', value: 'simple' },
|
||||
{ label: 'basic', value: 'basic' },
|
||||
{ label: 'strong', value: 'strong' }
|
||||
],
|
||||
variant: '',
|
||||
bordered: '',
|
||||
dull: null
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
realVariants () {
|
||||
return [this.variant, this.bordered || '', this.dull || '']
|
||||
.join(' ')
|
||||
.trim()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
section {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.control-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.control-item {
|
||||
margin-right: 12px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,56 +0,0 @@
|
||||
<template>
|
||||
<article>
|
||||
<veui-button
|
||||
style="margin-right: 8px;"
|
||||
@click="toggle"
|
||||
>切换</veui-button>
|
||||
<veui-config-provider :value="value">
|
||||
<veui-select
|
||||
:options="options"
|
||||
clearable
|
||||
/>
|
||||
</veui-config-provider>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Select, ConfigProvider, Button } from 'veui'
|
||||
|
||||
const PLACEHOLDER1 = '请选择协议1'
|
||||
const PLACEHOLDER2 = '请选择协议2'
|
||||
|
||||
// Select 的 placeholder 会响应配置 `select.placeholder`
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-config-provider': ConfigProvider,
|
||||
'veui-select': Select,
|
||||
'veui-button': Button
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
value: {
|
||||
'select.placeholder': PLACEHOLDER1
|
||||
},
|
||||
options: [
|
||||
{
|
||||
label: 'MIT',
|
||||
value: 'mit'
|
||||
},
|
||||
{
|
||||
label: 'BSD',
|
||||
value: 'bsd'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
toggle () {
|
||||
let prev = this.value['select.placeholder']
|
||||
this.value['select.placeholder'] = prev === PLACEHOLDER1
|
||||
? PLACEHOLDER2
|
||||
: PLACEHOLDER1
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,40 +0,0 @@
|
||||
<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, toast } from 'veui'
|
||||
|
||||
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>
|
||||
@@ -1,52 +0,0 @@
|
||||
<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>
|
||||
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>
|
||||
@@ -1,45 +0,0 @@
|
||||
<template>
|
||||
<article>
|
||||
<section>
|
||||
<h4>Disabled</h4>
|
||||
<veui-date-picker
|
||||
v-model="date"
|
||||
disabled
|
||||
placeholder="disabled"
|
||||
/>
|
||||
</section>
|
||||
<section>
|
||||
<h4>Readonly</h4>
|
||||
<veui-date-picker
|
||||
v-model="date"
|
||||
readonly
|
||||
placeholder="readonly"
|
||||
/>
|
||||
</section>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { DatePicker } from 'veui'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-date-picker': DatePicker
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
date: new Date()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
section:not(:last-child) {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
h4 {
|
||||
margin-top: 0;
|
||||
}
|
||||
</style>
|
||||
@@ -1,54 +0,0 @@
|
||||
<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>
|
||||
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>
|
||||
@@ -1,62 +0,0 @@
|
||||
<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>
|
||||
@@ -1,120 +0,0 @@
|
||||
<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, toast } from 'veui'
|
||||
|
||||
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>
|
||||
article > .veui-button {
|
||||
margin-right: 20px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<docs>
|
||||
当你希望统一处理用户可能触发对话框关闭的操作，请使用 [`before-close`](#props-before-close) 属性传入统一的处理函数，此时无论是点击“确定”/“取消”按钮、关闭按钮还是按下 <kbd>esc</kbd> 触发的关闭操作，都会统一进入 `before-close` 的处理流程。如果逻辑相对简单，比如取消时没有额外逻辑，可以直接操作 [`open`](#props-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`](#props-open) prop directly to close the dialog.
|
||||
</docs>
|
||||
@@ -1,73 +0,0 @@
|
||||
<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>
|
||||
.veui-button {
|
||||
margin-right: 20px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,38 +0,0 @@
|
||||
<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>
|
||||
.veui-button {
|
||||
margin-right: 20px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,64 +0,0 @@
|
||||
<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>
|
||||
.veui-button {
|
||||
margin-right: 20px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,74 +0,0 @@
|
||||
<template>
|
||||
<article>
|
||||
<veui-button @click="openDialog('s')">
|
||||
s
|
||||
</veui-button>
|
||||
<veui-button @click="openDialog('m')">
|
||||
m
|
||||
</veui-button>
|
||||
<veui-button @click="openDialog('narrow')">
|
||||
narrow
|
||||
</veui-button>
|
||||
<veui-button @click="openDialog('medium')">
|
||||
medium
|
||||
</veui-button>
|
||||
<veui-button @click="openDialog('wide')">
|
||||
wide
|
||||
</veui-button>
|
||||
<veui-button @click="openDialog('fullscreen')">
|
||||
fullscreen
|
||||
</veui-button>
|
||||
<veui-button @click="openDialog('auto')">
|
||||
auto
|
||||
</veui-button>
|
||||
<veui-dialog
|
||||
title="System"
|
||||
:ui="ui"
|
||||
:open.sync="open"
|
||||
>
|
||||
<section>Current UI: "{{ ui }}"</section>
|
||||
<section v-if="ui === 's' || ui === 'm'">
|
||||
<veui-button>Button size: {{ ui }}</veui-button>
|
||||
<veui-switch>{{ ui }}</veui-switch>
|
||||
</section>
|
||||
</veui-dialog>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Dialog, Button, Switch } from 'veui'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-dialog': Dialog,
|
||||
'veui-button': Button,
|
||||
'veui-switch': Switch
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
open: false,
|
||||
ui: null
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
openDialog (size) {
|
||||
this.ui = size
|
||||
this.open = true
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.veui-button {
|
||||
margin-right: 20px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<docs>
|
||||
`s` / `m` 用于指定内容的尺寸，会被继承到内部的组件上。而 `narrow` / `medium` / `wide` / `fullscreen` / `auto` 是对话框本身所占区域的大小，可以与 `s` / `m` 混合使用。
|
||||
</docs>
|
||||
|
||||
<docs locale="en-US">
|
||||
`s` / `m` are used to specify size for internal content and will be inherited by components inside the dialog. While `narrow` / `medium` / `wide` / `fullscreen` / `auto` are used to specify the dimension of the dialog itself, thus can be used together with `s` / `m`.
|
||||
</docs>
|
||||
@@ -1,62 +0,0 @@
|
||||
<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>
|
||||
.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>
|
||||
@@ -1,57 +0,0 @@
|
||||
<template>
|
||||
<article>
|
||||
<div class="op-wrap">
|
||||
<veui-button @click="aOpen = true">
|
||||
Open Dialog
|
||||
</veui-button>
|
||||
<veui-checkbox v-model="loading">
|
||||
Loading
|
||||
</veui-checkbox>
|
||||
<veui-checkbox
|
||||
v-model="disabled"
|
||||
class="ml-3p"
|
||||
>
|
||||
Disabled
|
||||
</veui-checkbox>
|
||||
</div>
|
||||
<veui-dialog
|
||||
:open.sync="aOpen"
|
||||
title="Dialog A"
|
||||
:loading="loading"
|
||||
:disabled="disabled"
|
||||
>
|
||||
The content of Dialog A.
|
||||
</veui-dialog>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Dialog, Button, Checkbox } from 'veui'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-dialog': Dialog,
|
||||
'veui-button': Button,
|
||||
'veui-checkbox': Checkbox
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
aOpen: false,
|
||||
disabled: false,
|
||||
loading: false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.veui-button {
|
||||
margin-right: 20px;
|
||||
}
|
||||
.op-wrap {
|
||||
display: flex;
|
||||
}
|
||||
.ml-3p {
|
||||
margin-left: 12px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,51 +0,0 @@
|
||||
<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'
|
||||
|
||||
export default {
|
||||
directives: {
|
||||
drag
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
article {
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
.target {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
background: #e7e7e7;
|
||||
display: inline-flex;
|
||||
margin-right: 40px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.container {
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
background: #f7f7f7;
|
||||
}
|
||||
</style>
|
||||
@@ -1,27 +0,0 @@
|
||||
<template>
|
||||
<article>
|
||||
<div
|
||||
ref="target"
|
||||
v-drag:target.translate
|
||||
class="target"
|
||||
/>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { drag } from 'veui'
|
||||
|
||||
export default {
|
||||
directives: {
|
||||
drag
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.target {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
background: #e7e7e7;
|
||||
}
|
||||
</style>
|
||||
@@ -1,38 +0,0 @@
|
||||
<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'
|
||||
|
||||
export default {
|
||||
directives: {
|
||||
drag
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.target {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
background: #e7e7e7;
|
||||
}
|
||||
|
||||
.container {
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
background: #f7f7f7;
|
||||
}
|
||||
</style>
|
||||
@@ -1,72 +0,0 @@
|
||||
<template>
|
||||
<article>
|
||||
<transition-group
|
||||
ref="group"
|
||||
name="list"
|
||||
tag="div"
|
||||
class="items"
|
||||
>
|
||||
<div
|
||||
v-for="item in items"
|
||||
:key="item"
|
||||
v-drag.sort.x="{
|
||||
name: 'words',
|
||||
containment: 'group',
|
||||
sort: sortCallback,
|
||||
}"
|
||||
class="item"
|
||||
>
|
||||
{{ item }}
|
||||
</div>
|
||||
</transition-group>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { drag } from 'veui'
|
||||
|
||||
const items = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'.split(/[,. ]+/).filter(Boolean)
|
||||
|
||||
export default {
|
||||
directives: {
|
||||
drag
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
items
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
sortCallback (fromIndex, toIndex) {
|
||||
let items = this.items
|
||||
let item = items[fromIndex]
|
||||
items.splice(fromIndex, 1)
|
||||
items.splice(toIndex, 0, item)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.items {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.item {
|
||||
background: white;
|
||||
border: 1px solid pink;
|
||||
border-radius: 3px;
|
||||
margin: 0 10px 8px 0;
|
||||
padding: 1px 2px;
|
||||
}
|
||||
|
||||
.list-move {
|
||||
transition: transform 200ms ease;
|
||||
}
|
||||
</style>
|
||||
|
||||
<docs>
|
||||
可以通过 `v-drag.sort` 或 `v-drag="{ type: 'sort', ... }"` 来实现拖拽排序。
|
||||
</docs>
|
||||
@@ -1,77 +0,0 @@
|
||||
<template>
|
||||
<article>
|
||||
<transition-group
|
||||
ref="group"
|
||||
name="list"
|
||||
tag="div"
|
||||
class="items"
|
||||
>
|
||||
<div
|
||||
v-for="item in items"
|
||||
:key="item"
|
||||
v-drag.sort.y="{
|
||||
name: 'words',
|
||||
containment: 'group',
|
||||
sort: sortCallback,
|
||||
}"
|
||||
class="item"
|
||||
>
|
||||
{{ item }}
|
||||
</div>
|
||||
</transition-group>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { drag } from 'veui'
|
||||
|
||||
const items = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'.split(/[,. ]+/).filter(Boolean)
|
||||
|
||||
export default {
|
||||
directives: {
|
||||
drag
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
items
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
sortCallback (fromIndex, toIndex) {
|
||||
let items = this.items
|
||||
let item = items[fromIndex]
|
||||
items.splice(fromIndex, 1)
|
||||
items.splice(toIndex, 0, item)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.item {
|
||||
background: white;
|
||||
border: 1px solid pink;
|
||||
border-radius: 3px;
|
||||
margin: 0 10px 8px 0;
|
||||
padding: 1px 2px;
|
||||
}
|
||||
|
||||
.items {
|
||||
padding: 0;
|
||||
list-style-position: inside;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: wrap;
|
||||
height: 300px;
|
||||
resize: both;
|
||||
|
||||
.item {
|
||||
width: 20%;
|
||||
border-color: peachpuff;
|
||||
}
|
||||
}
|
||||
|
||||
.list-move {
|
||||
transition: transform 200ms ease;
|
||||
}
|
||||
</style>
|
||||
@@ -1,48 +0,0 @@
|
||||
<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'
|
||||
|
||||
export default {
|
||||
directives: {
|
||||
drag
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.target {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
background: #e7e7e7;
|
||||
display: inline-flex;
|
||||
margin-right: 40px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.container {
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
background: #f7f7f7;
|
||||
}
|
||||
</style>
|
||||
@@ -1,76 +0,0 @@
|
||||
<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'
|
||||
|
||||
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>
|
||||
article {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.box {
|
||||
width: 200px;
|
||||
height: 50px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 1px solid #dbdbdb;
|
||||
background: #fff;
|
||||
margin-right: 40px;
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
transition: background-color 0.3s;
|
||||
line-height: 1;
|
||||
|
||||
&:focus {
|
||||
background-color: #e7e7e7;
|
||||
}
|
||||
}
|
||||
|
||||
.value {
|
||||
font-size: 1.5em;
|
||||
}
|
||||
</style>
|
||||
@@ -1,52 +0,0 @@
|
||||
<template>
|
||||
<article
|
||||
@mouseenter="inDemo = true"
|
||||
@mouseleave="inDemo = false"
|
||||
>
|
||||
<div
|
||||
v-outside="handleOutside"
|
||||
class="box"
|
||||
>
|
||||
目标元素 A
|
||||
</div>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { outside, toast } from 'veui'
|
||||
|
||||
export default {
|
||||
directives: {
|
||||
outside
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
timer: null,
|
||||
inDemo: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleOutside () {
|
||||
if (this.inDemo) {
|
||||
toast.info('点击了目标元素 A 外部。')
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.box {
|
||||
width: 500px;
|
||||
height: 100px;
|
||||
background: #f7f7f7;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
article {
|
||||
margin: -30px;
|
||||
padding: 30px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,62 +0,0 @@
|
||||
<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, toast } from 'veui'
|
||||
|
||||
export default {
|
||||
directives: {
|
||||
outside
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
consoleVisible: false,
|
||||
timer: null
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleOutside () {
|
||||
toast.info('在 1000ms 内未移回目标元素 C、D、E，触发外部事件。')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.box1,
|
||||
.box2,
|
||||
.box3 {
|
||||
width: 200px;
|
||||
height: 100px;
|
||||
background: #f7f7f7;
|
||||
margin-right: 30px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
article {
|
||||
margin: -30px;
|
||||
padding: 30px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,47 +0,0 @@
|
||||
<template>
|
||||
<article>
|
||||
<div
|
||||
v-outside.hover="handleOutside"
|
||||
class="box"
|
||||
>
|
||||
目标元素 B
|
||||
</div>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { outside, toast } from 'veui'
|
||||
|
||||
export default {
|
||||
directives: {
|
||||
outside
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
consoleVisible: false,
|
||||
timer: null
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleOutside () {
|
||||
toast.info('鼠标移到了目标元素B外部。')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.box {
|
||||
width: 500px;
|
||||
height: 100px;
|
||||
background: #f7f7f7;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
article {
|
||||
margin: -30px;
|
||||
padding: 30px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,97 +0,0 @@
|
||||
<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, resize } from 'veui'
|
||||
|
||||
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" scoped>
|
||||
.demo {
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
margin-top: 10px;
|
||||
padding-left: 10px;
|
||||
background-color: #eee;
|
||||
transition: width 2s;
|
||||
}
|
||||
</style>
|
||||
@@ -1,45 +0,0 @@
|
||||
<template>
|
||||
<article>
|
||||
<veui-button
|
||||
v-tooltip="'Preview'"
|
||||
ui="icon"
|
||||
>
|
||||
<veui-icon name="zoom-in"/>
|
||||
</veui-button>
|
||||
<veui-button
|
||||
v-tooltip="'Upload'"
|
||||
ui="icon"
|
||||
>
|
||||
<veui-icon name="upload"/>
|
||||
</veui-button>
|
||||
<veui-button
|
||||
v-tooltip="'Remove'"
|
||||
ui="icon"
|
||||
>
|
||||
<veui-icon name="trash"/>
|
||||
</veui-button>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Button, Icon, tooltip } from 'veui'
|
||||
import 'veui-theme-dls-icons/zoom-in'
|
||||
import 'veui-theme-dls-icons/upload'
|
||||
import 'veui-theme-dls-icons/trash'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-button': Button,
|
||||
'veui-icon': Icon
|
||||
},
|
||||
directives: {
|
||||
tooltip
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.veui-button + .veui-button {
|
||||
margin-left: 8px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,47 +0,0 @@
|
||||
<template>
|
||||
<article>
|
||||
<section>
|
||||
<div
|
||||
v-tooltip.overflow="loremIpsum"
|
||||
class="item"
|
||||
>
|
||||
{{ loremIpsum }}
|
||||
</div>
|
||||
<div
|
||||
v-tooltip.overflow="loremIpsum"
|
||||
class="item"
|
||||
>
|
||||
Lorem upsum.
|
||||
</div>
|
||||
</section>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { tooltip } from 'veui'
|
||||
|
||||
const loremIpsum = 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos consequatur ad hic aspernatur maiores adipisci velit nostrum nobis, cum earum, incidunt repellendus ex! Fuga, fugit! Placeat quam ex minima laudantium.'
|
||||
|
||||
export default {
|
||||
directives: {
|
||||
tooltip
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
loremIpsum
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.item {
|
||||
display: inline-block;
|
||||
margin-right: 12px;
|
||||
width: 200px;
|
||||
border: 1px solid #ccc;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
</style>
|
||||
@@ -1,73 +0,0 @@
|
||||
<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>
|
||||
.veui-button {
|
||||
margin-right: 20px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,64 +0,0 @@
|
||||
<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>
|
||||
.veui-button {
|
||||
margin-right: 20px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,103 +0,0 @@
|
||||
<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>
|
||||
@@ -1,105 +0,0 @@
|
||||
<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>
|
||||
.veui-dropdown {
|
||||
margin-left: 1em;
|
||||
}
|
||||
</style>
|
||||
@@ -1,69 +0,0 @@
|
||||
<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, toast } from 'veui'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-dropdown': Dropdown,
|
||||
'veui-option-group': OptionGroup,
|
||||
'veui-option': Option
|
||||
},
|
||||
methods: {
|
||||
alert (e) {
|
||||
toast.info(e)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<docs>
|
||||
将 `OptionGroup` 的 [`position`](#props-position) 属性设置为 `popup` 后可以让子选项在新的浮动子菜单中展现。
|
||||
</docs>
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user