admin/lx-admin-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add 新增ElScrollbarInstance

Browse Source
This commit is contained in:
LiuHao 2023-06-18 22:31:35 +08:00
parent d43ae50abc
commit a46c511f1f
4 changed files with 9 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.eslintrc-auto-import.json
View File

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

2
src/layout/components/IframeToggle/index.vue
View File

@ -16,4 +16,4 @@ import useTagsViewStore from '@/store/modules/tagsView';
const route = useRoute(); const route = useRoute();
const tagsViewStore = useTagsViewStore() const tagsViewStore = useTagsViewStore()
</script> </script>

13
src/layout/components/TagsView/ScrollPane.vue
View File

@ -6,22 +6,21 @@
<script setup lang="ts"> <script setup lang="ts">
import useTagsViewStore from '@/store/modules/tagsView' import useTagsViewStore from '@/store/modules/tagsView'
import { ElScrollbar } from 'element-plus';
import { TagView } from 'vue-router' import { TagView } from 'vue-router'
const tagAndTagSpacing = ref(4); const tagAndTagSpacing = ref(4);
const scrollContainerRef = ref(ElScrollbar) const scrollContainerRef = ref<ElScrollbarInstance>()
const scrollWrapper = computed(() => scrollContainerRef.value.$refs.wrapRef); const scrollWrapper = computed(() => scrollContainerRef.value?.$refs.wrapRef as any);
onMounted(() => { onMounted(() => {
scrollWrapper.value.addEventListener('scroll', emitScroll, true) scrollWrapper.value?.addEventListener('scroll', emitScroll, true)
}) })
onBeforeUnmount(() => { onBeforeUnmount(() => {
scrollWrapper.value.removeEventListener('scroll', emitScroll) scrollWrapper.value?.removeEventListener('scroll', emitScroll)
}) })
const handleScroll = (e: WheelEvent) => { 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; const $scrollWrapper = scrollWrapper.value;
$scrollWrapper.scrollLeft = $scrollWrapper.scrollLeft + eventDelta / 4 $scrollWrapper.scrollLeft = $scrollWrapper.scrollLeft + eventDelta / 4
} }
@ -34,7 +33,7 @@ const tagsViewStore = useTagsViewStore()
const visitedViews = computed(() => tagsViewStore.visitedViews); const visitedViews = computed(() => tagsViewStore.visitedViews);
const moveToTarget = (currentTag: TagView) => { const moveToTarget = (currentTag: TagView) => {
const $container = scrollContainerRef.value.$el const $container = scrollContainerRef.value?.$el
const $containerWidth = $container.offsetWidth const $containerWidth = $container.offsetWidth
const $scrollWrapper = scrollWrapper.value; const $scrollWrapper = scrollWrapper.value;

1
src/types/element.d.ts vendored
View File

@ -25,6 +25,7 @@ declare global {
declare type ElRateInstance = InstanceType<typeof ep.ElRate>; declare type ElRateInstance = InstanceType<typeof ep.ElRate>;
declare type ElSliderInstance = InstanceType<typeof ep.ElSlider>; declare type ElSliderInstance = InstanceType<typeof ep.ElSlider>;
declare type ElUploadInstance = InstanceType<typeof ep.ElUpload>; declare type ElUploadInstance = InstanceType<typeof ep.ElUpload>;
declare type ElScrollbarInstance = InstanceType<typeof ep.ElScrollbar>;
declare type TransferKey = ep.TransferKey; declare type TransferKey = ep.TransferKey;
declare type CheckboxValueType = ep.CheckboxValueType; declare type CheckboxValueType = ep.CheckboxValueType;