theluyuan/layui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(backtop):新增 size 属性，移除 iconPrefix 属性

Browse Source
This commit is contained in:
sight
2021-12-27 00:26:26 +08:00
parent d492c496bd
commit 6290973543
3 changed files with 62 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
example/docs/zh-CN/components/backtop.md
View File

@@ -1,6 +1,6 @@
::: title 基础使用
###### 回到顶部组件的默认样式，<code>lay-backtop</code> 会自动寻找最近的可滚动祖先元素，也可以使用 target 属性指定触发滚动事件的元素，通过滑动来查看页面右下角的正方形按钮。
###### 回到顶部组件的默认样式，<code>lay-backtop</code> 会自动寻找最近的可滚动祖先元素，也可以使用 `target` 属性指定触发滚动事件的元素，通过滑动来查看页面右下角的正方形按钮。
:::
::: demo
@@ -49,7 +49,7 @@ export default {
:::
::: title 滚动容器
::: title 挂载容器
###### 通过设置 <code>target</code> 和 <code>position="absolute"</code>参数，可对特定容器进行返回顶部操作
@@ -58,7 +58,7 @@ export default {
<template>
<!-- 需要用一个 div 包裹触发滚动事件的目标元素和 lay-backtop 组件 -->
<div class="scrollContainer" style="width:700px; height:300px;">
<div class="wrapper" style="width:700px; height:300px;">
<div id="scrollContent" style="overflow-y:auto; overflow-x:auto; width:700px; height:300px;background-color:whitesmoke;padding:10px;">
<lay-panel v-for="(n,index) in 50" :key="n" style="margin-top:5px;margin-bottom:5px;padding:10px;">内容</lay-panel>
</div>
@@ -76,26 +76,23 @@ export default {
::: table
| 属性 | 说明 | 类型 | 可选值 |
| ------------------------- | --------------------------------------------- | ------- | -------------------------- |
| <strong>通用属性</strong> |
| target | 可选，触发滚动事件的对象 | string | CSS 选择器 \| window(默认) |
| showHeight | 可选，滚动高度达到该值后显示回到顶部按钮 | number | 200(默认) |
| disabled | 可选，禁用点击返回顶部 | boolean | true \| false(默认) |
| <strong>组件样式</strong> |
| position | 可选，定位方式，特定容器内部需设置为 absolute | string | absolute \| fixed(默认) |
| right | 可选，按钮距离页面右边距，单位 px | number | 30(默认) |
| bottom | 可选，按钮距离页面底部位置，单位 px | number | 40(默认) |
| bgcolor | 可选，背景颜色 | string | \#9F9F9F(默认) |
| opacity | 可选，不透明度 | number | 0.0-1.0 |
| color | 可选，前景颜色 | string | #FFFFFF |
| borderRadius | 可选，添加圆角 | string | 2px(默认) |
| circle | 可选, 使用圆形按钮 | boolean | true \| false(默认)
| <strong>图标样式</strong> |
| icon | 可选,图标类型 | string | layui-icon-top(默认) |
| iconSize | 可选,图标大小 | number | 30 |
| iconPrefix | 可选,图标前缀 layui-icon layui-icon-top | string | layui-icon(默认) |
| iconColor | 可选,图标颜色 | string | #FFFFFF(默认) |
| 属性 | 描述 | 类型 | 默认值 | 可选值 |
| ------------ | --------------------------------------------- | ---------------- | ---------------- | ------------------------------ |
| target | 可选，触发滚动事件的对象 | string \| Window | `window` | `CSS/Element 选择器` `window` |
| showHeight | 可选，滚动高度达到该值后<br>显示回到顶部按钮 | number | `200` | — |
| disabled | 可选，禁用点击返回顶部 | boolean | `false` | `true` `false` |
| position | 可选，定位方式，特定容器内部<br>需设置为 absolute | string | `fixed` | `absolute` `fixed` |
| right | 可选，按钮距离页面右边距 | number | `30` | — |
| size | 可选，按钮大小 | string | —— | `medium` `small` |
| bottom | 可选，按钮距离页面底部位置 | number | `40` | `40` |
| bgcolor | 可选，背景颜色 | string | `#9F9F9F` | — |
| opacity | 可选，不透明度 | number | `0.95` | `0-1` |
| color | 可选，前景颜色 | string | `#FFFFFF` | — |
| borderRadius | 可选，添加圆角 | number \| string | `2` | e: 2 \| 2px \|50% |
| circle | 可选，使用圆形按钮 | boolean | `false` | `true` `false` |
| icon | 可选，图标类型 | string | `layui-icon-top` | `lay-icon`组件支持的所有类型 |
| iconSize | 可选，图标大小 | number | `30` | `30` |
| iconColor | 可选，图标颜色 | string | `#FFFFFF` | — |
:::
@@ -104,7 +101,7 @@ export default {
::: table
| 事件名 | 说明 | 回调参数 |
| 事件 | 描述 | 参数 |
| ------ | -------------------------- | -------- |
| click | 点击回到顶部按钮的回调函数 | event |
@@ -115,8 +112,8 @@ export default {
::: table
| 插槽名 | 说明 |
| 插槽 | 说明 |
| ------ | ---------- |
| — | 自定义内容 |
| default| 自定义内容 |
:::