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

feat: publicize doc implemetation

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

224
one/docs/demo/popover/position.vue Normal file
View File

@@ -0,0 +1,224 @@
<template>
<article>
<veui-grid-container :columns="5">
<veui-grid-row>
<veui-grid-column
:span="1"
:offset="1"
>
<span
ref="ts"
class="target"
>top-start</span>
<veui-popover
target="ts"
position="top-start"
>
Hello.
</veui-popover>
</veui-grid-column>
<veui-grid-column :span="1">
<span
ref="t"
class="target"
>top</span>
<veui-popover
target="t"
position="top"
>
Hello.
</veui-popover>
</veui-grid-column>
<veui-grid-column :span="1">
<span
ref="te"
class="target"
>top-end</span>
<veui-popover
target="te"
position="top-end"
>
Hello.
</veui-popover>
</veui-grid-column>
</veui-grid-row>
<veui-grid-row>
<veui-grid-column :span="1">
<span
ref="ls"
class="target"
>left-start</span>
<veui-popover
target="ls"
position="left-start"
>
Hello.
</veui-popover>
</veui-grid-column>
<veui-grid-column
:span="1"
:offset="3"
>
<span
ref="rs"
class="target"
>right-start</span>
<veui-popover
target="rs"
position="right-start"
>
Hello.
</veui-popover>
</veui-grid-column>
</veui-grid-row>
<veui-grid-row>
<veui-grid-column :span="1">
<span
ref="l"
class="target"
>left</span>
<veui-popover
target="l"
position="left"
>
Hello.
</veui-popover>
</veui-grid-column>
<veui-grid-column
:span="1"
:offset="3"
>
<span
ref="r"
class="target"
>right</span>
<veui-popover
target="r"
position="right"
>
Hello.
</veui-popover>
</veui-grid-column>
</veui-grid-row>
<veui-grid-row>
<veui-grid-column :span="1">
<span
ref="le"
class="target"
>left-end</span>
<veui-popover
target="le"
position="left-end"
>
Hello.
</veui-popover>
</veui-grid-column>
<veui-grid-column
:span="1"
:offset="3"
>
<span
ref="re"
class="target"
>right-end</span>
<veui-popover
target="re"
position="right-end"
>
Hello.
</veui-popover>
</veui-grid-column>
</veui-grid-row>
<veui-grid-row>
<veui-grid-column
:span="1"
:offset="1"
>
<span
ref="bs"
class="target"
>bottom-start</span>
<veui-popover
target="bs"
position="bottom-start"
>
Hello.
</veui-popover>
</veui-grid-column>
<veui-grid-column :span="1">
<span
ref="b"
class="target"
>bottom</span>
<veui-popover
target="b"
position="bottom"
>
Hello.
</veui-popover>
</veui-grid-column>
<veui-grid-column :span="1">
<span
ref="be"
class="target"
>bottom-end</span>
<veui-popover
target="be"
position="bottom-end"
>
Hello.
</veui-popover>
</veui-grid-column>
</veui-grid-row>
</veui-grid-container>
</article>
</template>
<script>
import { GridContainer, GridRow, GridColumn, Popover } from 'veui'
export default {
components: {
'veui-grid-container': GridContainer,
'veui-grid-row': GridRow,
'veui-grid-column': GridColumn,
'veui-popover': Popover
},
data () {
return {
ui: null
}
}
}
</script>
<style lang="less" scoped docs>
.veui-grid-container {
width: 80%;
min-width: 600px;
}
.veui-grid-row {
margin-bottom: 20px;
}
.veui-grid-column {
text-align: center;
vertical-align: middle;
line-height: 2;
}
.target {
display: inline-block;
width: 100%;
padding: 0.5em 0;
border: 1px solid #999;
border-radius: 2px;
transition: background-color 0.3s;
cursor: pointer;
&:hover {
background-color: #f7f7f7;
}
}
</style>

78
one/docs/demo/popover/trigger.vue Normal file
View File

@@ -0,0 +1,78 @@
<template>
<article>
<section>
<code>trigger="{{ trigger }}"</code>
</section>
<section>
Open trigger: <veui-select
v-model="open"
:options="triggers"
/>
</section>
<section>
Close trigger: <veui-select
v-model="close"
:options="triggers"
/>
</section>
<section>
<span
ref="text"
tabindex="0"
>Trigger <b><code>{{ open }}</code></b> over here.</span>
<veui-popover
target="text"
:trigger="trigger"
>
This is a popover.
</veui-popover>
</section>
</article>
</template>
<script>
import { Popover, Select } from 'veui'
export default {
components: {
'veui-popover': Popover,
'veui-select': Select
},
data () {
return {
open: 'hover',
close: 'hover',
triggers: [
{ label: 'hover', value: 'hover' },
{ label: 'click', value: 'click' },
{ label: 'mousedown', value: 'mousedown' },
{ label: 'mouseup', value: 'mouseup' },
{ label: 'focus', value: 'focus' }
]
}
},
computed: {
trigger () {
if (this.open === this.close) {
return this.open
}
return `${this.open}-${this.close}`
}
}
}
</script>
<style lang="less" scoped docs>
section + section {
margin-top: 20px;
}
span {
outline: none;
&.focus-visible {
outline: 2px solid #ccc;
outline-offset: 3px;
}
}
</style>

64
one/docs/demo/popover/ui.vue Normal file
View File

@@ -0,0 +1,64 @@
<template>
<article>
<section>
<veui-select
v-model="ui"
:options="options"
/>
<veui-button @click="reset">
reset
</veui-button>
</section>
<section>
<span ref="text">Move your mouse pointer over here.</span>
<veui-popover
:ui="ui"
target="text"
>
This is a popover.
</veui-popover>
</section>
</article>
</template>
<script>
import { Popover, Select, Button } from 'veui'
export default {
components: {
'veui-select': Select,
'veui-button': Button,
'veui-popover': Popover
},
data () {
return {
ui: null,
options: [
{
label: 's',
value: 's'
},
{
label: 'm',
value: 'm'
}
]
}
},
methods: {
reset () {
this.ui = null
}
}
}
</script>
<style lang="less" scoped docs>
section + section {
margin-top: 20px;
}
.veui-select {
max-width: 120px;
margin-right: 10px;
}
</style>