refactor(components): [visual-hidden] visual-hidden (#8192)

* refactor(components): [visual-hidden] visual-hidden

* refactor(components): [visual-hidden] visual-hidden

packages/components/visual-hidden/index.ts

@@ -3,3 +3,5 @@ import ElVisuallyHidden from './src/visual-hidden.vue'
 export { ElVisuallyHidden }
 
 export default ElVisuallyHidden
+
+export * from './src/visual-hidden'

packages/components/visual-hidden/src/visual-hidden.ts

@@ -0,0 +1,9 @@
+import { buildProps, definePropType } from '@element-plus/utils'
+import type { StyleValue } from 'vue'
+
+export const visualHiddenProps = buildProps({
+  style: {
+    type: definePropType<StyleValue>([String, Object, Array]),
+    default: () => ({}),
+  },
+} as const)

packages/components/visual-hidden/src/visual-hidden.vue

@@ -4,36 +4,31 @@
   </span>
 </template>
 
-<script lang="ts">
-import { computed, defineComponent } from 'vue'
+<script lang="ts" setup>
+import { computed } from 'vue'
+import { visualHiddenProps } from './visual-hidden'
+import type { StyleValue } from 'vue'
+const props = defineProps(visualHiddenProps)
 
-export default defineComponent({
+defineOptions({
   name: 'ElVisuallyHidden',
-  props: {
-    style: {
-      type: [String, Object, Array],
+})
+
+const computedStyle = computed<StyleValue>(() => {
+  return [
+    props.style,
+    {
+      position: 'absolute',
+      border: 0,
+      width: 1,
+      height: 1,
+      padding: 0,
+      margin: -1,
+      overflow: 'hidden',
+      clip: 'rect(0, 0, 0, 0)',
+      whiteSpace: 'nowrap',
+      wordWrap: 'normal',
     },
-  },
-  setup(props) {
-    return {
-      computedStyle: computed(() => {
-        return [
-          props.style,
-          {
-            position: 'absolute',
-            border: 0,
-            width: 1,
-            height: 1,
-            padding: 0,
-            margin: -1,
-            overflow: 'hidden',
-            clip: 'rect(0, 0, 0, 0)',
-            whiteSpace: 'nowrap',
-            wordWrap: 'normal',
-          },
-        ] as any
-      }),
-    }
-  },
+  ]
 })
 </script>