Merge branch 'develop' of https://gitee.com/layui-vue/layui-vue into develop
This commit is contained in:
就眠儀式
commit
018866ff06
@ -12,7 +12,6 @@
|
||||
<a href="https://www.npmjs.com/package/layui"><img src="https://img.shields.io/npm/l/layui.svg?sanitize=true" alt="License"></a>
|
||||
<a href="https://travis-ci.org/sentsin/layui"><img alt="Build Status" src="https://img.shields.io/travis/sentsin/layui/master.svg"></a>
|
||||
<a href="https://coveralls.io/r/sentsin/layui?branch=master"><img alt="Test Coverage" src="https://img.shields.io/coveralls/sentsin/layui/master.svg"></a>
|
||||
<!--<a href="https://saucelabs.com/beta/builds/7e6196205e4f492496203388fc003b65"><img src="https://saucelabs.com/buildstatus/layui" alt="Build Status"></a>-->
|
||||
</p>
|
||||
|
||||
<!--
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
::: title 基础使用
|
||||
|
||||
###### 回到顶部组件的默认样式，通过滑动来查看页面右下角的按钮。
|
||||
###### 回到顶部组件的默认样式，通过滑动来查看页面右下角的正方形按钮。
|
||||
|
||||
:::
|
||||
::: demo
|
||||
@ -9,18 +9,6 @@
|
||||
<lay-backtop target=".layui-body"></lay-backtop>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
return {
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
:::title 自定义
|
||||
@ -29,19 +17,19 @@ export default {
|
||||
|
||||
::: demo
|
||||
|
||||
<!-- 使用默认插槽自定义组件内容,也可以使用组件提供的样式属性快速定义常用样式 -->
|
||||
<!-- 使用默认插槽自定义组件内容,也可以使用组件提供的样式属性快速定义常用样式，样式属性能满足大多数场景,lay-backtop组件可搭配 lay-tooltip 组件使用-->
|
||||
<template>
|
||||
<lay-backtop target=".layui-body" :showHeight="0" :bottom="100" @click="handlerClick" bgcolor="#FFFFFF" disabled >
|
||||
<div style="
|
||||
width:50px;
|
||||
height:50px;
|
||||
background-color: #5FB878;
|
||||
color: #FFFFFF;
|
||||
text-align: center;
|
||||
border-radius:50%">
|
||||
<i class="layui-icon layui-icon-dialogue" style="font-size:30px"></i>
|
||||
</div>
|
||||
<!-- 使用默认插槽自定义 -->
|
||||
<lay-tooltip content="插槽自定义 backtop " position="left">
|
||||
<lay-backtop target=".layui-body" :showHeight="0" :bottom="160" bgcolor="#5FB878" circular disabled>
|
||||
<lay-icon type="layui-icon-dialogue" size="30px"></lay-icon>
|
||||
</lay-backtop>
|
||||
</lay-tooltip>
|
||||
<!-- 使用样式属性自定义 -->
|
||||
<lay-tooltip content="属性自定义 backtop " position="left">
|
||||
<lay-backtop target=".layui-body" :bottom="100" bgcolor="#5FB878" icon="layui-icon-up" circular>
|
||||
</lay-backtop>
|
||||
</lay-tooltip>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@ -50,14 +38,11 @@ import { layer } from "../../../../src/index.ts"
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
let count = 0;
|
||||
const handlerClick = () => {
|
||||
count++;
|
||||
layer.msg(count, { time: 1000 })
|
||||
layer.msg("layui-vue", { time: 1000 });
|
||||
}
|
||||
|
||||
return {
|
||||
count,
|
||||
handlerClick,
|
||||
}
|
||||
}
|
||||
@ -74,8 +59,8 @@ export default {
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<!-- 需要用一个 div 包裹滚动目标和 lay-backtop 组件 -->
|
||||
<div class="scrollContainer">
|
||||
<!-- 需要用一个 div 包裹触发滚动事件的目标元素和 lay-backtop 组件 -->
|
||||
<div class="scrollContainer" style="width:700px; height:300px;">
|
||||
<div id="scrollContent" style="overflow-y:auto; overflow-x:auto; width:700px; height:300px;">
|
||||
<p v-for="(n,index) in 50" :key="n" style="height:32px;border-bottom:0.5px solid #5FB878;margin-bottom:10px;line-height:35px">
|
||||
{{index + ". layui-vue , 基 于 vue 3.0 的 桌 面 端 组 件 库 , layui 的 另 一 种 呈 现 方 式"}}
|
||||
@ -86,63 +71,7 @@ export default {
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
return {
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.scrollContainer{
|
||||
width:700px;
|
||||
height:300px;
|
||||
}
|
||||
</style>
|
||||
|
||||
:::
|
||||
|
||||
::: title 结合 tooltip 组件使用
|
||||
|
||||
###### 可以和 lay-tooltip 组件搭配使用
|
||||
|
||||
:::
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<!-- 需要用一个 div 包裹滚动容器和 Lay-backtop 组件 -->
|
||||
<div class="scrollContainer">
|
||||
<div id="scrollContent2" style="overflow-y:auto; overflow-x:auto; width:700px; height:300px;">
|
||||
<p v-for="(n,index) in 50" :key="n" style="height:40px;border-bottom:0.5px solid #5FB878;margin-bottom:10px;line-height:40px">
|
||||
{{index + ". layui-vue , 基 于 vue 3.0 的 桌 面 端 组 件 库 , layui 的 另 一 种 呈 现 方 式"}}
|
||||
</p>
|
||||
</div>
|
||||
<lay-tooltip content="backtop" position="left">
|
||||
<lay-backtop target="#scrollContent2" :showHeight="100" :bottom="30" position="absolute" border-radius="50%" bgcolor="#5FB878"></lay-backtop>
|
||||
</lay-tooltip>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
return {
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.scrollContainer{
|
||||
width:700px;
|
||||
height:300px;
|
||||
}
|
||||
</style>
|
||||
|
||||
:::
|
||||
|
||||
@ -154,7 +83,7 @@ export default {
|
||||
| 属性 | 说明 | 类型 | 可选值 |
|
||||
| ------------------------- | --------------------------------------------- | ------- | -------------------------- |
|
||||
| <strong>通用属性</strong> |
|
||||
| target | 可选，触发滚动的对象 | string | 元素选择器 \| window(默认) |
|
||||
| target | 可选，触发滚动事件的对象 | string | CSS 选择器 \| window(默认) |
|
||||
| showHeight | 可选，滚动高度达到该值后显示回到顶部按钮 | number | 200(默认) |
|
||||
| disabled | 可选，禁用点击返回顶部 | boolean | true \| false(默认) |
|
||||
| <strong>组件样式</strong> |
|
||||
@ -165,7 +94,7 @@ export default {
|
||||
| opacity | 可选，不透明度 | number | 0.0-1.0 |
|
||||
| color | 可选，前景颜色 | string | #FFFFFF |
|
||||
| borderRadius | 可选，添加圆角 | string | 2px(默认) |
|
||||
|
|
||||
| circular | 可选, 使用圆形按钮 | boolean | true \| false(默认)
|
||||
| <strong>图标样式</strong> |
|
||||
| icon | 可选,图标类型 | string | layui-icon-top(默认) |
|
||||
| iconSize | 可选,图标大小 | number | 30 |
|
||||
|
||||
@ -1,20 +1,20 @@
|
||||
/** backtop **/
|
||||
.lay-backtop {
|
||||
.layui-backtop {
|
||||
position: fixed;
|
||||
right: 15px;
|
||||
bottom: 15px;
|
||||
z-index: 999999;
|
||||
right: 30px;
|
||||
bottom: 40px;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
margin-bottom: 1px;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
font-size: 40px;
|
||||
background-color: #9f9f9f;
|
||||
color: #fff;
|
||||
color: #ffffff;
|
||||
border-radius: 2px;
|
||||
opacity: 0.95;
|
||||
z-index: 999999;
|
||||
:hover {
|
||||
opacity: 0.85;
|
||||
}
|
||||
|
||||
@ -1,29 +1,20 @@
|
||||
<template>
|
||||
<!-- FIXME style为临时方案 -->
|
||||
<div
|
||||
v-show="visible"
|
||||
ref="backtopRef"
|
||||
class="lay-backtop"
|
||||
:style="{
|
||||
right: `${props.right}px`,
|
||||
bottom: `${props.bottom}px`,
|
||||
backgroundColor: `${props.bgcolor}`,
|
||||
opacity:`${props.opacity}`,
|
||||
color: `${props.color}`,
|
||||
borderRadius:`${props.borderRadius}`,
|
||||
}"
|
||||
class="layui-backtop"
|
||||
:style="{ ...styleBacktop }"
|
||||
@click.stop="handleClick"
|
||||
@mousedown="backtopRef.style.opacity = 1"
|
||||
@mouseup="backtopRef.style.opacity = 0.95"
|
||||
@mousedown="handlerMousedown"
|
||||
@mouseup="handlerMouseup"
|
||||
>
|
||||
<!-- <i v-if="!$slots.default" :class="`layui-icon ${props.icon}`" style="font-size: 30px;"></i> -->
|
||||
<slot>
|
||||
<lay-icon
|
||||
:type="`layui-icon ${props.icon}`"
|
||||
:type="props.icon"
|
||||
:size="`${props.iconSize}px`"
|
||||
:prefix="`${props.iconPrefix}`"
|
||||
:color="`${props.iconColor}`">
|
||||
</lay-icon>
|
||||
:prefix="props.iconPrefix"
|
||||
:color="props.iconColor"
|
||||
></lay-icon>
|
||||
</slot>
|
||||
</div>
|
||||
</template>
|
||||
@ -36,29 +27,28 @@ export default {
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { defineProps, defineEmits, ref, shallowRef, withDefaults, computed, onMounted, } from 'vue';
|
||||
import layIcon from '../icon/index';
|
||||
import LayIcon from '../icon/index';
|
||||
import './index.less';
|
||||
|
||||
export interface LayBacktopProps {
|
||||
// 通用
|
||||
target?: string; // 触发滚动的对象
|
||||
/**通用*/
|
||||
target?: string;
|
||||
showHeight?: number;
|
||||
disabled?: boolean; // 禁用返回顶部
|
||||
// 组件样式
|
||||
position?: 'fixed' | 'absolute'; // 定位方式,显示在特定容器内部需要设置为 absolute
|
||||
disabled?: boolean;
|
||||
/**组件样式*/
|
||||
position?: 'fixed' | 'absolute';
|
||||
right?: number;
|
||||
bottom?: number;
|
||||
bgcolor?: string; // 背景颜色
|
||||
opacity?: number; // 不透明度0.01~1.00
|
||||
color?: string; // 前景颜色
|
||||
borderRadius?: string
|
||||
// shape?: 'square' | 'circular';
|
||||
// 图标样式
|
||||
bgcolor?: string;
|
||||
opacity?: number;
|
||||
color?: string;
|
||||
borderRadius?: number | string;
|
||||
circular?: boolean;
|
||||
/**图标样式*/
|
||||
icon?: string;
|
||||
iconSize?: number;
|
||||
iconPrefix?: string;
|
||||
iconColor?: string;
|
||||
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<LayBacktopProps>(), {
|
||||
@ -67,26 +57,39 @@ const props = withDefaults(defineProps<LayBacktopProps>(), {
|
||||
right: 30,
|
||||
bottom: 40,
|
||||
icon: 'layui-icon-top',
|
||||
iconSize:30,
|
||||
iconSize: 30,
|
||||
iconPrefix: 'layui-icon',
|
||||
disabled: false,
|
||||
circular: false,
|
||||
});
|
||||
|
||||
const emit = defineEmits(['click']);
|
||||
|
||||
let visible = ref(props.showHeight === 0);
|
||||
const backtopRef = ref<HTMLElement | null>(null);
|
||||
const scrollTarget = shallowRef<Window | HTMLElement | undefined>(undefined);
|
||||
let visible = ref(props.showHeight === 0);
|
||||
const borderRadius = computed(() => {
|
||||
if (props.circular) return "50%";
|
||||
return typeof props.borderRadius === 'number' ? `${props.borderRadius}px` : props.borderRadius;
|
||||
});
|
||||
const styleBacktop = computed(() => {
|
||||
return {
|
||||
position: props.position,
|
||||
right: `${props.right}px`,
|
||||
bottom: `${props.bottom}px`,
|
||||
backgroundColor: props.bgcolor,
|
||||
opacity: props.opacity,
|
||||
color: props.color,
|
||||
borderRadius: borderRadius.value,
|
||||
}
|
||||
});
|
||||
|
||||
// TODO 临时动画方案
|
||||
const scrollToTop = () => {
|
||||
if (!scrollTarget.value) return;
|
||||
if (scrollTarget.value instanceof Window) {
|
||||
window.scrollTo({
|
||||
top: 0,
|
||||
left: 0,
|
||||
behavior: 'smooth' //smooth(平滑滚动),instant(瞬间滚动)，默认instant
|
||||
});
|
||||
window.scrollTo({ top: 0, left: 0, behavior: 'smooth' }); // smooth | instant(default)
|
||||
} else {
|
||||
// FIXME 临时动画方案待改进
|
||||
let step = scrollTarget.value.scrollTop / 4;
|
||||
if (scrollTarget.value.scrollTop > 0) {
|
||||
scrollTarget.value.scrollTop -= Math.max(step, 10);
|
||||
@ -110,6 +113,14 @@ const handleClick = (event: MouseEvent) => {
|
||||
emit('click', event);
|
||||
};
|
||||
|
||||
const handlerMousedown = () => {
|
||||
backtopRef.value!.style.opacity = '1';
|
||||
}
|
||||
|
||||
const handlerMouseup = () => {
|
||||
backtopRef.value!.style.opacity = '0.95';
|
||||
}
|
||||
|
||||
// 获取滚动目标元素
|
||||
const getScrollTarget = () => {
|
||||
if (props.target === 'window') {
|
||||
@ -121,8 +132,7 @@ const getScrollTarget = () => {
|
||||
if (props.position === 'absolute') {
|
||||
if (!targetElement.parentElement) throw new Error(`target parent element is not existed: ${props.target}`);
|
||||
targetElement.parentElement.style.position = 'relative';
|
||||
if (!backtopRef.value) throw new Error(`backtop component ref is null: ${props.target}`);
|
||||
backtopRef.value.style.position = props.position;
|
||||
// backtopRef.value!.style.position = props.position;
|
||||
}
|
||||
return targetElement;
|
||||
}
|
||||
@ -131,7 +141,7 @@ const getScrollTarget = () => {
|
||||
onMounted(() => {
|
||||
let timer: any = undefined;
|
||||
scrollTarget.value = getScrollTarget();
|
||||
// FIXME 节流待改进
|
||||
// TODO 节流待改进
|
||||
scrollTarget.value.addEventListener('scroll', () => {
|
||||
clearTimeout(timer);
|
||||
timer = setTimeout(() => {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user