feat: refine mobile toc and section titles
This commit is contained in:
Justineo
parent
1bc227d890
commit
78d224f4ed
@ -1,22 +1,39 @@
|
||||
<template>
|
||||
<nav class="one-toc">
|
||||
<nav
|
||||
v-outside="collapseToc"
|
||||
class="one-toc"
|
||||
:class="{ expanded }"
|
||||
>
|
||||
<veui-anchor
|
||||
ui="s"
|
||||
sticky
|
||||
target-offset="120px"
|
||||
sticky-offset="20px"
|
||||
:items="flattenItems"
|
||||
/>
|
||||
<div
|
||||
class="toggle"
|
||||
@click="toggleToc"
|
||||
>
|
||||
<veui-icon
|
||||
class="collapsed-icon"
|
||||
name="list-unordered"
|
||||
/>
|
||||
</div>
|
||||
</nav>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Anchor } from 'veui'
|
||||
import { Anchor, Icon } from 'veui'
|
||||
import outside from 'veui/directives/outside'
|
||||
import 'veui-theme-dls-icons/list-unordered'
|
||||
|
||||
export default {
|
||||
name: 'one-toc',
|
||||
directives: {
|
||||
outside
|
||||
},
|
||||
components: {
|
||||
'veui-anchor': Anchor
|
||||
'veui-anchor': Anchor,
|
||||
'veui-icon': Icon
|
||||
},
|
||||
props: {
|
||||
items: {
|
||||
@ -24,10 +41,84 @@ export default {
|
||||
default: () => []
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
expanded: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
flattenItems () {
|
||||
return this.items.flatMap(({ children }) => children || [])
|
||||
return this.items.flatMap(
|
||||
({ children }) => (children || []).map(({ children, ...child }) => child) || []
|
||||
)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
toggleToc () {
|
||||
this.expanded = !this.expanded
|
||||
},
|
||||
collapseToc () {
|
||||
if (this.expanded) {
|
||||
this.expanded = false
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@media (max-width 480px)
|
||||
.one-toc
|
||||
background-color #fff
|
||||
z-index 20
|
||||
top 0
|
||||
right 0
|
||||
bottom 0
|
||||
left auto
|
||||
padding 40px 60px 40px 0
|
||||
transition transform 0.3s
|
||||
transform translateX(100%)
|
||||
|
||||
&::before
|
||||
content ''
|
||||
position absolute
|
||||
top 0
|
||||
bottom 0
|
||||
left 0
|
||||
width 1px
|
||||
background-color #e2e6f0
|
||||
|
||||
&.expanded
|
||||
transform translateX(0)
|
||||
|
||||
.toggle
|
||||
z-index -1
|
||||
display flex
|
||||
align-items center
|
||||
justify-content center
|
||||
width 36px
|
||||
height 36px
|
||||
position absolute
|
||||
top 80px
|
||||
right 100%
|
||||
border 1px solid #e2e6f0
|
||||
border-top-left-radius 4px
|
||||
border-bottom-left-radius 4px
|
||||
background-color #fff
|
||||
box-shadow 0 0 12px rgba(0, 0, 0, 0.1)
|
||||
font-size 20px
|
||||
transition transform 0.3s, opacity 0.3s
|
||||
|
||||
&::before
|
||||
content ""
|
||||
position absolute
|
||||
top 0
|
||||
bottom 0
|
||||
right -19px
|
||||
width 20px
|
||||
background-color #fff
|
||||
|
||||
&.expanded .toggle
|
||||
transform translateX(100%)
|
||||
opacity 0
|
||||
</style>
|
||||
|
||||
@ -112,8 +112,8 @@ main
|
||||
|
||||
<style lang="stylus">
|
||||
.one-toc
|
||||
position absolute
|
||||
left 100%
|
||||
position fixed
|
||||
left calc(max(840px, min(1346px, 100vw)) - 20px)
|
||||
top 120px
|
||||
</style>
|
||||
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
|
||||
## 示例
|
||||
|
||||
### 触发建议的时机
|
||||
### 建议触发时机
|
||||
|
||||
设置 [`suggest-trigger`](#props-suggest-trigger) 来指定触发建议的时机。
|
||||
|
||||
|
||||
@ -14,7 +14,7 @@
|
||||
|
||||
[[ demo src="/demo/badge/number.vue" ]]
|
||||
|
||||
### 右上角圆点徽标
|
||||
### 圆点徽标
|
||||
|
||||
不提供徽标内容时，徽标将以圆点样式显示在右上角。
|
||||
|
||||
|
||||
@ -14,7 +14,7 @@
|
||||
|
||||
[[ demo src="/demo/button-group/size.vue" ]]
|
||||
|
||||
### 使用 `items` 数据源
|
||||
### 使用数据源
|
||||
|
||||
可以使用 [`items`](#props-items) 属性通过数据源指定按钮内容。
|
||||
|
||||
|
||||
@ -8,7 +8,7 @@
|
||||
|
||||
[[ demo src="/demo/calendar/default.vue" ]]
|
||||
|
||||
### 多日选择、日期范围选择
|
||||
### 多日、日期范围选择
|
||||
|
||||
配置 [`multiple`](#props-multiple) 属性时，可以选择多个日期。配置 [`range`](#props-range) 属性时，可以选择一个日期范围。
|
||||
|
||||
@ -38,7 +38,7 @@
|
||||
|
||||
[[ demo src="/demo/calendar/disabled-date.vue" ]]
|
||||
|
||||
### 自定义日期的样式
|
||||
### 自定义日期样式
|
||||
|
||||
设置 [`date-class`](#props-date-class) 来自定义指定日期的 `class`。
|
||||
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
|
||||
## 示例
|
||||
|
||||
### 配置 `Select` 的 `placeholder`
|
||||
### 配置占位符
|
||||
|
||||
[[ demo src="/demo/config-provider/select.vue" ]]
|
||||
|
||||
|
||||
@ -28,7 +28,7 @@
|
||||
|
||||
[[ demo src="/demo/dialog/stack.vue" ]]
|
||||
|
||||
### Loading or Disabled
|
||||
### 加载与禁用态
|
||||
|
||||
[[ demo src="/demo/dialog/status.vue" ]]
|
||||
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
Modal
|
||||
</veui-checkbox>
|
||||
<veui-checkbox v-model="outsideClosable">
|
||||
outside Closable
|
||||
Outside Closable
|
||||
</veui-checkbox>
|
||||
</section>
|
||||
|
||||
|
||||
@ -14,7 +14,7 @@ Available size variants for the [`ui`](#props-ui) prop: `xs` / `s` / `m` / `l` /
|
||||
|
||||
[[ demo src="/demo/button-group/size.vue" ]]
|
||||
|
||||
### Use datasource via `items`
|
||||
### Using datasource
|
||||
|
||||
Use the [`items`](#props-items) prop to provide content with a datasource.
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user