Convert Vue 2.7 site components from Options API to Composition API with script setup

site/src/App.vue

@@ -5,61 +5,62 @@
   </td-doc-layout>
 </template>
 
-<script>
-export default {
-  computed: {
-    headerStyle () {
-      const { name } = this.$route
-      const fixedHeaderList = ['home', 'home-en', 'source', 'source-en', 'trade']
-      if (fixedHeaderList.includes(name)) {
-        return {
-          position: 'fixed',
-          top: 0,
-          left: 0,
-          width: '100%',
-          zIndex: 1200,
-          '--bg-color-secondarypage': 'var(--bg-color-navigation)',
-          '--bg-color-secondarypage-hover': 'var(--bg-color-navigation-hover)',
-          '--bg-color-secondarypage-select': 'var(--bg-color-navigation-select)'
-        }
-      }
-      return { display: 'none' }
-    }
-  },
+<script setup>
+import { computed, onMounted, onBeforeUnmount, watch, getCurrentInstance } from 'vue';
+// vue-router@3 无 useRoute 组合式 API，使用实例 proxy.$route，并用 computed 保持响应式
+const { proxy } = getCurrentInstance();
+const route = computed(() => proxy.$route);
 
-  mounted () {
-    window.addEventListener('load', this.handleHashScroll)
-  },
+// Computed
+const headerStyle = computed(() => {
+  const { name } = route.value;
+  const fixedHeaderList = ['home', 'home-en', 'source', 'source-en', 'trade'];
+  if (fixedHeaderList.includes(name)) {
+    return {
+      position: 'fixed',
+      top: 0,
+      left: 0,
+      width: '100%',
+      zIndex: 1200,
+      '--bg-color-secondarypage': 'var(--bg-color-navigation)',
+      '--bg-color-secondarypage-hover': 'var(--bg-color-navigation-hover)',
+      '--bg-color-secondarypage-select': 'var(--bg-color-navigation-select)',
+    };
+  }
+  return { display: 'none' };
+});
 
-  beforeDestroy () {
-    window.removeEventListener('load', this.handleHashScroll)
-  },
+// Methods
+const handleHashScroll = () => {
+  const hash = decodeURIComponent(route.value.hash);
+  requestAnimationFrame(() => {
+    const id = hash.slice(1);
+    const anchorEl = document.getElementById(id);
+    if (!anchorEl) return;
 
-  watch: {
-    $route: {
-      immediate: true,
-      handler (route) {
-        if (route.meta) {
-          document.title = route.meta.documentTitle || 'TDesign'
-        }
-      }
-    }
-  },
+    requestAnimationFrame(() => {
+      window.scrollTo({ top: anchorEl.offsetTop - 88 });
+    });
+  });
+};
+
+// Lifecycle hooks
+onMounted(() => {
+  window.addEventListener('load', handleHashScroll);
+});
 
-  methods: {
-    handleHashScroll () {
-      const { $route } = this
-      const hash = decodeURIComponent($route.hash)
-      requestAnimationFrame(() => {
-        const id = hash.slice(1)
-        const anchorEl = document.getElementById(id)
-        if (!anchorEl) return
+onBeforeUnmount(() => {
+  window.removeEventListener('load', handleHashScroll);
+});
 
-        requestAnimationFrame(() => {
-          window.scrollTo({ top: anchorEl.offsetTop - 88 })
-        })
-      })
+// Watch
+watch(
+  route,
+  (newRoute) => {
+    if (newRoute && newRoute.meta) {
+      document.title = newRoute.meta.documentTitle || 'TDesign';
     }
-  }
-}
+  },
+  { immediate: true },
+);
 </script>

site/src/components/avatar.vue

@@ -1,81 +1,76 @@
 <template>
   <span :class="_class" :style="_style">
-    <img
-      :src="imgSrc"
-      alt="user avatar"
-      @error="onError"
-      v-if="!error && imgSrc"
-    >
-    <div class="tdesign-avatar-name">{{username}}</div>
+    <img :src="imgSrc" alt="user avatar" @error="onError" v-if="!error && imgSrc" />
+    <div class="tdesign-avatar-name">{{ username }}</div>
   </span>
 </template>
-<script>
-function getSrc (username, src) {
+<script setup>
+import { ref, computed, defineProps } from 'vue';
+
+function getSrc(username, src) {
   if (username) {
     // return `http://dcloud.oa.com/Public/Avatar/${username}.png`;
     // return `http://r.hrc.oa.com/photo/500/${username}.png`;
-    return `https://dayu.oa.com/avatars/${username}/profile.jpg`
+    return `https://dayu.oa.com/avatars/${username}/profile.jpg`;
   }
 
-  return src || ''
+  return src || '';
 }
 
-export default {
-  props: {
-    /**
-     * 头像类型
-     * @member square | round
-     */
-    type: {
-      type: String,
-      default: 'round'
-    },
-    /**
-     * 头像大小
-     * @member large | default | small
-     */
-    size: {
-      type: String,
-      default: 'default'
-    },
-    username: String,
-    src: String,
-    width: [String, Number],
-    height: [String, Number]
+const props = defineProps({
+  /**
+   * 头像类型
+   * @member square | round
+   */
+  type: {
+    type: String,
+    default: 'round',
   },
-  data () {
-    return {
-      prefixCls: 'tdesign-avatar',
-      error: false
-    }
+  /**
+   * 头像大小
+   * @member large | default | small
+   */
+  size: {
+    type: String,
+    default: 'default',
   },
-  computed: {
-    _class () {
-      return [this.prefixCls, {
-        [`${this.prefixCls}__lg`]: this.size === 'large',
-        [`${this.prefixCls}__square`]: this.type === 'square',
-        [`${this.prefixCls}__default`]: this.error || !this.imgSrc
-      }]
-    },
-    _style () {
-      if (this.width) {
-        return {
-          width: `${this.width}px`,
-          height: `${this.width}px`
-        }
-      }
-      return {}
+  username: String,
+  src: String,
+  width: [String, Number],
+  height: [String, Number],
+});
+
+const prefixCls = 'tdesign-avatar';
+const error = ref(false);
+
+const _class = computed(() => {
+  return [
+    prefixCls,
+    {
+      [`${prefixCls}__lg`]: props.size === 'large',
+      [`${prefixCls}__square`]: props.type === 'square',
+      [`${prefixCls}__default`]: error.value || !imgSrc.value,
     },
-    imgSrc () {
-      return getSrc(this.username, this.src)
-    }
-  },
-  methods: {
-    onError () {
-      this.error = true
-    }
+  ];
+});
+
+const _style = computed(() => {
+  if (props.width) {
+    return {
+      width: `${props.width}px`,
+      height: `${props.width}px`,
+    };
   }
-}
+  return {};
+});
+
+const imgSrc = computed(() => {
+  return getSrc(props.username, props.src);
+});
+
+const onError = () => {
+  error.value = true;
+};
 </script>
 
 <style lang="less">