chore: edit README.en.md
This commit is contained in:
就眠儀式
@@ -7,7 +7,7 @@
|
||||
<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>
|
||||
</p>
|
||||
|
||||
**[🔶 Explore the docs »](http://www.layui-vue.com)**
|
||||
**[🔶 Explore the docs »](http://www.layui-vue.com)** **[Join us](https://jq.qq.com/?_wv=1027&k=ffiUQgnE)**
|
||||
|
||||
An enterprise-class UI components based on Layui and Vue.
|
||||
|
||||
@@ -75,4 +75,4 @@ This project follows the [all-contributors](https://github.com/layui-vue/layui-v
|
||||
|
||||
## Licence
|
||||
|
||||
Layui vue is licensed under the [MIT license](https://opensource.org/licenses/MIT).
|
||||
Layui vue is licensed under the [MIT license](https://opensource.org/licenses/MIT).
|
||||
|
||||
@@ -7,7 +7,7 @@
|
||||
<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>
|
||||
</p>
|
||||
|
||||
**[🔶 Explore the docs »](http://www.layui-vue.com)**
|
||||
**[🔶 Explore the docs »](http://www.layui-vue.com)** **[Join us](https://jq.qq.com/?_wv=1027&k=ffiUQgnE)**
|
||||
|
||||
An enterprise-class UI components based on Layui and Vue.
|
||||
|
||||
@@ -75,4 +75,4 @@ This project follows the [all-contributors](https://github.com/layui-vue/layui-v
|
||||
|
||||
## Licence
|
||||
|
||||
Layui vue is licensed under the [MIT license](https://opensource.org/licenses/MIT).
|
||||
Layui vue is licensed under the [MIT license](https://opensource.org/licenses/MIT).
|
||||
|
||||
@@ -16,8 +16,9 @@
|
||||
<li>
|
||||
<h3>0.4.0 <span class="layui-badge-rim">2022-03-08</span></h3>
|
||||
<ul>
|
||||
<li>[重构] scroll 虚拟滚动, 代替浏览器原生滚动。</li>
|
||||
<li>[新增] date-picker 日期选择组件, 支持 年月,日期,时间。</li>
|
||||
<li>[新增] scroll 虚拟滚动组件。</li>
|
||||
<li>[新增] water-marker 水印组件。</li>
|
||||
<li>[新增] date-picker 日期选择组件, 支持年月, 日期, 时间。</li>
|
||||
<li>[修复] slider 滑块组件, 默认 step 值异常。</li>
|
||||
<li>[升级] layer-vue 1.3.10 版本。</li>
|
||||
</ul>
|
||||
|
||||
@@ -159,13 +159,6 @@ const throttle = (func: Function, wait: number) => {
|
||||
};
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.layui-side-scroll-bar {
|
||||
overflow-y: scroll;
|
||||
max-width: 156px;
|
||||
}
|
||||
.layui-side-scroll::-webkit-scrollbar {
|
||||
width: 0;
|
||||
}
|
||||
.lay-aside {
|
||||
position: fixed;
|
||||
top: 65px;
|
||||
@@ -270,8 +263,5 @@ const throttle = (func: Function, wait: number) => {
|
||||
.lay-aside-list {
|
||||
max-width: 68px;
|
||||
}
|
||||
.layui-side-scroll-bar {
|
||||
max-width: 68px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
|
||||
<template>
|
||||
<div
|
||||
class="scrollbar-box"
|
||||
@@ -13,7 +12,7 @@
|
||||
ref="barRef"
|
||||
class="scrollbar-track"
|
||||
:style="{
|
||||
backgroundColor: heightPre == 1 ? 'rgba(0,0,0,0)' : slotColor
|
||||
backgroundColor: heightPre == 1 ? 'rgba(0,0,0,0)' : slotColor,
|
||||
}"
|
||||
>
|
||||
<!--
|
||||
@@ -25,7 +24,7 @@
|
||||
height: barHeight + 'px',
|
||||
width: scrollWidth + 'px',
|
||||
transform: 'translateY(' + translateY + 'px)',
|
||||
backgroundColor: heightPre == 1 ? 'rgba(0,0,0,0)' : scrollColor
|
||||
backgroundColor: heightPre == 1 ? 'rgba(0,0,0,0)' : scrollColor,
|
||||
}"
|
||||
class="scrollbar-thumb"
|
||||
@mousedown.stop.prevent="moveStart"
|
||||
@@ -34,7 +33,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<script>
|
||||
import {
|
||||
defineComponent,
|
||||
@@ -42,31 +41,31 @@ import {
|
||||
onMounted,
|
||||
nextTick,
|
||||
reactive,
|
||||
onUnmounted
|
||||
} from 'vue'
|
||||
onUnmounted,
|
||||
} from "vue";
|
||||
export default defineComponent({
|
||||
name: 'LayScroll',
|
||||
name: "LayScroll",
|
||||
props: {
|
||||
height: {
|
||||
//:height="'200px'"
|
||||
type: String,
|
||||
default: '100%'
|
||||
default: "100%",
|
||||
},
|
||||
slotColor: {
|
||||
//滑块槽颜色 :slotColor="'red'"
|
||||
type: String,
|
||||
default: 'rgba(0,0,0,0)'
|
||||
default: "rgba(0,0,0,0)",
|
||||
},
|
||||
scrollColor: {
|
||||
//滑块颜色 :scrollColor="'red'"
|
||||
type: String,
|
||||
default: '#eeeeee'
|
||||
default: "#eeeeee",
|
||||
},
|
||||
scrollWidth: {
|
||||
//滑块宽度 :scrollWidth="7"
|
||||
type: Number,
|
||||
default: 6
|
||||
}
|
||||
default: 6,
|
||||
},
|
||||
},
|
||||
setup(props, ctx) {
|
||||
const data = reactive({
|
||||
@@ -75,64 +74,64 @@ export default defineComponent({
|
||||
translateY: 0, // 滚动块平移的距离
|
||||
heightPre: 0, // 可视高度和内容高度比
|
||||
barHeight: 0, // 滑块高度
|
||||
winWidth: document.body.clientWidth //初始化浏览器页面宽度
|
||||
})
|
||||
let time = null // 定时器
|
||||
let isMove = false // 判断鼠标是否点击滑块（为松开）
|
||||
let moveClientY = 0 // 鼠标点击滑块时，相对滑块的位置
|
||||
let trackHeight = 0 // 滚动条轨道高度
|
||||
let wrapHeight = 0 // 容器高度（可视高度）
|
||||
let wrapContentHeight = 0 // 内容高度（可滚动内容的高度）
|
||||
|
||||
winWidth: document.body.clientWidth, //初始化浏览器页面宽度
|
||||
});
|
||||
let time = null; // 定时器
|
||||
let isMove = false; // 判断鼠标是否点击滑块（为松开）
|
||||
let moveClientY = 0; // 鼠标点击滑块时，相对滑块的位置
|
||||
let trackHeight = 0; // 滚动条轨道高度
|
||||
let wrapHeight = 0; // 容器高度（可视高度）
|
||||
let wrapContentHeight = 0; // 内容高度（可滚动内容的高度）
|
||||
|
||||
// 页面挂载后计算滚动条
|
||||
onMounted(() => {
|
||||
monitorWindow() //监听窗口尺寸
|
||||
monitorScrollBar() //监听内容元素尺寸
|
||||
monitorWindow(); //监听窗口尺寸
|
||||
monitorScrollBar(); //监听内容元素尺寸
|
||||
nextTick(() => {
|
||||
//dom渲染后
|
||||
calculationLength() //初始化延迟更新滚动条
|
||||
})
|
||||
})
|
||||
calculationLength(); //初始化延迟更新滚动条
|
||||
});
|
||||
});
|
||||
// 页面卸载清除定时器
|
||||
onUnmounted(() => {
|
||||
window.clearInterval(time)
|
||||
time = null
|
||||
})
|
||||
window.clearInterval(time);
|
||||
time = null;
|
||||
});
|
||||
// 监听页面尺寸改变计算滚动条
|
||||
const monitorWindow = function () {
|
||||
let time //定时器，防抖，窗口持续变化，延迟更新滚动条
|
||||
window.addEventListener('resize', () => {
|
||||
data.winWidth = document.body.clientWidth //页面改变监听宽度控制移动端隐藏滚动条
|
||||
clearTimeout(time)
|
||||
let time; //定时器，防抖，窗口持续变化，延迟更新滚动条
|
||||
window.addEventListener("resize", () => {
|
||||
data.winWidth = document.body.clientWidth; //页面改变监听宽度控制移动端隐藏滚动条
|
||||
clearTimeout(time);
|
||||
time = setTimeout(() => {
|
||||
//页面宽度变化继续监听，如果小于500就关闭自定义滚动条
|
||||
// console.log("浏览器窗口变化更新滚动条");
|
||||
initScrollListner()
|
||||
}, 500)
|
||||
})
|
||||
}
|
||||
initScrollListner();
|
||||
}, 500);
|
||||
});
|
||||
};
|
||||
|
||||
//监听内容元素尺寸变化
|
||||
const monitorScrollBar = function () {
|
||||
var monitorUl = data.scrollRef.children[0]
|
||||
var monitorUl = data.scrollRef.children[0];
|
||||
// var monitorDiv= document; // 监听document
|
||||
let MutationObserver =
|
||||
window.MutationObserver ||
|
||||
window.WebKitMutationObserver ||
|
||||
window.MozMutationObserver
|
||||
window.MozMutationObserver;
|
||||
let observer = new MutationObserver(function (mutations) {
|
||||
// console.log("内容元素变化更新滚动条");
|
||||
initScrollListner()
|
||||
})
|
||||
|
||||
initScrollListner();
|
||||
});
|
||||
|
||||
// childList 观察子节点变动
|
||||
// 监听子节点增加或者内容撑起的尺寸
|
||||
observer.observe(monitorUl, {
|
||||
attributes: true,
|
||||
childList: true
|
||||
})
|
||||
}
|
||||
|
||||
childList: true,
|
||||
});
|
||||
};
|
||||
|
||||
// 初始化延迟监听滚动条
|
||||
const calculationLength = function () {
|
||||
// 直接执行initScrollListner函数，获取滚动条长度部准确
|
||||
@@ -140,62 +139,62 @@ export default defineComponent({
|
||||
// 每间隔10毫秒更新滑块长度
|
||||
time = setInterval(() => {
|
||||
// 计算滚动条长度
|
||||
initScrollListner()
|
||||
}, 50)
|
||||
initScrollListner();
|
||||
}, 50);
|
||||
// 间隔500毫秒清除定时器，滑块缩短会有动画效果，时间可延长没有影响
|
||||
setTimeout(() => {
|
||||
window.clearInterval(time)
|
||||
time = null
|
||||
}, 2000)
|
||||
}
|
||||
window.clearInterval(time);
|
||||
time = null;
|
||||
}, 2000);
|
||||
};
|
||||
// 计算滚动条高度
|
||||
const initScrollListner = function () {
|
||||
let scroll = data.scrollRef
|
||||
let bar = data.barRef
|
||||
let scroll = data.scrollRef;
|
||||
let bar = data.barRef;
|
||||
// scroll有时候拿不到元素，要判断一下
|
||||
if (scroll) {
|
||||
wrapContentHeight = scroll.scrollHeight
|
||||
wrapHeight = scroll.clientHeight
|
||||
trackHeight = bar.clientHeight
|
||||
wrapContentHeight = scroll.scrollHeight;
|
||||
wrapHeight = scroll.clientHeight;
|
||||
trackHeight = bar.clientHeight;
|
||||
// console.log(wrapContentHeight ,wrapHeight);
|
||||
// 容器高度 / 内容高度 100 150
|
||||
data.heightPre = wrapHeight / wrapContentHeight
|
||||
data.heightPre = wrapHeight / wrapContentHeight;
|
||||
// 滑动块的高度 根据 容器和内容的比 乘以 滚动轨道 计算出 滑动块的高度
|
||||
data.barHeight = data.heightPre * trackHeight
|
||||
data.barHeight = data.heightPre * trackHeight;
|
||||
}
|
||||
}
|
||||
};
|
||||
// 内容滚动时，计算滑块移动的距离
|
||||
const onMosewheel = function (e) {
|
||||
// scrollTop页面顶部滚出的高度
|
||||
// offsetHeight页面可视区域高度
|
||||
// scrollHeight页面正文全文高度
|
||||
// data.translateY滚动块平移的距离
|
||||
data.translateY = e.target.scrollTop * data.heightPre
|
||||
data.translateY = e.target.scrollTop * data.heightPre;
|
||||
if (data.translateY == 0) {
|
||||
// 到达顶部
|
||||
arrive('top')
|
||||
arrive("top");
|
||||
} else if (
|
||||
e.target.scrollTop + e.target.offsetHeight ==
|
||||
e.target.scrollHeight
|
||||
) {
|
||||
// 滚出高度 + 可视区域高度 == 内容高度
|
||||
arrive('bottom')
|
||||
arrive("bottom");
|
||||
}
|
||||
}
|
||||
};
|
||||
// 到达顶部或者底部通知父级元素
|
||||
const arrive = function name(tb) {
|
||||
ctx.emit('arrive', tb)
|
||||
}
|
||||
ctx.emit("arrive", tb);
|
||||
};
|
||||
// 鼠标点击滑块时
|
||||
const moveStart = function (e) {
|
||||
isMove = true
|
||||
isMove = true;
|
||||
// clientY：当鼠标事件发生时，鼠标相对于浏览器（这里说的是浏览器的有效区域）y轴的位置
|
||||
// data.translateY 滚动块平移的距离
|
||||
// moveClientY 鼠标点击滑块时，相对滑块的位置
|
||||
moveClientY = e.clientY - data.translateY
|
||||
moveTo() //移动时
|
||||
moveEnd() //鼠标松开时
|
||||
}
|
||||
moveClientY = e.clientY - data.translateY;
|
||||
moveTo(); //移动时
|
||||
moveEnd(); //鼠标松开时
|
||||
};
|
||||
// 鼠标移动，改变thumb的位置以及容器scrollTop的位置
|
||||
const moveTo = function () {
|
||||
document.onmousemove = (e) => {
|
||||
@@ -204,40 +203,40 @@ export default defineComponent({
|
||||
// 移动滑块时，判断时候到达顶部或者底部
|
||||
if (e.clientY - moveClientY > trackHeight - data.barHeight) {
|
||||
// 滑块到达 底部 就不在改变滑块translateY值
|
||||
data.translateY = trackHeight - data.barHeight
|
||||
data.translateY = trackHeight - data.barHeight;
|
||||
} else if (e.clientY - moveClientY < 0) {
|
||||
// 滑块到达 顶部 就不在改变滑块translateY值
|
||||
data.translateY = 0
|
||||
data.translateY = 0;
|
||||
} else {
|
||||
//改变滑块位置
|
||||
data.translateY = e.clientY - moveClientY
|
||||
data.translateY = e.clientY - moveClientY;
|
||||
}
|
||||
// 计算出内容盒子滚出顶部的距离
|
||||
data.scrollRef.scrollTop = data.translateY / data.heightPre
|
||||
data.scrollRef.scrollTop = data.translateY / data.heightPre;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
};
|
||||
// 鼠标从滑块松开时，不在监听滑块移动操作
|
||||
const moveEnd = function () {
|
||||
document.onmouseup = (e) => {
|
||||
if (isMove) {
|
||||
isMove = false
|
||||
isMove = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
};
|
||||
};
|
||||
|
||||
return {
|
||||
...toRefs(data),
|
||||
onMosewheel,
|
||||
moveStart
|
||||
}
|
||||
}
|
||||
})
|
||||
moveStart,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.scrollbar-box {
|
||||
height: 100%;
|
||||
overflow: hidden !important;;
|
||||
overflow: hidden !important;
|
||||
}
|
||||
.scrollbar-y {
|
||||
position: relative;
|
||||
@@ -269,4 +268,4 @@ export default defineComponent({
|
||||
.hide.scrollbar-box .scrollbar-y {
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user