add 新增ElScrollbarInstance
This commit is contained in:
parent
d43ae50abc
commit
a46c511f1f
@ -26,6 +26,7 @@
|
||||
"ElDatePickerInstance": true,
|
||||
"ElTimePickerInstance": true,
|
||||
"ElTimeSelectInstance": true,
|
||||
"ElScrollbarInstance": true,
|
||||
"ElCascaderInstance": true,
|
||||
"ElColorPickerInstance": true,
|
||||
"ElRateInstance": true,
|
||||
|
@ -16,4 +16,4 @@ import useTagsViewStore from '@/store/modules/tagsView';
|
||||
|
||||
const route = useRoute();
|
||||
const tagsViewStore = useTagsViewStore()
|
||||
</script>
|
||||
</script>
|
||||
|
@ -6,22 +6,21 @@
|
||||
|
||||
<script setup lang="ts">
|
||||
import useTagsViewStore from '@/store/modules/tagsView'
|
||||
import { ElScrollbar } from 'element-plus';
|
||||
import { TagView } from 'vue-router'
|
||||
const tagAndTagSpacing = ref(4);
|
||||
|
||||
const scrollContainerRef = ref(ElScrollbar)
|
||||
const scrollWrapper = computed(() => scrollContainerRef.value.$refs.wrapRef);
|
||||
const scrollContainerRef = ref<ElScrollbarInstance>()
|
||||
const scrollWrapper = computed(() => scrollContainerRef.value?.$refs.wrapRef as any);
|
||||
|
||||
onMounted(() => {
|
||||
scrollWrapper.value.addEventListener('scroll', emitScroll, true)
|
||||
scrollWrapper.value?.addEventListener('scroll', emitScroll, true)
|
||||
})
|
||||
onBeforeUnmount(() => {
|
||||
scrollWrapper.value.removeEventListener('scroll', emitScroll)
|
||||
scrollWrapper.value?.removeEventListener('scroll', emitScroll)
|
||||
})
|
||||
|
||||
const handleScroll = (e: WheelEvent) => {
|
||||
const eventDelta = (e as any).wheelDelta || -e.deltaY * 40
|
||||
const eventDelta = (e as any).wheelDelta || - e.deltaY * 40
|
||||
const $scrollWrapper = scrollWrapper.value;
|
||||
$scrollWrapper.scrollLeft = $scrollWrapper.scrollLeft + eventDelta / 4
|
||||
}
|
||||
@ -34,7 +33,7 @@ const tagsViewStore = useTagsViewStore()
|
||||
const visitedViews = computed(() => tagsViewStore.visitedViews);
|
||||
|
||||
const moveToTarget = (currentTag: TagView) => {
|
||||
const $container = scrollContainerRef.value.$el
|
||||
const $container = scrollContainerRef.value?.$el
|
||||
const $containerWidth = $container.offsetWidth
|
||||
const $scrollWrapper = scrollWrapper.value;
|
||||
|
||||
|
1
src/types/element.d.ts
vendored
1
src/types/element.d.ts
vendored
@ -25,6 +25,7 @@ declare global {
|
||||
declare type ElRateInstance = InstanceType<typeof ep.ElRate>;
|
||||
declare type ElSliderInstance = InstanceType<typeof ep.ElSlider>;
|
||||
declare type ElUploadInstance = InstanceType<typeof ep.ElUpload>;
|
||||
declare type ElScrollbarInstance = InstanceType<typeof ep.ElScrollbar>;
|
||||
|
||||
declare type TransferKey = ep.TransferKey;
|
||||
declare type CheckboxValueType = ep.CheckboxValueType;
|
||||
|
Loading…
x
Reference in New Issue
Block a user