chore: 修改 backtop 文档

This commit is contained in:
就眠儀式
2022-02-05 22:16:31 +08:00
parent b62f72baaf
commit a74c559fdd
8 changed files with 29 additions and 40 deletions

View File

@@ -3,10 +3,8 @@
::: title 基础使用
###### 回到顶部组件的默认样式,<code>lay-backtop</code> 会自动寻找最近的可滚动祖先元素,也可以使用 `target` 属性指定触发滚动事件的元素,通过滑动来查看页面右下角的正方形按钮。
:::
::: demo
::: demo 回到顶部组件的默认样式,<code>lay-backtop</code> 会自动寻找最近的可滚动祖先元素,也可以使用 `target` 属性指定触发滚动事件的元素,通过滑动来查看页面右下角的正方形按钮。
<template>
<lay-backtop></lay-backtop>
</template>
@@ -18,11 +16,8 @@
:::title 自定义
###### 回到顶部组件可自定义样式限制宽高50px \* 50px<code>showHeight = 0</code> 将始终显示,<code>disabled</code> 属性禁用返回顶部。查看页面右下角的圆形按钮。
::: demo 回到顶部组件可自定义样式限制宽高50px \* 50px<code>showHeight = 0</code> 将始终显示,<code>disabled</code> 属性禁用返回顶部。查看页面右下角的圆形按钮。
::: demo
<!-- 使用默认插槽自定义组件内容,也可以使用组件提供的样式属性快速定义常用样式样式属性能满足大多数场景。lay-backtop组件可搭配 lay-tooltip 组件使用-->
<template>
<!-- 使用默认插槽自定义 -->
<lay-tooltip content="插槽自定义 backtop " position="left">
@@ -57,10 +52,8 @@ export default {
::: title 挂载容器
###### 通过设置 <code>target</code> 和 <code>position="absolute"</code>参数,可对特定容器进行返回顶部操作
:::
::: demo
::: demo 通过设置 <code>target</code> 和 <code>position="absolute"</code>参数,可对特定容器进行返回顶部操作
<template>
<!-- 需要用一个 div 包裹触发滚动事件的目标元素和 lay-backtop 组件 -->