Merge pull request #58 from xianshenglu:feat_vue3

chore(vue@3): migrate ref to useTemplateRef

Author: xianshenglu

.github/workflows/vue@3-master.yml

@@ -0,0 +1,46 @@
+# This workflow will do a clean install of node dependencies, build the source code and run tests across different versions of node
+# For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
+
+name: Vue@3-PR
+
+on:
+  push:
+    branches:
+      - master
+    paths:
+      - 'demo/vue@3'
+jobs:
+  build:
+    runs-on: ubuntu-18.04
+
+    strategy:
+      matrix:
+        node-version: [22.x]
+
+    steps:
+      - uses: actions/checkout@v2
+
+      - name: Merge master into current branch
+        run: |
+          git fetch master
+          git merge master
+
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v1
+        with:
+          node-version: ${{ matrix.node-version }}
+
+      - name: Install
+        run: npm ci
+
+      # - name: Lint
+      #   run: npm run lint
+
+      # - name: Unit Test
+      #   run: npm run test
+
+      # - name: EndToEnd Test
+      #   run: npm run e2e:headless
+
+      - name: Build
+        run: npm run build

.github/workflows/vue@3-pr.yml

@@ -0,0 +1,45 @@
+# This workflow will do a clean install of node dependencies, build the source code and run tests across different versions of node
+# For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
+
+name: Vue@3-PR
+
+on:
+  pull_request:
+    types: [opened, synchronize]
+    paths:
+      - 'demo/vue@3'
+jobs:
+  build:
+    runs-on: ubuntu-18.04
+
+    strategy:
+      matrix:
+        node-version: [22.x]
+
+    steps:
+      - uses: actions/checkout@v2
+
+      - name: Merge master into current branch
+        run: |
+          git fetch master
+          git merge master
+
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v1
+        with:
+          node-version: ${{ matrix.node-version }}
+
+      - name: Install
+        run: npm ci
+
+      # - name: Lint
+      #   run: npm run lint
+
+      # - name: Unit Test
+      #   run: npm run test
+
+      # - name: EndToEnd Test
+      #   run: npm run e2e:headless
+
+      - name: Build
+        run: npm run build

demo/vue@3/src/App.vue

@@ -18,14 +18,14 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, onMounted, computed, type Ref } from 'vue'
+import { onMounted, computed, useTemplateRef } from 'vue'
 import { useStore } from 'vuex'
 
 import AppHeader from '@/components/AppHeader.vue'
 import AppLoading from './components/AppLoading.vue'
 import PlayerMed from './views/player/PlayerMed.vue'
 
-const audioEl: Ref<HTMLAudioElement | null> = ref(null)
+const audioEl = useTemplateRef<HTMLAudioElement | null>('audioEl')
 const store = useStore()
 
 const isPlayerMedShow = computed(() => store.state.player.isPlayerMedShow)

demo/vue@3/src/modules/PubList.vue

@@ -24,7 +24,7 @@
 </template>
 
 <script lang="ts" setup generic="Item extends { imgUrl: string; title: string; path: string }">
-import { ref, watch, nextTick, computed } from 'vue';
+import { ref, watch, nextTick, computed, useTemplateRef } from 'vue';
 import { useStore } from 'vuex';
 import { lazyLoad } from '@/utils';
 interface Props {
@@ -36,7 +36,7 @@ const props = withDefaults(defineProps<Props>(), {
 
 const store = useStore();
 const lazyImageElements = ref<(HTMLImageElement | null)[]>([]);
-const lazyLoadRoot = ref(null);
+const lazyLoadRoot = useTemplateRef<HTMLUListElement | null>('lazyLoadRoot');
 
 const logo__grey = computed(() => store.state.images.logo__grey);
 

demo/vue@3/src/views/player/PlayerProgress.vue

@@ -9,12 +9,12 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, computed, onMounted, onUnmounted, nextTick } from 'vue'
+import { ref, computed, onMounted, onUnmounted, nextTick, useTemplateRef } from 'vue'
 import { useStore } from 'vuex'
 import { secondToMin } from '@/utils'
 
 const store = useStore()
-const progressBar = ref<HTMLDivElement | null>(null)
+const progressBar = useTemplateRef<HTMLDivElement | null>('progressBar')
 
 const audioEl = computed(() => store.state.player.audioEl)
 

demo/vue@3/src/views/search/Search.vue

@@ -36,7 +36,7 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, computed, onMounted, onUnmounted } from 'vue'
+import { ref, computed, onMounted, onUnmounted, useTemplateRef } from 'vue'
 import { useStore } from 'vuex'
 import { useRoute, useRouter } from 'vue-router'
 
@@ -51,7 +51,7 @@ const route = useRoute()
 const router = useRouter()
 const { startLoading, stopLoading, setLoadingExcludeSearchForm } = useLoading()
 
-const searchCont = ref<HTMLElement | null>(null)
+const searchCont = useTemplateRef<HTMLElement | null>('searchCont')
 
 const title = ref('搜索')
 const searchType = ref('最近热门')

demo/vue@3/src/views/singer/SingerList.vue

@@ -22,7 +22,7 @@
 </template>
 
 <script setup>
-import { ref, computed, watch, nextTick, onMounted } from 'vue'
+import { ref, computed, watch, nextTick, onMounted, useTemplateRef } from 'vue'
 import { useStore } from 'vuex'
 import { useRoute } from 'vue-router'
 
@@ -36,7 +36,7 @@ const store = useStore()
 const route = useRoute()
 const { startLoading, stopLoading, setLoadingExcludeHeader } = useLoading()
 
-const lazyLoadRoot = ref(null)
+const lazyLoadRoot = useTemplateRef<HTMLUListElement | null>('lazyLoadRoot')
 const lazyImageElements = ref([])
 
 const logo__grey = computed(() => store.state.images.logo__grey)