feat: refine sidenav and layout demo, update veui
This commit is contained in:
Justineo
parent
eadaad2e22
commit
f516b26edd
@ -7,7 +7,7 @@
|
||||
<browser-window
|
||||
v-if="browser"
|
||||
:url="browser"
|
||||
width="80%"
|
||||
width="calc(100% - 40px)"
|
||||
height="400px"
|
||||
>
|
||||
<slot/>
|
||||
@ -86,6 +86,7 @@
|
||||
}"
|
||||
:code="code"
|
||||
:expanded="editorExpanded"
|
||||
:browser="!!browser"
|
||||
@close="handleEditorClose"
|
||||
@toggle="handleEditorToggle"
|
||||
/>
|
||||
@ -221,6 +222,10 @@ Icon.register({
|
||||
border-top-right-radius 4px
|
||||
padding 30px
|
||||
|
||||
& >>> .style-module_body__14MV-
|
||||
transform translate(0, 0)
|
||||
padding 0
|
||||
|
||||
.desc
|
||||
border 1px solid #eee
|
||||
padding 18px 20px
|
||||
|
||||
@ -64,6 +64,9 @@
|
||||
<v-pane
|
||||
min-size="40"
|
||||
class="live-preview"
|
||||
:class="{
|
||||
'live-preview-browser': browser
|
||||
}"
|
||||
>
|
||||
<v-live-preview
|
||||
class="editor-preview"
|
||||
@ -166,7 +169,8 @@ export default {
|
||||
code: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
browser: Boolean
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
@ -321,6 +325,10 @@ export default {
|
||||
& >>> .live-preview
|
||||
overflow auto
|
||||
|
||||
.live-preview-browser
|
||||
transform translate(0, 0)
|
||||
padding 0 !important
|
||||
|
||||
.editor-toolbar
|
||||
position absolute
|
||||
top 12px
|
||||
|
||||
@ -21,6 +21,7 @@
|
||||
<one-live
|
||||
class="editor"
|
||||
:code="code"
|
||||
:browser="browser"
|
||||
/>
|
||||
</article>
|
||||
</template>
|
||||
@ -60,7 +61,8 @@ export default {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
expanded: Boolean
|
||||
expanded: Boolean,
|
||||
browser: Boolean
|
||||
},
|
||||
methods: {
|
||||
handleClose () {
|
||||
|
||||
@ -10,15 +10,15 @@
|
||||
|
||||
`Layout` 组件支持多种典型布局。
|
||||
|
||||
[[ demo src="/demo/layout/basic.vue" ]]
|
||||
[[ demo src="/demo/layout/basic.vue" browser="/demos/layout/basic.vue" ]]
|
||||
|
||||
### 通顶侧边栏
|
||||
|
||||
[[ demo src="/demo/layout/global-sidebar.vue" ]]
|
||||
[[ demo src="/demo/layout/global-sidebar.vue" browser="/demos/layout/global-sidebar.vue" ]]
|
||||
|
||||
### 通栏底部
|
||||
|
||||
[[ demo src="/demo/layout/global-footer.vue" ]]
|
||||
[[ demo src="/demo/layout/global-footer.vue" browser="/demos/layout/global-footer.vue" ]]
|
||||
|
||||
### 吸顶/吸底布局
|
||||
|
||||
@ -32,7 +32,7 @@
|
||||
当吸底的布局底部和吸顶侧边栏一起使用需要在布局底部的父组件 `Layout` 上设置 `--dls-layout-footer-height` 来指定布局底部的高度。
|
||||
:::
|
||||
|
||||
[[ demo src="/demo/layout/sticky.vue" ]]
|
||||
[[ demo src="/demo/layout/sticky.vue" browser="/demos/layout/sticky.vue" ]]
|
||||
|
||||
## API
|
||||
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
# Menu <small>边栏菜单</small>
|
||||
# Sidenav <small>边栏菜单</small>
|
||||
|
||||
## 示例
|
||||
|
||||
@ -6,17 +6,17 @@
|
||||
|
||||
结合 Vue Router 使用边栏菜单。
|
||||
|
||||
[[ demo src="/demo/menu/normal.vue" ]]
|
||||
[[ demo src="/demo/sidenav/normal.vue" ]]
|
||||
|
||||
### 可折叠
|
||||
|
||||
使用 [`collapsible`](#props-collapsible) 属性控制菜单是否可以折叠。
|
||||
配合 `Sidebar` 的 [`collapsible`](./sidebar#props-collapsible) 属性可以控制菜单的展开/收起。
|
||||
|
||||
[[ demo src="/demo/menu/collaspible.vue" ]]
|
||||
[[ demo src="/demo/sidenav/collaspible.vue" browser="/demo/sidenav/collaspible.vue" ]]
|
||||
|
||||
### 自定义插槽
|
||||
|
||||
[[ demo src="/demo/menu/slot.vue" ]]
|
||||
[[ demo src="/demo/sidenav/slot.vue" ]]
|
||||
|
||||
## API
|
||||
|
||||
@ -28,7 +28,6 @@
|
||||
| ``items`` | `Array<Object>=` | `[]` | [^items] |
|
||||
| ``active`` | `string` | - | [^active] |
|
||||
| ``matches`` | `function(Object, string): boolean` | - | [^matches] |
|
||||
| ``collapsible`` | `boolean` | `false` | 整个导航菜单是否可折叠。 |
|
||||
| ``collapsed`` | `boolean` | `false` | [^collapsed] |
|
||||
| ``expanded`` | `Array<string>=` | `[]` | [^expanded] |
|
||||
|
||||
@ -139,9 +138,3 @@
|
||||
| -- | -- |
|
||||
| ``activate`` | 用户点击有 `to` 的节点触发，参数是激活节点的整个 `item` 数据。 |
|
||||
| ``click`` | 用户点击节点时触发，参数是激活节点整个 `item` 数据。 |
|
||||
|
||||
### 图标
|
||||
| 名称 | 描述 |
|
||||
| -- | -- |
|
||||
| ``expand`` | 展开。 |
|
||||
| ``collapse`` | 折叠。 |
|
||||
@ -10,10 +10,10 @@
|
||||
>
|
||||
<template #default="{ invalid, listeners }">
|
||||
<input
|
||||
v-model="formData.name"
|
||||
:class="{
|
||||
'demo-invalid': invalid
|
||||
}"
|
||||
v-model="formData.name"
|
||||
v-on="listeners"
|
||||
>
|
||||
</template>
|
||||
|
||||
@ -64,6 +64,10 @@ export default {
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
article {
|
||||
padding: 10px 12px;
|
||||
}
|
||||
|
||||
.veui-grid-row {
|
||||
& + & {
|
||||
margin: 2px 0; /* Just for showcase */
|
||||
|
||||
@ -53,6 +53,7 @@ export default {
|
||||
<style lang="less" scoped>
|
||||
article {
|
||||
width: 400px; /* Fixed-width container */
|
||||
padding: 10px 12px;
|
||||
}
|
||||
|
||||
.veui-grid-row {
|
||||
|
||||
@ -1,19 +1,21 @@
|
||||
<template>
|
||||
<article>
|
||||
<div class="mock-window">
|
||||
<veui-layout>
|
||||
<veui-header>Header</veui-header>
|
||||
<veui-layout>
|
||||
<veui-sidebar>
|
||||
<div class="center full">Sidebar</div>
|
||||
<div class="center full">
|
||||
Sidebar
|
||||
</div>
|
||||
</veui-sidebar>
|
||||
<veui-layout>
|
||||
<veui-content>Content</veui-content>
|
||||
<veui-footer style="background: #ccc;">Footer（背景仅为演示）</veui-footer>
|
||||
<veui-footer style="background: #ccc;">
|
||||
Footer（背景仅为演示）
|
||||
</veui-footer>
|
||||
</veui-layout>
|
||||
</veui-layout>
|
||||
</veui-layout>
|
||||
</div>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
@ -32,12 +34,11 @@ export default {
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.mock-window {
|
||||
height: 384px;
|
||||
transform: translate(0, 0); // bfc for fixed
|
||||
article {
|
||||
height: 100%;
|
||||
|
||||
& > .veui-layout {
|
||||
min-width: 860px;
|
||||
min-width: 720px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1,19 +1,21 @@
|
||||
<template>
|
||||
<article>
|
||||
<div class="mock-window">
|
||||
<veui-layout>
|
||||
<veui-header>Header</veui-header>
|
||||
<veui-layout>
|
||||
<veui-sidebar>
|
||||
<div class="center full">Sidebar</div>
|
||||
<div class="center full">
|
||||
Sidebar
|
||||
</div>
|
||||
</veui-sidebar>
|
||||
<veui-layout>
|
||||
<veui-content>Content</veui-content>
|
||||
</veui-layout>
|
||||
</veui-layout>
|
||||
<veui-footer style="background: #ccc;">Footer（背景仅为演示）</veui-footer>
|
||||
<veui-footer style="background: #ccc;">
|
||||
Footer（背景仅为演示）
|
||||
</veui-footer>
|
||||
</veui-layout>
|
||||
</div>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
@ -36,12 +38,11 @@ export default {
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.mock-window {
|
||||
height: 384px;
|
||||
transform: translate(0, 0); // bfc for fixed
|
||||
article {
|
||||
height: 100%;
|
||||
|
||||
& > .veui-layout {
|
||||
min-width: 860px;
|
||||
min-width: 720px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1,19 +1,21 @@
|
||||
<template>
|
||||
<article>
|
||||
<div class="mock-window">
|
||||
<veui-layout>
|
||||
<veui-sidebar>
|
||||
<div class="center full">Sidebar</div>
|
||||
<div class="center full">
|
||||
Sidebar
|
||||
</div>
|
||||
</veui-sidebar>
|
||||
<veui-layout>
|
||||
<veui-header>Header</veui-header>
|
||||
<veui-layout>
|
||||
<veui-content>Content</veui-content>
|
||||
<veui-footer style="background: #ccc;">Footer（背景仅为演示）</veui-footer>
|
||||
<veui-footer style="background: #ccc;">
|
||||
Footer（背景仅为演示）
|
||||
</veui-footer>
|
||||
</veui-layout>
|
||||
</veui-layout>
|
||||
</veui-layout>
|
||||
</div>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
@ -36,12 +38,11 @@ export default {
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.mock-window {
|
||||
height: 384px;
|
||||
transform: translate(0, 0); // bfc for fixed
|
||||
article {
|
||||
height: 100%;
|
||||
|
||||
& > .veui-layout {
|
||||
min-width: 860px;
|
||||
min-width: 720px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1,21 +1,36 @@
|
||||
<template>
|
||||
<article>
|
||||
<div class="mock-window">
|
||||
<veui-layout style="--dls-layout-header-height: 64px;">
|
||||
<veui-header sticky>Header</veui-header>
|
||||
<veui-header sticky>
|
||||
Header
|
||||
</veui-header>
|
||||
<veui-layout>
|
||||
<veui-sidebar sticky style="max-height: 320px;">
|
||||
<div class="center full">Sidebar</div>
|
||||
<veui-sidebar
|
||||
sticky
|
||||
style="max-height: 320px;"
|
||||
>
|
||||
<div class="center full">
|
||||
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-layout>
|
||||
</veui-layout>
|
||||
<div
|
||||
class="center"
|
||||
style="height: 800px;"
|
||||
>
|
||||
Sidebar
|
||||
</div>
|
||||
</veui-content>
|
||||
<veui-footer
|
||||
sticky
|
||||
style="background: #ccc;"
|
||||
>
|
||||
Footer（背景仅为演示）
|
||||
</veui-footer>
|
||||
</veui-layout>
|
||||
</veui-layout>
|
||||
</veui-layout>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
@ -43,14 +58,11 @@ export default {
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.mock-window {
|
||||
height: 384px;
|
||||
transform: translate(0, 0); // bfc for fixed
|
||||
overflow: auto;
|
||||
border: 1px solid #eee;
|
||||
article {
|
||||
height: 100%;
|
||||
|
||||
& > .veui-layout {
|
||||
min-width: 860px;
|
||||
min-width: 720px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1,25 +1,41 @@
|
||||
<template>
|
||||
<article>
|
||||
<section>
|
||||
<veui-menu
|
||||
<veui-layout>
|
||||
<veui-header>Header</veui-header>
|
||||
<veui-layout>
|
||||
<veui-sidebar collapsible>
|
||||
<veui-sidenav
|
||||
:items="items"
|
||||
collapsible
|
||||
/>
|
||||
</section>
|
||||
</veui-sidebar>
|
||||
<veui-layout>
|
||||
<veui-content>Content</veui-content>
|
||||
<veui-footer style="background: #ccc;">
|
||||
Footer（背景仅为演示）
|
||||
</veui-footer>
|
||||
</veui-layout>
|
||||
</veui-layout>
|
||||
</veui-layout>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Menu } from 'veui'
|
||||
import { Layout, Header, Footer, Sidebar, Content, Sidenav } from 'veui'
|
||||
import 'veui-theme-dls-icons/calendar'
|
||||
import 'veui-theme-dls-icons/bullseye'
|
||||
import 'veui-theme-dls-icons/clock'
|
||||
import 'veui-theme-dls-icons/eye'
|
||||
|
||||
export default {
|
||||
name: 'veui-menu-demo',
|
||||
name: 'veui-sidenav-demo',
|
||||
components: {
|
||||
'veui-menu': Menu
|
||||
'veui-layout': Layout,
|
||||
'veui-header': Header,
|
||||
'veui-footer': Footer,
|
||||
'veui-sidebar': Sidebar,
|
||||
'veui-content': Content,
|
||||
'veui-sidenav': Sidenav
|
||||
},
|
||||
data () {
|
||||
let items = [
|
||||
@ -95,3 +111,21 @@ export default {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
article {
|
||||
height: 100%;
|
||||
|
||||
& > .veui-layout {
|
||||
min-width: 720px;
|
||||
}
|
||||
}
|
||||
|
||||
.veui-layout-header,
|
||||
.veui-layout-footer,
|
||||
.veui-layout-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
</style>
|
||||
@ -1,18 +1,16 @@
|
||||
<template>
|
||||
<article>
|
||||
<section>
|
||||
<veui-menu :items="items"/>
|
||||
</section>
|
||||
<veui-sidenav :items="items"/>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Menu } from 'veui'
|
||||
import { Sidenav } from 'veui'
|
||||
|
||||
export default {
|
||||
name: 'veui-menu-demo',
|
||||
name: 'veui-sidenav-demo',
|
||||
components: {
|
||||
'veui-menu': Menu
|
||||
'veui-sidenav': Sidenav
|
||||
},
|
||||
data () {
|
||||
let items = [
|
||||
@ -1,26 +1,24 @@
|
||||
<template>
|
||||
<article>
|
||||
<section>
|
||||
<veui-menu
|
||||
<veui-sidenav
|
||||
:items="items"
|
||||
collapsible
|
||||
>
|
||||
<template #icon>
|
||||
<veui-icon name="calendar"/>
|
||||
</template>
|
||||
</veui-menu>
|
||||
</section>
|
||||
</veui-sidenav>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Menu, Icon } from 'veui'
|
||||
import { Sidenav, Icon } from 'veui'
|
||||
import 'veui-theme-dls-icons/calendar'
|
||||
|
||||
export default {
|
||||
name: 'veui-menu-demo',
|
||||
name: 'veui-sidenav-demo',
|
||||
components: {
|
||||
'veui-menu': Menu,
|
||||
'veui-sidenav': Sidenav,
|
||||
'veui-icon': Icon
|
||||
},
|
||||
data () {
|
||||
@ -308,8 +308,8 @@
|
||||
"slug": "drawer"
|
||||
},
|
||||
{
|
||||
"title": "Menu - 边栏菜单",
|
||||
"slug": "menu"
|
||||
"title": "Sidenav - 边栏菜单",
|
||||
"slug": "sidenav"
|
||||
},
|
||||
{
|
||||
"title": "Message - 消息",
|
||||
@ -714,8 +714,8 @@
|
||||
"disabled": true
|
||||
},
|
||||
{
|
||||
"title": "Menu",
|
||||
"slug": "menu",
|
||||
"title": "Sidenav",
|
||||
"slug": "sidenav",
|
||||
"disabled": true
|
||||
},
|
||||
{
|
||||
|
||||
1459
package-lock.json
generated
1459
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
10
package.json
10
package.json
@ -27,7 +27,7 @@
|
||||
"@vue/runtime-dom": "^3.2.31",
|
||||
"babel-eslint": "^10.1.0",
|
||||
"babel-plugin-lodash": "^3.3.4",
|
||||
"babel-plugin-veui": "^2.6.2",
|
||||
"babel-plugin-veui": "^2.6.3",
|
||||
"cheerio": "^1.0.0-rc.10",
|
||||
"dls-graphics": "^1.0.0-alpha.3",
|
||||
"dls-icons-vue": "^0.14.0",
|
||||
@ -86,10 +86,10 @@
|
||||
"typescript": "^4.6.2",
|
||||
"unist-util-remove": "^1.0.1",
|
||||
"unist-util-visit": "^1.4.0",
|
||||
"veui": "^2.6.2",
|
||||
"veui-loader": "^2.6.2",
|
||||
"veui-theme-dls": "^2.6.2",
|
||||
"veui-theme-dls-icons": "^2.6.2",
|
||||
"veui": "^2.6.3",
|
||||
"veui-loader": "^2.6.3",
|
||||
"veui-theme-dls": "^2.6.3",
|
||||
"veui-theme-dls-icons": "^2.6.3",
|
||||
"vue-awesome": "^4.5.0",
|
||||
"vue-i18n": "^8.16.0",
|
||||
"vue-live": "^1.17.2",
|
||||
|
||||
Loading…
Reference in New Issue
Block a user