macrocc
/
scrollTable
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

移除key ，删除滚动的字体

main
wanghongjian 2024-03-06 10:11:09 +08:00
parent 2c386f4cd6
commit f59c179f45
2 changed files with 165 additions and 174 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

94
src/components/Scroll.vue
View File

@ -1,20 +1,28 @@
<template>
<div class="custom-list" ref="scrollBody" @mouseenter="mouseenterFunc" @mouseleave="mouseleaveFunc"
@mousewheel="mousewheelFunc">
<div class="list-body" :class="{
<div class="custom-list" ref="scrollBody" @mouseenter="mouseenterFunc" @mouseleave="mouseleaveFunc" @mousewheel="mousewheelFunc">
<div
class="list-body"
:class="{
'list-body2': isHorizontal,
canScroll:!isCanScroll
}" ref="listBody" :style="{ transform: getScrollDistance() }">
canScroll: !isCanScroll,
}"
ref="listBody"
:style="{ transform: getScrollDistance() }">
<slot></slot>
</div>
<div class="list-body" :class="{
'list-body2': isHorizontal
}" ref="tBody" v-if="isCanScroll" :style="{ transform: getScrollDistance() }">
<div
class="list-body"
:class="{
'list-body2': isHorizontal,
}"
ref="tBody"
v-if="isCanScroll"
:style="{ transform: getScrollDistance() }">
<slot></slot>
</div>
</div>
</template>
<script lang='ts' setup>
<script lang="ts" setup>
import { computed, ref, nextTick, onMounted } from 'vue';
//滚动距离
const scrollDistance = ref(0);
@ -31,34 +39,32 @@ const animationFrame = ref();
const isCanScroll = ref(true);
const scrollBody = ref<any>(null);
const listBody = ref<any>(null);
const props = defineProps(
{
const props = defineProps({
steep: {
//滚动速度
type: Number,
default: 1
default: 1,
},
scrollDirection: {
//滚动方向
type: String,
default: "top"
default: 'top',
},
isRoller: {
//是否可以滑轮滚动
type: Boolean,
default: true
default: true,
},
rollerScrollDistance: {
//滑轮滚动的距离
type: Number,
default: 20
default: 20,
},
data: Array
}
)
data: Array,
});
const isHorizontal = computed(() => {
return props.scrollDirection === "left" || props.scrollDirection === "right"
})
return props.scrollDirection === 'left' || props.scrollDirection === 'right';
});
const start = () => {
//判断是否可以滚动函数
@ -79,7 +85,7 @@ const start = () => {
if (isCanScroll.value) {
run();
}
}
};
const run = () => {
//清空动画
@ -107,26 +113,20 @@ const run = () => {
}
//判断滚动值
if (!isStop.value) {
if (
props.scrollDirection === "top" ||
props.scrollDirection === "left"
) {
if (props.scrollDirection === 'top' || props.scrollDirection === 'left') {
scrollDistance.value -= props.steep;
} else if (
props.scrollDirection === "bottom" ||
props.scrollDirection === "right"
) {
} else if (props.scrollDirection === 'bottom' || props.scrollDirection === 'right') {
scrollDistance.value += props.steep;
}
run();
}
});
}
};
const stop = () => {
isStop.value = !0;
clearAnimation();
}
};
const initData = () => {
nextTick(() => {
@ -138,12 +138,8 @@ const initData = () => {
listWidth.value = listBody.value?.clientWidth;
if (
(bodyHeight.value !== 0 &&
listHeight.value !== 0 &&
listHeight.value >= bodyHeight.value) ||
(bodyWidth.value !== 0 &&
listWidth.value !== 0 &&
listWidth.value >= bodyWidth.value)
(bodyHeight.value !== 0 && listHeight.value !== 0 && listHeight.value >= bodyHeight.value) ||
(bodyWidth.value !== 0 && listWidth.value !== 0 && listWidth.value >= bodyWidth.value)
) {
isCanScroll.value = true;
start();
@ -151,31 +147,31 @@ const initData = () => {
isCanScroll.value = false;
}
});
}
};
// //获取滚动样式
const getScrollDistance = () => {
let style;
if (!isHorizontal.value) {
style = "translate(0px, " + scrollDistance.value + "px)";
style = 'translate(0px, ' + scrollDistance.value + 'px)';
} else {
style = "translate(" + scrollDistance.value + "px,0px)";
style = 'translate(' + scrollDistance.value + 'px,0px)';
}
return style;
}
};
const clearAnimation = () => {
if (animationFrame.value) {
cancelAnimationFrame(animationFrame.value);
animationFrame.value = null;
}
}
};
const mouseenterFunc = () => {
stop();
}
};
const mouseleaveFunc = () => {
start();
}
};
const mousewheelFunc = (e: any) => {
if (!isCanScroll.value || !props.isRoller) {
return false;
@ -187,21 +183,17 @@ const mousewheelFunc = (e:any) => {
scrollDistance.value += props.rollerScrollDistance;
}
run();
}
};
onMounted(() => {
//初始化页面数据
initData();
}
)
});
</script>
<style scoped>
.custom-list {
white-space: nowrap;
font-size: 14px;
overflow: hidden;
height: 100%;
}
@ -209,7 +201,6 @@ onMounted(() => {
.list-body {
overflow: hidden;
white-space: nowrap;
font-size: 14px;
}
.canScroll {
@ -221,4 +212,3 @@ onMounted(() => {
display: inline-block;
}
</style>

7
src/components/ScrollTable.vue
View File

@ -2,10 +2,10 @@
<div class="scrolltable" :style="gridStyle">
<div class="row header">
<div class="cell">序号</div>
<div v-for="(head, i) in heads" :key="i" class="cell">{{ head }}</div>
<div v-for="(head, i) in heads" class="cell">{{ head }}</div>
</div>
<Scroll :data="datas" :steep="0.08" scrollDirection="top" :isRoller="true" :rollerScrollDistance="50">
<div v-for="(rows, i) in datas" class="row content" key="i">
<div v-for="(rows, i) in datas" class="row content">
<div class="cell no">{{ i + 1 }}</div>
<div v-for="(row, r) in rows" :class="{ cell: true, [cellType[r]]: !!cellType[r], [row.split('.')[1]]: !!row.split('.')[1] }">{{ row.split('.')[0] }}</div>
</div>
@ -104,7 +104,8 @@ const gridStyle = computed(() => {
background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAAXNSR0IArs4c6QAAAARzQklUCAgICHwIZIgAAADYSURBVBiVTY8xSkNBGAbnX/YZHwTUEwQ9QCptbGwsxcJSEWxt0z1IEbBIZ+sBxPIpSC4ggim0sxc8gabJLtnNfikEyRxgmDGA+Drec0s3crhDgEJ5K7mMNo+bL9PLzW7KPJu0zRoy+608py6FMCSFLiW2Ps77Ps77lNiSQjeFMLTFZPAJ1BXhwE7ufgA0ud5J1O8GwVuOGZRRR//+1JFZzA6ytxymgqOi2OjpagxQyqxBLIWbmtrznpLuBVvrkQYzq+zSAMLDWW8DDUy2/3egjwV2W188fq8AvYtk5QJg+FMAAAAASUVORK5CYII=')
center center no-repeat;
}
&.red { // 实例样式
&.red {
// 实例样式
&::before {
--iconwidth: 16px;
content: ' ';