feat:1. backtop组件新增组件样式和图标样式的常用属性,方便使用 \n 2. 更新backtop API 文档
This commit is contained in:
sight
parent
f702603843
commit
f5586dec46
@ -135,15 +135,26 @@ export default {
|
|||||||
|
|
||||||
::: table
|
::: table
|
||||||
|
|
||||||
| 属性 | 说明 | 类型 | 可选值 |
|
| 属性 | 说明 | 类型 | 可选值 |
|
||||||
| ---------- | --------------------------------------------------- | ------- | ------------------------ |
|
| ------------ | --------------------------------------------- | ------- | -------------------------- |
|
||||||
| target | 可选，触发滚动的对象 | string | 元素选择器 \| window(默认) |
|
| <strong>通用属性</strong> |
|
||||||
| showHeight | 可选，滚动高度达到该值后显示回到顶部按钮 | number | 200(默认) |
|
| target | 可选，触发滚动的对象 | string | 元素选择器 \| window(默认) |
|
||||||
| position | 可选，定位方式，特定容器内部需设置为 absolute | string | absolute \| fixed(默认) |
|
| showHeight | 可选，滚动高度达到该值后显示回到顶部按钮 | number | 200(默认) |
|
||||||
| right | 可选，按钮距离页面右边距，单位 px | number | 30(默认) |
|
| disabled | 可选，禁用点击返回顶部 | boolean | true \| false(默认) |
|
||||||
| bottom | 可选，按钮距离页面底部位置，单位 px | number | 40(默认) |
|
| <strong>组件样式</strong> |
|
||||||
| bgcolor | 可选，背景颜色 | string | \#9F9F9F(默认) |
|
| position | 可选，定位方式，特定容器内部需设置为 absolute | string | absolute \| fixed(默认) |
|
||||||
| disabled | 可选，禁用点击返回顶部 | boolean | true \| false(默认) |
|
| right | 可选，按钮距离页面右边距，单位 px | number | 30(默认) |
|
||||||
|
| bottom | 可选，按钮距离页面底部位置，单位 px | number | 40(默认) |
|
||||||
|
| bgcolor | 可选，背景颜色 | string | \#9F9F9F(默认) |
|
||||||
|
| opacity | 可选，不透明度 | number | 0.0-1.0 |
|
||||||
|
| color | 可选，前景颜色 | string | #FFFFFF |
|
||||||
|
| borderRadius | 可选，添加圆角 | string | 2px(默认) |
|
||||||
|
| <strong>图标样式</strong>
|
||||||
|
| icon | 可选,图标类型 | string | layui-icon-top(默认) |
|
||||||
|
| iconSize | 可选,图标大小 | number | 30 |
|
||||||
|
| iconPrefix | 可选,图标前缀layui-icon layui-icon-top | string | layui-icon(默认) |
|
||||||
|
| iconColor | 可选,图标颜色 | string | #FFFFFF(默认) |
|
||||||
|
|
||||||
|
|
||||||
:::
|
:::
|
||||||
|
|
||||||
@ -152,8 +163,8 @@ export default {
|
|||||||
|
|
||||||
::: table
|
::: table
|
||||||
|
|
||||||
| 事件名 | 说明 | 回调参数 |
|
| 事件名 | 说明 | 回调参数 |
|
||||||
| ------ | ------------------------- | -------- |
|
| ------ | -------------------------- | -------- |
|
||||||
| click | 点击回到顶部按钮的回调函数 | event |
|
| click | 点击回到顶部按钮的回调函数 | event |
|
||||||
|
|
||||||
:::
|
:::
|
||||||
@ -163,8 +174,8 @@ export default {
|
|||||||
|
|
||||||
::: table
|
::: table
|
||||||
|
|
||||||
| 插槽名 | 说明 |
|
| 插槽名 | 说明 |
|
||||||
| ------ | ------------------ |
|
| ------ | ---------- |
|
||||||
| — | 自定义内容 |
|
| — | 自定义内容 |
|
||||||
|
|
||||||
:::
|
:::
|
||||||
|
|||||||
@ -1,4 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
|
<!-- FIXME style为临时方案 -->
|
||||||
<div
|
<div
|
||||||
v-show="visible"
|
v-show="visible"
|
||||||
ref="backtopRef"
|
ref="backtopRef"
|
||||||
@ -6,14 +7,23 @@
|
|||||||
:style="{
|
:style="{
|
||||||
right: `${props.right}px`,
|
right: `${props.right}px`,
|
||||||
bottom: `${props.bottom}px`,
|
bottom: `${props.bottom}px`,
|
||||||
backgroundColor: `${props.bgcolor}`
|
backgroundColor: `${props.bgcolor}`,
|
||||||
|
opacity:`${props.opacity}`,
|
||||||
|
color: `${props.color}`,
|
||||||
|
borderRadius:`${props.borderRadius}`,
|
||||||
}"
|
}"
|
||||||
@click.stop="handleClick"
|
@click.stop="handleClick"
|
||||||
@mousedown="backtopRef.style.opacity=1"
|
@mousedown="backtopRef.style.opacity = 1"
|
||||||
@mouseup="backtopRef.style.opacity=0.95"
|
@mouseup="backtopRef.style.opacity = 0.95"
|
||||||
>
|
>
|
||||||
|
<!-- <i v-if="!$slots.default" :class="`layui-icon ${props.icon}`" style="font-size: 30px;"></i> -->
|
||||||
<slot>
|
<slot>
|
||||||
<lay-icon type="layui-icon-top" size="40px"></lay-icon>
|
<lay-icon
|
||||||
|
:type="`layui-icon ${props.icon}`"
|
||||||
|
:size="`${props.iconSize}px`"
|
||||||
|
:prefix="`${props.iconPrefix}`"
|
||||||
|
:color="`${props.iconColor}`">
|
||||||
|
</lay-icon>
|
||||||
</slot>
|
</slot>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@ -30,22 +40,34 @@ import layIcon from '../icon/index';
|
|||||||
import './index.less';
|
import './index.less';
|
||||||
|
|
||||||
export interface LayBacktopProps {
|
export interface LayBacktopProps {
|
||||||
|
// 通用
|
||||||
target?: string; // 触发滚动的对象
|
target?: string; // 触发滚动的对象
|
||||||
showHeight?: number;
|
showHeight?: number;
|
||||||
|
disabled?: boolean; // 禁用返回顶部
|
||||||
|
// 组件样式
|
||||||
position?: 'fixed' | 'absolute'; // 定位方式,显示在特定容器内部需要设置为 absolute
|
position?: 'fixed' | 'absolute'; // 定位方式,显示在特定容器内部需要设置为 absolute
|
||||||
right?: number;
|
right?: number;
|
||||||
bottom?: number;
|
bottom?: number;
|
||||||
bgcolor?: string;
|
bgcolor?: string; // 背景颜色
|
||||||
disabled?: boolean; // 禁用返回顶部
|
opacity?: number; // 不透明度0.01~1.00
|
||||||
|
color?: string; // 前景颜色
|
||||||
|
borderRadius?: string
|
||||||
|
// shape?: 'square' | 'circular';
|
||||||
|
// 图标样式
|
||||||
|
icon?: string;
|
||||||
|
iconSize?: number;
|
||||||
|
iconPrefix?: string;
|
||||||
|
iconColor?: string;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const props = withDefaults(defineProps<LayBacktopProps>(), {
|
const props = withDefaults(defineProps<LayBacktopProps>(), {
|
||||||
target: 'window',
|
target: 'window',
|
||||||
showHeight: 200,
|
showHeight: 200,
|
||||||
position: 'fixed',
|
|
||||||
right: 30,
|
right: 30,
|
||||||
bottom: 40,
|
bottom: 40,
|
||||||
bgcolor: '#9F9F9F',
|
icon: 'layui-icon-top',
|
||||||
|
iconSize:30,
|
||||||
disabled: false,
|
disabled: false,
|
||||||
});
|
});
|
||||||
|
|
||||||
@ -64,7 +86,7 @@ const scrollToTop = () => {
|
|||||||
behavior: 'smooth' //smooth(平滑滚动),instant(瞬间滚动)，默认instant
|
behavior: 'smooth' //smooth(平滑滚动),instant(瞬间滚动)，默认instant
|
||||||
});
|
});
|
||||||
} else {
|
} else {
|
||||||
// FIXME 初版待改进
|
// FIXME 临时动画方案待改进
|
||||||
let step = scrollTarget.value.scrollTop / 4;
|
let step = scrollTarget.value.scrollTop / 4;
|
||||||
if (scrollTarget.value.scrollTop > 0) {
|
if (scrollTarget.value.scrollTop > 0) {
|
||||||
scrollTarget.value.scrollTop -= Math.max(step, 10);
|
scrollTarget.value.scrollTop -= Math.max(step, 10);
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user