diff --git a/package/component/src/component/scroll/index.vue b/package/component/src/component/scroll/index.vue
index c5e53236..37a97f9f 100644
--- a/package/component/src/component/scroll/index.vue
+++ b/package/component/src/component/scroll/index.vue
@@ -12,20 +12,16 @@
ref="barRef"
class="layui-scroll-track"
:style="{
- backgroundColor: data.heightPre == 1 ? 'rgba(0,0,0,0)' : slotColor,
+ backgroundColor: data.heightPre == 1 ? 'rgba(0,0,0,0)' : trackColor,
}"
>
-
(), {
height: "100%",
- slotColor: "rgba(0,0,0,0)",
- scrollColor: "#eeeeee",
- scrollWidth: 6,
+ trackColor: "rgba(0,0,0,0)",
+ thumbColor: "#eeeeee",
+ thumbWidth: 6,
});
const emit = defineEmits(["arrive"]);
@@ -70,6 +66,7 @@ const data = reactive({
barHeight: 0, // 滑块高度
winWidth: document.body.clientWidth, //初始化浏览器页面宽度
});
+
let time = null; // 定时器
let isMove = false; // 判断鼠标是否点击滑块(为松开)
let moveClientY = 0; // 鼠标点击滑块时,相对滑块的位置
@@ -86,11 +83,13 @@ onMounted(() => {
calculationLength(); //初始化延迟更新滚动条
});
});
+
// 页面卸载清除定时器
onUnmounted(() => {
window.clearInterval(time);
time = null;
});
+
// 监听页面尺寸改变计算滚动条
const monitorWindow = function () {
let time; //定时器,防抖,窗口持续变化,延迟更新滚动条
@@ -120,7 +119,6 @@ const monitorScrollBar = function () {
initScrollListner();
});
- // childList 观察子节点变动
// 监听子节点增加或者内容撑起的尺寸
observer.observe(monitorUl, {
attributes: true,
@@ -143,6 +141,7 @@ const calculationLength = function () {
time = null;
}, 2000);
};
+
// 计算滚动条高度
const initScrollListner = function () {
let scroll = scrollRef.value;
@@ -159,6 +158,7 @@ const initScrollListner = function () {
data.barHeight = data.heightPre * trackHeight;
}
};
+
// 内容滚动时,计算滑块移动的距离
const onMosewheel = function (e) {
// scrollTop页面顶部滚出的高度
@@ -177,10 +177,12 @@ const onMosewheel = function (e) {
arrive("bottom");
}
};
+
// 到达顶部或者底部通知父级元素
const arrive = function name(tb) {
emit("arrive", tb);
};
+
// 鼠标点击滑块时
const moveStart = function (e) {
isMove = true;
@@ -191,6 +193,7 @@ const moveStart = function (e) {
moveTo(); //移动时
moveEnd(); //鼠标松开时
};
+
// 鼠标移动,改变thumb的位置以及容器scrollTop的位置
const moveTo = function () {
document.onmousemove = (e) => {
@@ -212,6 +215,7 @@ const moveTo = function () {
}
};
};
+
// 鼠标从滑块松开时,不在监听滑块移动操作
const moveEnd = function () {
document.onmouseup = (e) => {
diff --git a/package/document/src/document/zh-CN/components/scroll.md b/package/document/src/document/zh-CN/components/scroll.md
index 6de0e536..3de8aeb1 100644
--- a/package/document/src/document/zh-CN/components/scroll.md
+++ b/package/document/src/document/zh-CN/components/scroll.md
@@ -40,9 +40,9 @@ export default {
| 属性 | 描述 | 可选值 |
| ----------- | -------- | ------ |
| height | 高度 | -- |
-| scrollWidth | 滑块宽度 | -- |
-| scrollColor | 滑块颜色 | -- |
-| slotColor | 滑槽颜色 | -- |
+| thumbWidth | 滑块宽度 | -- |
+| thumbColor | 滑块颜色 | -- |
+| trackColor | 滑槽颜色 | -- |
:::
diff --git a/package/document/src/document/zh-CN/guide/changelog.md b/package/document/src/document/zh-CN/guide/changelog.md
index f650a40d..c6ef6c7f 100644
--- a/package/document/src/document/zh-CN/guide/changelog.md
+++ b/package/document/src/document/zh-CN/guide/changelog.md
@@ -11,12 +11,22 @@
+
+
+ -
+
1.0.6 2022-05-02
+
+ - [修复] scroll 组件 height 属性必填警告。
+ - [修复] scroll 组件 slotColor 属性必填警告。
+
+
+
-
1.0.5 2022-05-01
- - [新增] dropdown 组件 context-menu 属性。。
+ - [新增] dropdown 组件 context-menu 属性。
- [修复] layer 组件 tooltip 组件 index 层级冲突。
- [修复] table 组件 columns 宽度超出 table-box 错位。
- [修复] table 组件 selected-keys 属性 deep 监听。