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

feat: refine demo with browser window, update veui

Browse Source
This commit is contained in:
Justineo
2022-04-25 20:34:38 +08:00
parent f516b26edd
commit f3d12243b9
12 changed files with 203 additions and 233 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
one/docs/demo/layout/basic.vue
View File

@@ -1,22 +1,20 @@
<template>
<article>
<veui-layout>
<veui-header>Header</veui-header>
<veui-layout>
<veui-header>Header</veui-header>
<veui-sidebar>
<div class="center full">
Sidebar
</div>
</veui-sidebar>
<veui-layout>
<veui-sidebar>
<div class="center full">
Sidebar
</div>
</veui-sidebar>
<veui-layout>
<veui-content>Content</veui-content>
<veui-footer style="background: #ccc;">
Footer（背景仅为演示）
</veui-footer>
</veui-layout>
<veui-content>Content</veui-content>
<veui-footer style="background: #ccc;">
Footer（背景仅为演示）
</veui-footer>
</veui-layout>
</veui-layout>
</article>
</veui-layout>
</template>
<script>
@@ -34,14 +32,6 @@ export default {
</script>
<style lang="less" scoped>
article {
height: 100%;
& > .veui-layout {
min-width: 720px;
}
}
.center,
.veui-layout-header,
.veui-layout-footer,

34
one/docs/demo/layout/global-footer.vue
View File

@@ -1,22 +1,20 @@
<template>
<article>
<veui-layout>
<veui-header>Header</veui-header>
<veui-layout>
<veui-header>Header</veui-header>
<veui-sidebar>
<div class="center full">
Sidebar
</div>
</veui-sidebar>
<veui-layout>
<veui-sidebar>
<div class="center full">
Sidebar
</div>
</veui-sidebar>
<veui-layout>
<veui-content>Content</veui-content>
</veui-layout>
<veui-content>Content</veui-content>
</veui-layout>
<veui-footer style="background: #ccc;">
Footer（背景仅为演示）
</veui-footer>
</veui-layout>
</article>
<veui-footer style="background: #ccc;">
Footer（背景仅为演示）
</veui-footer>
</veui-layout>
</template>
<script>
@@ -38,14 +36,6 @@ export default {
</script>
<style lang="less" scoped>
article {
height: 100%;
& > .veui-layout {
min-width: 720px;
}
}
.center,
.veui-layout-header,
.veui-layout-footer,

34
one/docs/demo/layout/global-sidebar.vue
View File

@@ -1,22 +1,20 @@
<template>
<article>
<veui-layout>
<veui-sidebar>
<div class="center full">
Sidebar
</div>
</veui-sidebar>
<veui-layout>
<veui-sidebar>
<div class="center full">
Sidebar
</div>
</veui-sidebar>
<veui-header>Header</veui-header>
<veui-layout>
<veui-header>Header</veui-header>
<veui-layout>
<veui-content>Content</veui-content>
<veui-footer style="background: #ccc;">
Footer（背景仅为演示）
</veui-footer>
</veui-layout>
<veui-content>Content</veui-content>
<veui-footer style="background: #ccc;">
Footer（背景仅为演示）
</veui-footer>
</veui-layout>
</veui-layout>
</article>
</veui-layout>
</template>
<script>
@@ -38,14 +36,6 @@ export default {
</script>
<style lang="less" scoped>
article {
height: 100%;
& > .veui-layout {
min-width: 720px;
}
}
.center,
.veui-layout-header,
.veui-layout-footer,

62
one/docs/demo/layout/sticky.vue
View File

@@ -1,37 +1,35 @@
<template>
<article>
<veui-layout style="--dls-layout-header-height: 64px;">
<veui-header sticky>
Header
</veui-header>
<veui-layout style="--dls-layout-header-height: 64px;">
<veui-header sticky>
Header
</veui-header>
<veui-layout>
<veui-sidebar
sticky
style="max-height: 320px;"
>
<div class="center full">
Sidebar
</div>
</veui-sidebar>
<veui-layout>
<veui-sidebar
sticky
style="max-height: 320px;"
>
<div class="center full">
<veui-content>
<div
class="center"
style="height: 800px;"
>
Sidebar
</div>
</veui-sidebar>
<veui-layout>
<veui-content>
<div
class="center"
style="height: 800px;"
>
Sidebar
</div>
</veui-content>
<veui-footer
sticky
style="background: #ccc;"
>
Footer（背景仅为演示）
</veui-footer>
</veui-layout>
</veui-content>
<veui-footer
sticky
style="background: #ccc;"
>
Footer（背景仅为演示）
</veui-footer>
</veui-layout>
</veui-layout>
</article>
</veui-layout>
</template>
<script>
@@ -58,14 +56,6 @@ export default {
</script>
<style lang="less" scoped>
article {
height: 100%;
& > .veui-layout {
min-width: 720px;
}
}
.center,
.veui-layout-header,
.veui-layout-footer,

51
one/docs/demo/sidebar/collapse-mode.vue
View File

@@ -1,24 +1,28 @@
<template>
<article>
<veui-radio-button-group
v-model="mode"
:items="modes"
/>
<div class="mock-window">
<veui-layout>
<veui-header>Header</veui-header>
<veui-layout>
<veui-sidebar
collapsible
:collapse-mode="mode"
>
<div class="center full">
Sidebar
</div>
</veui-sidebar>
<veui-layout>
<veui-header>Header</veui-header>
<veui-layout>
<veui-sidebar :collapse-mode="mode">
<div class="center full">Sidebar</div>
</veui-sidebar>
<veui-layout>
<veui-content>Content</veui-content>
<veui-footer style="background: #ccc;">Footer（背景仅为演示）</veui-footer>
</veui-layout>
</veui-layout>
<veui-content>
<veui-radio-button-group
v-model="mode"
:items="modes"
/>
</veui-content>
<veui-footer style="background: #ccc;">
Footer（背景仅为演示）
</veui-footer>
</veui-layout>
</div>
</article>
</veui-layout>
</veui-layout>
</template>
<script>
@@ -46,17 +50,6 @@ export default {
</script>
<style lang="less" scoped>
.mock-window {
height: 384px;
transform: translate(0, 0); // bfc for fixed
overflow: auto;
border: 1px solid #eee;
& > .veui-layout {
min-width: 860px;
}
}
.center,
.veui-layout-header,
.veui-layout-footer,

53
one/docs/demo/sidebar/collapsible.vue
View File

@@ -1,24 +1,30 @@
<template>
<article>
<div class="mock-window">
<veui-layout>
<veui-header>Header</veui-header>
<veui-layout>
<veui-sidebar :collapsible="collapsible">
<div class="center full">
Sidebar
</div>
</veui-sidebar>
<veui-layout>
<veui-header>Header</veui-header>
<veui-layout>
<veui-sidebar :collapsible="false">
<div class="center full">Sidebar</div>
</veui-sidebar>
<veui-layout>
<veui-content>Content</veui-content>
<veui-footer style="background: #ccc;">Footer（背景仅为演示</veui-footer>
</veui-layout>
</veui-layout>
<veui-content>
<veui-switch
v-model="collapsible"
>
Collapsible
</veui-switch>
</veui-content>
<veui-footer style="background: #ccc;">
Footer（背景仅为演示
</veui-footer>
</veui-layout>
</div>
</article>
</veui-layout>
</veui-layout>
</template>
<script>
import { Layout, Header, Footer, Sidebar, Content } from 'veui'
import { Layout, Header, Footer, Sidebar, Content, Switch } from 'veui'
export default {
components: {
@@ -26,21 +32,18 @@ export default {
'veui-header': Header,
'veui-footer': Footer,
'veui-sidebar': Sidebar,
'veui-content': Content
'veui-content': Content,
'veui-switch': Switch
},
data () {
return {
collapsible: true
}
}
}
</script>
<style lang="less" scoped>
.mock-window {
height: 384px;
transform: translate(0, 0); // bfc for fixed
& > .veui-layout {
min-width: 860px;
}
}
.center,
.veui-layout-header,
.veui-layout-footer,

36
one/docs/demo/sidenav/collaspible.vue
View File

@@ -1,23 +1,21 @@
<template>
<article>
<veui-layout>
<veui-header>Header</veui-header>
<veui-layout>
<veui-header>Header</veui-header>
<veui-sidebar collapsible>
<veui-sidenav
:items="items"
collapsible
/>
</veui-sidebar>
<veui-layout>
<veui-sidebar collapsible>
<veui-sidenav
:items="items"
collapsible
/>
</veui-sidebar>
<veui-layout>
<veui-content>Content</veui-content>
<veui-footer style="background: #ccc;">
Footer（背景仅为演示）
</veui-footer>
</veui-layout>
<veui-content>Content</veui-content>
<veui-footer style="background: #ccc;">
Footer（背景仅为演示）
</veui-footer>
</veui-layout>
</veui-layout>
</article>
</veui-layout>
</template>
<script>
@@ -113,14 +111,6 @@ export default {
</script>
<style lang="less" scoped>
article {
height: 100%;
& > .veui-layout {
min-width: 720px;
}
}
.veui-layout-header,
.veui-layout-footer,
.veui-layout-content {