添加scrollbar

kscript · kscript · commit 30eb7b2a3752 · 2020-08-26T11:27:36.000+08:00
diff --git a/packages/global.d.ts b/packages/global.d.ts
@@ -0,0 +1,3 @@
+export interface anyObject<T = any> {
+    [prop: string]: T
+}
diff --git a/packages/index.ts b/packages/index.ts
@@ -20,11 +20,10 @@ import { ElementUIOptions } from './component'
 import icon from './icon'
 import input from './input'
 import main from './main'
+import scrollbar from './scrollbar'
 import tag from './tag'
 
-interface anyObject<T = any> {
-  [prop: string]: T
-}
+import { anyObject } from 'packages/global'
 
 export const Alert = alert
 export const Aside = aside
@@ -42,6 +41,7 @@ export const CollapseTransition = collapseTransition
 export const Icon = icon
 export const Input = input
 export const Main = main
+export const Scrollbar = scrollbar
 export const Tag = tag
 
 export const components = [
@@ -61,6 +61,7 @@ export const components = [
   Icon,
   Input,
   Main,
+  Scrollbar,
   Tag
 ]
 
@@ -101,5 +102,6 @@ export default {
   Icon,
   Input,
   Main,
+  Scrollbar,
   Tag
 }
diff --git a/packages/scrollbar/index.ts b/packages/scrollbar/index.ts
@@ -0,0 +1,7 @@
+import { App } from 'vue'
+import Component from './src/index.vue'
+export const install = function (app: App) {
+  app.component(Component.name as string, Component)
+}
+
+export default Component
diff --git a/packages/scrollbar/src/bar.vue b/packages/scrollbar/src/bar.vue
@@ -0,0 +1,103 @@
+<script lang="ts">
+import { defineComponent, ref, reactive, h, getCurrentInstance, ComponentInternalInstance, PropType, onMounted, nextTick, onBeforeUnmount, computed } from 'vue'
+// @ts-ignore
+import { on, off } from '@/utils/dom'
+import { renderThumbStyle, BAR_MAP, BaseMap } from './util'
+import { EventType } from 'mitt'
+
+export default defineComponent({
+  name: 'Bar',
+
+  props: {
+    vertical: Boolean,
+    size: String,
+    move: Number
+  },
+
+  setup(props) {
+    const state = reactive({
+      X: 0,
+      Y: 0,
+      cursorDown: false
+    })
+    const bar = computed(() => {
+      return BAR_MAP[props.vertical ? 'vertical' : 'horizontal'] as BaseMap
+    })
+    const instance = getCurrentInstance() as ComponentInternalInstance 
+    const wrap = instance.parent?.refs.wrap as HTMLElement
+    const thumb = instance.refs.thumb as HTMLElement
+    const clickTrackHandler = (e: MouseEvent) => {
+      const target = e.target as HTMLElement
+
+      const { direction, offset, client, scroll, scrollSize} = bar.value
+      const el = instance.vnode?.el as HTMLElement
+      const newOffset = Math.abs(target.getBoundingClientRect()[direction] - e[client])
+      const thumbHalf = (thumb[offset] / 2)
+      const thumbPositionPercentage = ((newOffset - thumbHalf) * 100 / el[offset])
+
+      wrap[scroll] = (thumbPositionPercentage * wrap[scrollSize] / 100)
+    }
+
+    const clickThumbHandler = (e: MouseEvent) => {
+      // prevent click event of right button
+      if (e.ctrlKey || e.button === 2) {
+        return
+      }
+      startDrag(e)
+      const { axis, direction, offset, client } = bar.value
+      const currentTarget = e.currentTarget as HTMLElement
+      state[axis] = (currentTarget[offset] - (e[client] - currentTarget.getBoundingClientRect()[direction]))
+    }
+
+    const startDrag = (e: Event) => {
+      e.stopImmediatePropagation()
+      state.cursorDown = true
+
+      on(document, 'mousemove', mouseMoveDocumentHandler)
+      on(document, 'mouseup', mouseUpDocumentHandler)
+      document.onselectstart = () => false
+    }
+
+    const mouseMoveDocumentHandler = (e: MouseEvent) => {
+      if (state.cursorDown === false) return
+      const { axis, offset, scroll, direction, client, scrollSize } = bar.value
+      const prevPage = state[axis]
+
+      if (!prevPage) return
+      const el = instance.vnode.el as HTMLElement
+
+      const newOffset = ((el.getBoundingClientRect()[direction] - e[client]) * -1)
+      const thumbClickPosition = (thumb[offset] - prevPage)
+      const thumbPositionPercentage = ((newOffset - thumbClickPosition) * 100 / el[offset])
+
+      wrap[scroll] = (thumbPositionPercentage * wrap[scrollSize] / 100)
+    }
+
+    const mouseUpDocumentHandler = (e: Event) => {
+      state.cursorDown = false
+      state[bar.value.axis] = 0
+      off(document, 'mousemove', mouseMoveDocumentHandler)
+      document.onselectstart = null
+    }
+
+    return () => {
+      const { size, move } = props
+      return h('div', {
+        class: ['el-scrollbar__bar', 'is-' + bar.value.key],
+        onMousedown: clickTrackHandler
+      }, [
+        h('div', {
+          ref: 'thumb',
+          class: 'el-scrollbar__thumb',
+          style: renderThumbStyle({ size, move, bar: bar.value }),
+          onMousedown: clickThumbHandler
+        })
+      ])
+    }
+  },
+
+  // destroyed() {
+  //   off(document, 'mouseup', this.mouseUpDocumentHandler)
+  // }
+})
+</script>
diff --git a/packages/scrollbar/src/index.vue b/packages/scrollbar/src/index.vue
@@ -0,0 +1,123 @@
+<script lang="ts">
+// reference https://github.com/noeldelgado/gemini-scrollbar/blob/master/index.js
+import { defineComponent, ref, reactive, h, getCurrentInstance, ComponentInternalInstance, PropType, onMounted, nextTick, onBeforeUnmount } from 'vue'
+// @ts-ignore
+import { addResizeListener, removeResizeListener } from '@/utils/resize-event'
+// @ts-ignore
+import scrollbarWidth from '@/utils/scrollbar-width'
+// @ts-ignore
+import { toObject } from '@/utils/util'
+import Bar from './bar.vue'
+import { anyObject } from 'packages/global'
+
+/* istanbul ignore next */
+export default defineComponent({
+  name: 'ElScrollbar',
+
+  components: { Bar },
+
+  props: {
+    native: Boolean,
+    wrapStyle: {
+      type: [Object, Array, String] as PropType<anyObject | (anyObject|String)[] | String>,
+      default: ''
+    },
+    wrapClass: {},
+    viewClass: {},
+    viewStyle: {},
+    noresize: Boolean, // 如果 container 尺寸不会发生变化，最好设置它可以优化性能
+    tag: {
+      type: String,
+      default: 'div'
+    }
+  },
+
+  setup(props, cxt) {
+    const state = reactive({
+      sizeWidth: '0',
+      sizeHeight: '0',
+      moveX: 0,
+      moveY: 0
+    })
+    const instance = getCurrentInstance() as ComponentInternalInstance
+    const wrap = ref(instance.refs.wrap as HTMLElement)
+    const handleScroll = () => {
+      state.moveY = ((wrap.value.scrollTop * 100) / wrap.value.clientHeight)
+      state.moveX = ((wrap.value.scrollLeft * 100) / wrap.value.clientWidth)
+    }
+    const update = () => {
+      let heightPercentage, widthPercentage
+      if (!wrap.value) return
+
+      heightPercentage = (wrap.value.clientHeight * 100 / wrap.value.scrollHeight)
+      widthPercentage = (wrap.value.clientWidth * 100 / wrap.value.scrollWidth)
+
+      state.sizeHeight = (heightPercentage < 100) ? (heightPercentage + '%') : ''
+      state.sizeWidth = (widthPercentage < 100) ? (widthPercentage + '%') : ''
+    }
+    onMounted(() => {
+      if (props.native) return
+      nextTick(update)
+      !props.noresize && addResizeListener(instance.refs.resize, update)
+    })
+    onBeforeUnmount(() => {
+      if (props.native) return
+      !props.noresize && removeResizeListener(instance.refs.resize, update)
+    })
+    return () => {
+      const gutter = scrollbarWidth()
+      let style = props.wrapStyle
+      if (gutter) {
+        const gutterWith = `-${gutter}px`
+        const gutterStyle = `margin-bottom: ${gutterWith}; margin-right: ${gutterWith};`
+
+        if (Array.isArray(props.wrapStyle)) {
+          style = toObject(props.wrapStyle) as anyObject
+          style.marginRight = style.marginBottom = gutterWith
+        } else if (typeof props.wrapStyle === 'string') {
+          style += gutterStyle
+        } else {
+          style = gutterStyle
+        }
+      }
+
+      const view = h(props.tag, {
+        ref: 'resize',
+        class: ['el-scrollbar__view', props.viewClass],
+        style: props.viewStyle,
+      }, cxt.slots.default?.() || [])
+      const wrap = h('div', {
+        ref: 'wrap',
+        style,
+        class: [props.wrapClass, 'el-scrollbar__wrap', gutter ? '' : 'el-scrollbar__wrap--hidden-default'],
+        onScroll: handleScroll,
+      }, [view])
+
+      let nodes
+
+      if (!props.native) {
+        nodes = ([
+          wrap,
+          h('Bar', {
+            move: state.moveX,
+            size: state.sizeWidth
+          }),
+          h('Bar', {
+            vertical: '',
+            move: state.moveY,
+            size: state.sizeHeight
+          })
+        ])
+      } else {
+        nodes = [h('div', {
+          ref: 'wrap',
+          style,
+          class: [props.wrapClass, 'el-scrollbar__wrap']
+        }, [view])]
+      }
+      return h('div', { class: 'el-scrollbar' }, nodes)
+    }
+  }
+})
+
+</script>>
diff --git a/packages/scrollbar/src/util.ts b/packages/scrollbar/src/util.ts
@@ -0,0 +1,53 @@
+import { anyObject } from 'packages/global'
+export interface BaseMap {
+  offset: 'offsetHeight' | 'offsetWidth'
+  scroll: 'scrollTop' | 'scrollLeft'
+  scrollSize: 'scrollHeight' | 'scrollWidth'
+  size: 'height' | 'width'
+  key: 'vertical' | 'horizontal'
+  axis: 'Y' | 'X'
+  client: 'clientY' | 'clientX'
+  direction: 'top' | 'left'
+}
+export interface BarMap {
+  vertical: BaseMap
+  horizontal: BaseMap
+}
+export const BAR_MAP: BarMap = {
+  vertical: {
+    offset: 'offsetHeight',
+    scroll: 'scrollTop',
+    scrollSize: 'scrollHeight',
+    size: 'height',
+    key: 'vertical',
+    axis: 'Y',
+    client: 'clientY',
+    direction: 'top'
+  },
+  horizontal: {
+    offset: 'offsetWidth',
+    scroll: 'scrollLeft',
+    scrollSize: 'scrollWidth',
+    size: 'width',
+    key: 'horizontal',
+    axis: 'X',
+    client: 'clientX',
+    direction: 'left'
+  }
+}
+
+export function renderThumbStyle({ move, size, bar }: {
+  move?: Number,
+  size?: string,
+  bar: anyObject
+}) {
+  const style: anyObject = {}
+  const translate = `translate${bar.axis}(${ move }%)`
+
+  style[bar.size] = size
+  style.transform = translate
+  style.msTransform = translate
+  style.webkitTransform = translate
+
+  return style
+}
diff --git a/src/utils/scrollbar-width.js b/src/utils/scrollbar-width.js
@@ -3,7 +3,7 @@ import Vue from 'vue';
 let scrollBarWidth;
 
 export default function() {
-  if (Vue.prototype.$isServer) return 0;
+  // if (Vue.prototype.$isServer) return 0;
   if (scrollBarWidth !== undefined) return scrollBarWidth;
 
   const outer = document.createElement('div');

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+export interface anyObject<T = any> {`
	`2`	`+ [prop: string]: T`
	`3`	`+}`