|
|
@ -1,8 +1,9 @@ |
|
|
|
<script lang="ts" setup> |
|
|
|
<script lang="ts" setup> |
|
|
|
import { computed, nextTick, onBeforeUnmount, onMounted, provide, ref, unref, watch } from 'vue' |
|
|
|
import type { PropType } from 'vue' |
|
|
|
import { toObject } from './util' |
|
|
|
import { nextTick, onBeforeUnmount, onMounted, provide, ref, unref, watch } from 'vue' |
|
|
|
import Bar from './bar' |
|
|
|
import Bar from './bar' |
|
|
|
import { addResizeListener, removeResizeListener } from '@/utils/event' |
|
|
|
import { addResizeListener, removeResizeListener } from '@/utils/event' |
|
|
|
|
|
|
|
import type { StyleValue } from '@/utils/types' |
|
|
|
import componentSetting from '@/settings/componentSetting' |
|
|
|
import componentSetting from '@/settings/componentSetting' |
|
|
|
|
|
|
|
|
|
|
|
defineOptions({ name: 'Scrollbar' }) |
|
|
|
defineOptions({ name: 'Scrollbar' }) |
|
|
@ -13,7 +14,7 @@ const props = defineProps({ |
|
|
|
default: componentSetting.scrollbar?.native ?? false, |
|
|
|
default: componentSetting.scrollbar?.native ?? false, |
|
|
|
}, |
|
|
|
}, |
|
|
|
wrapStyle: { |
|
|
|
wrapStyle: { |
|
|
|
type: [String, Array], |
|
|
|
type: [String, Array, Object] as PropType<StyleValue>, |
|
|
|
default: '', |
|
|
|
default: '', |
|
|
|
}, |
|
|
|
}, |
|
|
|
wrapClass: { |
|
|
|
wrapClass: { |
|
|
@ -49,13 +50,6 @@ const resize = ref() |
|
|
|
|
|
|
|
|
|
|
|
provide('scroll-bar-wrap', wrap) |
|
|
|
provide('scroll-bar-wrap', wrap) |
|
|
|
|
|
|
|
|
|
|
|
const style = computed(() => { |
|
|
|
|
|
|
|
if (Array.isArray(props.wrapStyle)) |
|
|
|
|
|
|
|
return toObject(props.wrapStyle) |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
return props.wrapStyle |
|
|
|
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function handleScroll() { |
|
|
|
function handleScroll() { |
|
|
|
if (!props.native) { |
|
|
|
if (!props.native) { |
|
|
|
moveY.value = (unref(wrap).scrollTop * 100) / unref(wrap).clientHeight |
|
|
|
moveY.value = (unref(wrap).scrollTop * 100) / unref(wrap).clientHeight |
|
|
@ -108,8 +102,11 @@ onBeforeUnmount(() => { |
|
|
|
<template> |
|
|
|
<template> |
|
|
|
<div class="scrollbar"> |
|
|
|
<div class="scrollbar"> |
|
|
|
<div |
|
|
|
<div |
|
|
|
ref="wrap" class="scrollbar__wrap" :class="[wrapClass, native ? '' : 'scrollbar__wrap--hidden-default']" |
|
|
|
ref="wrap" |
|
|
|
:style="style as any" @scroll="handleScroll" |
|
|
|
class="scrollbar__wrap" |
|
|
|
|
|
|
|
:class="[wrapClass, native ? '' : 'scrollbar__wrap--hidden-default']" |
|
|
|
|
|
|
|
:style="wrapStyle" |
|
|
|
|
|
|
|
@scroll="handleScroll" |
|
|
|
> |
|
|
|
> |
|
|
|
<component :is="tag" ref="resize" class="scrollbar__view" :class="[viewClass]" :style="viewStyle"> |
|
|
|
<component :is="tag" ref="resize" class="scrollbar__view" :class="[viewClass]" :style="viewStyle"> |
|
|
|
<slot /> |
|
|
|
<slot /> |
|
|
|