add 新增ElScrollbarInstance

LiuHao

2023-06-18 a46c511f1f7f99554536220dff7c00d7b13ab318

add 新增ElScrollbarInstance

 .eslintrc-auto-import.json

@@ -26,6 +26,7 @@
    "ElDatePickerInstance": true,
    "ElTimePickerInstance": true,
    "ElTimeSelectInstance": true,
    "ElScrollbarInstance": true,
    "ElCascaderInstance": true,
    "ElColorPickerInstance": true,
    "ElRateInstance": true,

 src/layout/components/IframeToggle/index.vue

@@ -16,4 +16,4 @@

const route = useRoute();
const tagsViewStore = useTagsViewStore()
</script>
</script>

 src/layout/components/TagsView/ScrollPane.vue

@@ -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 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;


 src/types/element.d.ts

@@ -25,6 +25,7 @@
  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;