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/tooltip/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-tooltip
target="ts"
position="top-start"
>
Hello.
</veui-tooltip>
</veui-grid-column>
<veui-grid-column :span="1">
<span
ref="t"
class="target"
>top</span>
<veui-tooltip
target="t"
position="top"
>
Hello.
</veui-tooltip>
</veui-grid-column>
<veui-grid-column :span="1">
<span
ref="te"
class="target"
>top-end</span>
<veui-tooltip
target="te"
position="top-end"
>
Hello.
</veui-tooltip>
</veui-grid-column>
</veui-grid-row>
<veui-grid-row>
<veui-grid-column :span="1">
<span
ref="ls"
class="target"
>left-start</span>
<veui-tooltip
target="ls"
position="left-start"
>
Hello.
</veui-tooltip>
</veui-grid-column>
<veui-grid-column
:span="1"
:offset="3"
>
<span
ref="rs"
class="target"
>right-start</span>
<veui-tooltip
target="rs"
position="right-start"
>
Hello.
</veui-tooltip>
</veui-grid-column>
</veui-grid-row>
<veui-grid-row>
<veui-grid-column :span="1">
<span
ref="l"
class="target"
>left</span>
<veui-tooltip
target="l"
position="left"
>
Hello.
</veui-tooltip>
</veui-grid-column>
<veui-grid-column
:span="1"
:offset="3"
>
<span
ref="r"
class="target"
>right</span>
<veui-tooltip
target="r"
position="right"
>
Hello.
</veui-tooltip>
</veui-grid-column>
</veui-grid-row>
<veui-grid-row>
<veui-grid-column :span="1">
<span
ref="le"
class="target"
>left-end</span>
<veui-tooltip
target="le"
position="left-end"
>
Hello.
</veui-tooltip>
</veui-grid-column>
<veui-grid-column
:span="1"
:offset="3"
>
<span
ref="re"
class="target"
>right-end</span>
<veui-tooltip
target="re"
position="right-end"
>
Hello.
</veui-tooltip>
</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-tooltip
target="bs"
position="bottom-start"
>
Hello.
</veui-tooltip>
</veui-grid-column>
<veui-grid-column :span="1">
<span
ref="b"
class="target"
>bottom</span>
<veui-tooltip
target="b"
position="bottom"
>
Hello.
</veui-tooltip>
</veui-grid-column>
<veui-grid-column :span="1">
<span
ref="be"
class="target"
>bottom-end</span>
<veui-tooltip
target="be"
position="bottom-end"
>
Hello.
</veui-tooltip>
</veui-grid-column>
</veui-grid-row>
</veui-grid-container>
</article>
</template>
<script>
import { GridContainer, GridRow, GridColumn, Tooltip } from 'veui'
export default {
components: {
'veui-grid-container': GridContainer,
'veui-grid-row': GridRow,
'veui-grid-column': GridColumn,
'veui-tooltip': Tooltip
},
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>

45
one/docs/demo/tooltip/style.vue Normal file
View File

@@ -0,0 +1,45 @@
<template>
<article>
<section>
<veui-checkbox
v-model="ui"
true-value="reverse"
:false-value="null"
ui="s"
>
Reverse style
</veui-checkbox>
</section>
<section>
<span ref="text">Move your mouse pointer over here.</span>
<veui-tooltip
target="text"
:ui="ui"
>
This is a tooltip.
</veui-tooltip>
</section>
</article>
</template>
<script>
import { Tooltip, Checkbox } from 'veui'
export default {
components: {
'veui-tooltip': Tooltip,
'veui-checkbox': Checkbox
},
data () {
return {
ui: null
}
}
}
</script>
<style lang="less" scoped docs>
section + section {
margin-top: 20px;
}
</style>

78
one/docs/demo/tooltip/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-tooltip
target="text"
:trigger="trigger"
>
This is a tooltip.
</veui-tooltip>
</section>
</article>
</template>
<script>
import { Tooltip, Select } from 'veui'
export default {
components: {
'veui-tooltip': Tooltip,
'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>