refactor(components): [scrollbar] switch to script-setup syntax (#7986)

element-plus · May 30, 2022 · 54efcfb · 54efcfb
1 parent d3f5052
commit 54efcfb
Show file tree

Hide file tree

Showing 8 changed files with 315 additions and 361 deletions.
diff --git a/packages/components/scrollbar/src/bar.ts b/packages/components/scrollbar/src/bar.ts
@@ -1,19 +1,14 @@
 import { buildProps } from '@element-plus/utils'
 import type { ExtractPropTypes } from 'vue'
+import type Bar from './bar.vue'
 
 export const barProps = buildProps({
   always: {
     type: Boolean,
     default: true,
   },
-  width: {
-    type: String,
-    default: '',
-  },
-  height: {
-    type: String,
-    default: '',
-  },
+  width: String,
+  height: String,
   ratioX: {
     type: Number,
     default: 1,
@@ -24,3 +19,5 @@ export const barProps = buildProps({
   },
 } as const)
 export type BarProps = ExtractPropTypes<typeof barProps>
+
+export type BarInstance = InstanceType<typeof Bar>
diff --git a/packages/components/scrollbar/src/bar.vue b/packages/components/scrollbar/src/bar.vue
@@ -8,36 +8,28 @@
     :always="always"
   />
 </template>
-<script lang="ts">
-import { defineComponent, ref } from 'vue'
+<script lang="ts" setup>
+import { ref } from 'vue'
+import { GAP } from './util'
 import Thumb from './thumb.vue'
 import { barProps } from './bar'
 
-export default defineComponent({
-  components: {
-    Thumb,
-  },
-  props: barProps,
-  setup(props) {
-    const moveX = ref(0)
-    const moveY = ref(0)
-    const GAP = 4 // top 2 + bottom 2 of bar instance
+const props = defineProps(barProps)
 
-    const handleScroll = (wrap: HTMLDivElement) => {
-      if (wrap) {
-        const offsetHeight = wrap.offsetHeight - GAP
-        const offsetWidth = wrap.offsetWidth - GAP
+const moveX = ref(0)
+const moveY = ref(0)
 
-        moveY.value = ((wrap.scrollTop * 100) / offsetHeight) * props.ratioY
-        moveX.value = ((wrap.scrollLeft * 100) / offsetWidth) * props.ratioX
-      }
-    }
+const handleScroll = (wrap: HTMLDivElement) => {
+  if (wrap) {
+    const offsetHeight = wrap.offsetHeight - GAP
+    const offsetWidth = wrap.offsetWidth - GAP
 
-    return {
-      handleScroll,
-      moveX,
-      moveY,
-    }
-  },
+    moveY.value = ((wrap.scrollTop * 100) / offsetHeight) * props.ratioY
+    moveX.value = ((wrap.scrollLeft * 100) / offsetWidth) * props.ratioX
+  }
+}
+
+defineExpose({
+  handleScroll,
 })
 </script>
diff --git a/packages/components/scrollbar/src/scrollbar.ts b/packages/components/scrollbar/src/scrollbar.ts
@@ -1,5 +1,6 @@
 import { buildProps, definePropType, isNumber } from '@element-plus/utils'
 import type { ExtractPropTypes, StyleValue } from 'vue'
+import type Scrollbar from './scrollbar.vue'
 
 export const scrollbarProps = buildProps({
   height: {
@@ -10,10 +11,7 @@ export const scrollbarProps = buildProps({
     type: [String, Number],
     default: '',
   },
-  native: {
-    type: Boolean,
-    default: false,
-  },
+  native: Boolean,
   wrapStyle: {
     type: definePropType<StyleValue>([String, Object, Array]),
     default: '',
@@ -35,16 +33,12 @@ export const scrollbarProps = buildProps({
     type: String,
     default: 'div',
   },
-  always: {
-    type: Boolean,
-    default: false,
-  },
+  always: Boolean,
   minSize: {
     type: Number,
     default: 20,
   },
 } as const)
-
 export type ScrollbarProps = ExtractPropTypes<typeof scrollbarProps>
 
 export const scrollbarEmits = {
@@ -57,3 +51,5 @@ export const scrollbarEmits = {
   }) => isNumber(scrollTop) && isNumber(scrollLeft),
 }
 export type ScrollbarEmits = typeof scrollbarEmits
+
+export type ScrollbarInstance = InstanceType<typeof Scrollbar>