refactor(components): [affix] switch to script-setup syntax (#6065)

packages/components/affix/src/affix.vue

@@ -5,15 +5,8 @@
     </div>
   </div>
 </template>
-<script lang="ts">
+<script lang="ts" setup>
-import {
+import { computed, onMounted, reactive, shallowRef, watch } from 'vue'
-  computed,
-  defineComponent,
-  onMounted,
-  reactive,
-  shallowRef,
-  watch,
-} from 'vue'
 import { useEventListener, useResizeObserver } from '@vueuse/core'
 import { getScrollContainer } from '@element-plus/utils'
 import { useNamespace } from '@element-plus/hooks'
@@ -21,42 +14,40 @@ import { affixEmits, affixProps } from './affix'
 
 import type { CSSProperties } from 'vue'
 
-export default defineComponent({
+defineOptions({
   name: 'ElAffix',
+})
 
-  props: affixProps,
+const props = defineProps(affixProps)
-  emits: affixEmits,
+const emit = defineEmits(affixEmits)
 
-  setup(props, { emit }) {
+const ns = useNamespace('affix')
-    const ns = useNamespace('affix')
 
-    const target = shallowRef<HTMLElement>()
+const target = shallowRef<HTMLElement>()
-    const root = shallowRef<HTMLDivElement>()
+const root = shallowRef<HTMLDivElement>()
-    const scrollContainer = shallowRef<HTMLElement | Window>()
+const scrollContainer = shallowRef<HTMLElement | Window>()
 
-    const state = reactive({
+const state = reactive({
   fixed: false,
   height: 0, // height of root
   width: 0, // width of root
   scrollTop: 0, // scrollTop of documentElement
   clientHeight: 0, // clientHeight of documentElement
   transform: 0,
-    })
+})
 
-    const rootStyle = computed<CSSProperties>(() => {
+const rootStyle = computed<CSSProperties>(() => {
   return {
     height: state.fixed ? `${state.height}px` : '',
     width: state.fixed ? `${state.width}px` : '',
   }
-    })
+})
 
-    const affixStyle = computed<CSSProperties | undefined>(() => {
+const affixStyle = computed<CSSProperties | undefined>(() => {
   if (!state.fixed) return
 
   const offset = props.offset ? `${props.offset}px` : 0
-      const transform = state.transform
+  const transform = state.transform ? `translateY(${state.transform}px)` : ''
-        ? `translateY(${state.transform}px)`
-        : ''
 
   return {
     height: `${state.height}px`,
@@ -66,9 +57,9 @@ export default defineComponent({
     transform,
     zIndex: props.zIndex,
   }
-    })
+})
 
-    const update = () => {
+const update = () => {
   if (!root.value || !target.value || !scrollContainer.value) return
 
   const rootRect = root.value.getBoundingClientRect()
@@ -101,25 +92,25 @@ export default defineComponent({
       state.fixed = state.clientHeight - props.offset < rootRect.bottom
     }
   }
-    }
+}
 
-    const onScroll = () => {
+const onScroll = () => {
   update()
 
   emit('scroll', {
     scrollTop: state.scrollTop,
     fixed: state.fixed,
   })
-    }
+}
 
-    watch(
+watch(
   () => state.fixed,
   () => {
     emit('change', state.fixed)
   }
-    )
+)
 
-    onMounted(() => {
+onMounted(() => {
   if (props.target) {
     target.value =
       document.querySelector<HTMLElement>(props.target) ?? undefined
@@ -130,20 +121,9 @@ export default defineComponent({
     target.value = document.documentElement
   }
   scrollContainer.value = getScrollContainer(root.value!, true)
-    })
-
-    useEventListener(scrollContainer, 'scroll', onScroll)
-    useResizeObserver(root, () => update())
-    useResizeObserver(target, () => update())
-
-    return {
-      ns,
-      root,
-      state,
-      rootStyle,
-      affixStyle,
-      update,
-    }
-  },
 })
+
+useEventListener(scrollContainer, 'scroll', onScroll)
+useResizeObserver(root, () => update())
+useResizeObserver(target, () => update())
 </script>