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

67
one/docs/demo/overlay/position.vue Normal file
View File

@@ -0,0 +1,67 @@
<template>
<article>
<veui-button
ref="toggle"
@click="open = !open"
>
Toggle
</veui-button>
<veui-overlay
:open.sync="open"
overlay-class="centered-overlay"
>
<div v-outside:toggle="hide">
Centered
</div>
</veui-overlay>
</article>
</template>
<script>
import { Overlay, Button } from 'veui'
import outside from 'veui/directives/outside'
export default {
components: {
'veui-overlay': Overlay,
'veui-button': Button
},
directives: { outside },
data () {
return {
open: false
}
},
methods: {
hide () {
this.open = false
}
}
}
</script>
<style lang="less">
.centered-overlay {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 200px;
height: 100px;
}
</style>
<style lang="less" docs>
@import "~veui-theme-dls/lib.less";
.centered-overlay {
line-height: 100px;
text-align: center;
border: 1px solid @veui-gray-color-5;
background-color: #fff;
}
</style>
<docs>
使用常见的 CSS 定位方法，可以自定义。
</docs>

45
one/docs/demo/overlay/relative-base.vue Normal file
View File

@@ -0,0 +1,45 @@
<template>
<article>
<veui-button
ref="toggle"
@click="open = !open"
>
Toggle
</veui-button>
<veui-overlay
target="toggle"
position="top-start"
:open.sync="open"
overlay-class="relative-overlay"
>
<div v-outside:toggle="hide">
Relatively Positioned
</div>
</veui-overlay>
</article>
</template>
<script>
import { Overlay, Button } from 'veui'
import outside from 'veui/directives/outside'
export default {
components: {
'veui-overlay': Overlay,
'veui-button': Button
},
directives: { outside },
data () {
return {
open: false
}
},
methods: {
hide () {
this.open = false
}
}
}
</script>
<style lang="less" src="./relative.less" docs></style>

18
one/docs/demo/overlay/relative.less Normal file
View File

@@ -0,0 +1,18 @@
@import "~veui-theme-dls/lib.less";
.veui-overlay {
display: none;
}
.relative-overlay {
width: 200px;
height: 100px;
line-height: 100px;
text-align: center;
border: 1px solid @veui-gray-color-5;
background-color: #fff;
.veui-button {
margin-left: 10px;
}
}

100
one/docs/demo/overlay/stack-display-order-with-on-overlay.vue Normal file
View File

@@ -0,0 +1,100 @@
<template>
<article>
<veui-button
ref="a"
@click="aOpen = !aOpen"
>
Toggle A
</veui-button>
<veui-overlay
target="a"
position="top-start"
:open.sync="aOpen"
overlay-class="relative-overlay"
>
A
</veui-overlay>
<veui-button
ref="b"
@click="bOpen = !bOpen"
>
Toggle B
</veui-button>
<veui-overlay
target="b"
position="top-start"
:open.sync="bOpen"
overlay-class="relative-overlay"
>
B
<veui-button
ref="b-a"
ui="s"
@click="bAOpen = !bAOpen"
>
Toggle B-A
</veui-button>
<veui-overlay
target="b-a"
position="top-start"
:open.sync="bAOpen"
overlay-class="relative-overlay"
>
B-A
</veui-overlay>
</veui-overlay>
<veui-button
ref="c"
@click="cOpen = !cOpen"
>
Toggle C
</veui-button>
<veui-overlay
target="c"
position="top-start"
:open.sync="cOpen"
overlay-class="relative-overlay"
>
C
</veui-overlay>
<veui-button
ui="xs"
@click="aOpen = bOpen = cOpen = bAOpen = false"
>
Hide all
</veui-button>
</article>
</template>
<script>
import { Overlay, Button } from 'veui'
export default {
components: {
'veui-overlay': Overlay,
'veui-button': Button
},
data () {
return {
aOpen: false,
bOpen: false,
cOpen: false,
bAOpen: false
}
}
}
</script>
<style lang="less" docs scoped>
.veui-overlay {
display: none;
}
.veui-button {
margin-right: 10px;
}
</style>
<style lang="less" src="./relative.less" docs></style>

84
one/docs/demo/overlay/stack-display-order.vue Normal file
View File

@@ -0,0 +1,84 @@
<template>
<article>
<veui-button
ref="a"
@click="aOpen = !aOpen"
>
Toggle A
</veui-button>
<veui-overlay
target="a"
position="top-start"
:open.sync="aOpen"
overlay-class="relative-overlay"
>
A
</veui-overlay>
<veui-button
ref="b"
@click="bOpen = !bOpen"
>
Toggle B
</veui-button>
<veui-overlay
target="b"
position="top-start"
:open.sync="bOpen"
overlay-class="relative-overlay"
>
B
</veui-overlay>
<veui-button
ref="c"
@click="cOpen = !cOpen"
>
Toggle C
</veui-button>
<veui-overlay
target="c"
position="top-start"
:open.sync="cOpen"
overlay-class="relative-overlay"
>
C
</veui-overlay>
<veui-button
ui="xs"
@click="aOpen = bOpen = cOpen = false"
>
Hide all
</veui-button>
</article>
</template>
<script>
import { Overlay, Button } from 'veui'
export default {
components: {
'veui-overlay': Overlay,
'veui-button': Button
},
data () {
return {
aOpen: false,
bOpen: false,
cOpen: false
}
}
}
</script>
<style lang="less" docs scoped>
.veui-overlay {
display: none;
}
.veui-button {
margin-right: 10px;
}
</style>
<style lang="less" src="./relative.less" docs></style>

69
one/docs/demo/overlay/stack-on-overlay.vue Normal file
View File

@@ -0,0 +1,69 @@
<template>
<article>
<veui-button
ref="parent"
@click="parentOpen = !parentOpen"
>
Toggle
</veui-button>
<veui-overlay
target="parent"
position="top-start"
:open.sync="parentOpen"
overlay-class="relative-overlay"
>
<veui-button
ref="child"
@click="childOpen = !childOpen"
>
Toggle
</veui-button>
<veui-overlay
target="child"
position="top-start"
:open.sync="childOpen"
overlay-class="relative-overlay"
>
Child Overlay
</veui-overlay>
</veui-overlay>
<veui-button
ui="xs"
@click="parentOpen = childOpen = false"
>
Hide all
</veui-button>
</article>
</template>
<script>
import { Overlay, Button } from 'veui'
export default {
components: {
'veui-overlay': Overlay,
'veui-button': Button
},
data () {
return {
parentOpen: false,
childOpen: false
}
},
watch: {
parentOpen (val) {
if (!val) {
this.childOpen = false
}
}
}
}
</script>
<style lang="less" docs scoped>
.veui-button {
margin-right: 10px;
}
</style>
<style lang="less" src="./relative.less" docs></style>