refactor:模板引用升级为 vue 3.5 新增的 useTemplateRef

Author: build-admin

app/admin/library/crud/stubs/html/form.stub

@@ -44,16 +44,16 @@
 </template>
 
 <script setup lang="ts">
-import type { FormInstance, FormItemRule } from 'element-plus'
-import { inject, reactive, ref } from 'vue'
+import type { FormItemRule } from 'element-plus'
+import { inject, reactive, useTemplateRef } from 'vue'
 import { useI18n } from 'vue-i18n'
 import FormItem from '/@/components/formItem/index.vue'
 import { useConfig } from '/@/stores/config'
 import type baTableClass from '/@/utils/baTable'
 import { buildValidatorData } from '/@/utils/validate'
 
 const config = useConfig()
-const formRef = ref<FormInstance>()
+const formRef = useTemplateRef('formRef')
 const baTable = inject('baTable') as baTableClass
 
 const { t } = useI18n()

app/admin/library/crud/stubs/html/index.stub

@@ -20,7 +20,7 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted, provide, ref } from 'vue'
+import { onMounted, provide, useTemplateRef } from 'vue'
 import { useI18n } from 'vue-i18n'
 import PopupForm from './popupForm.vue'
 import { baTableApi } from '/@/api/common'
@@ -34,7 +34,7 @@ defineOptions({
 })
 
 const { t } = useI18n()
-const tableRef = ref()
+const tableRef = useTemplateRef('tableRef')
 const optButtons: OptButton[] = defaultOptButtons({%optButtons%})
 
 /**

web/src/components/baInput/components/baUpload.vue

@@ -50,9 +50,9 @@
 </template>
 
 <script setup lang="ts">
-import { ref, reactive, onMounted, watch, useAttrs, nextTick } from 'vue'
+import { reactive, onMounted, watch, useAttrs, nextTick, useTemplateRef } from 'vue'
 import { genFileId } from 'element-plus'
-import type { UploadInstance, UploadUserFile, UploadProps, UploadRawFile, UploadFiles } from 'element-plus'
+import type { UploadUserFile, UploadProps, UploadRawFile, UploadFiles } from 'element-plus'
 import { stringToArray } from '/@/components/baInput/helper'
 import { fullUrl, arrayFullUrl, getFileNameFromPath, getArrayKey } from '/@/utils/common'
 import { fileUpload } from '/@/api/common'
@@ -110,7 +110,7 @@ const emits = defineEmits<{
 }>()
 
 const attrs = useAttrs()
-const upload = ref<UploadInstance>()
+const upload = useTemplateRef('upload')
 const state: {
     key: string
     // 返回值类型，通过v-model类型动态计算

web/src/components/baInput/components/iconSelector.vue

@@ -27,15 +27,13 @@
                         </span>
                     </div>
                 </div>
-                <div class="selector-body">
-                    <el-scrollbar ref="selectorScrollbarRef">
-                        <div v-if="renderFontIconNames.length > 0">
-                            <div class="icon-selector-item" :title="item" @click="onIcon(item)" v-for="(item, key) in renderFontIconNames" :key="key">
-                                <Icon :name="item" />
-                            </div>
+                <el-scrollbar class="selector-body">
+                    <div v-if="renderFontIconNames.length > 0">
+                        <div class="icon-selector-item" :title="item" @click="onIcon(item)" v-for="(item, key) in renderFontIconNames" :key="key">
+                            <Icon :name="item" />
                         </div>
-                    </el-scrollbar>
-                </div>
+                    </div>
+                </el-scrollbar>
             </div>
         </div>
         <template #reference>
@@ -66,7 +64,7 @@
 <script setup lang="ts">
 import { useEventListener } from '@vueuse/core'
 import type { Placement } from 'element-plus'
-import { computed, nextTick, onMounted, reactive, ref, watch } from 'vue'
+import { computed, nextTick, onMounted, reactive, useTemplateRef, watch } from 'vue'
 import { getAwesomeIconfontNames, getElementPlusIconfontNames, getIconfontNames, getLocalIconfontNames } from '/@/utils/iconfont'
 
 type IconType = 'ele' | 'awe' | 'ali' | 'local'
@@ -95,8 +93,7 @@ const emits = defineEmits<{
     (e: 'change', value: string): void
 }>()
 
-const selectorInput = ref()
-const selectorScrollbarRef = ref()
+const selectorInput = useTemplateRef('selectorInput')
 const state: {
     iconType: IconType
     selectorWidth: number
@@ -164,7 +161,7 @@ const onIcon = (icon: string) => {
     emits('update:modelValue', icon)
     emits('change', icon)
     nextTick(() => {
-        selectorInput.value.blur()
+        selectorInput.value?.blur()
     })
 }
 
@@ -182,7 +179,7 @@ const renderFontIconNames = computed(() => {
 // 获取 input 的宽度
 const getInputWidth = () => {
     nextTick(() => {
-        state.selectorWidth = selectorInput.value.$el.offsetWidth < 260 ? 260 : selectorInput.value.$el.offsetWidth
+        state.selectorWidth = selectorInput.value?.$el.offsetWidth < 260 ? 260 : selectorInput.value?.$el.offsetWidth
     })
 }
 

web/src/components/baInput/components/remoteSelect.vue

@@ -66,7 +66,7 @@
 <script lang="ts" setup>
 import type { ElSelect } from 'element-plus'
 import { debounce, isEmpty } from 'lodash-es'
-import { computed, getCurrentInstance, nextTick, onMounted, onUnmounted, reactive, ref, toRaw, useAttrs, watch } from 'vue'
+import { computed, getCurrentInstance, nextTick, onMounted, onUnmounted, reactive, toRaw, useAttrs, useTemplateRef, watch } from 'vue'
 import { InputAttr } from '../index'
 import { getSelectData } from '/@/api/common'
 import { useConfig } from '/@/stores/config'
@@ -75,7 +75,7 @@ import { shortUuid } from '/@/utils/random'
 
 const attrs = useAttrs()
 const config = useConfig()
-const selectRef = ref<InstanceType<typeof ElSelect> | undefined>()
+const selectRef = useTemplateRef('selectRef')
 type ElSelectProps = Omit<Partial<InstanceType<typeof ElSelect>['$props']>, 'modelValue'>
 type valueTypes = string | number | string[] | number[]
 

web/src/components/baInput/components/selectFile.vue

@@ -39,7 +39,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, reactive, onMounted, provide, watch, nextTick } from 'vue'
+import { reactive, onMounted, provide, watch, nextTick, useTemplateRef } from 'vue'
 import { useI18n } from 'vue-i18n'
 import Table from '/@/components/table/index.vue'
 import TableHeader from '/@/components/table/header/index.vue'
@@ -66,13 +66,14 @@ const emits = defineEmits<{
     (e: 'choice', value: string[]): void
 }>()
 
-const tableRef = ref()
 const { t } = useI18n()
 const state = reactive({
     ready: false,
     tableSelectable: true,
 })
 
+const tableRef = useTemplateRef('tableRef')
+
 const optBtn: OptButton[] = [
     {
         render: 'tipButton',
@@ -83,8 +84,8 @@ const optBtn: OptButton[] = [
         class: 'table-row-choice',
         disabledTip: false,
         click: (row: TableRow) => {
-            const elTableRef = tableRef.value.getRef()
-            elTableRef.clearSelection()
+            const elTableRef = tableRef.value?.getRef()
+            elTableRef?.clearSelection()
             emits('choice', props.returnFullUrl ? [row.full_url] : [row.url])
         },
     },
@@ -198,16 +199,16 @@ const onChoice = () => {
             files.push(props.returnFullUrl ? baTable.table.selection[key].full_url : baTable.table.selection[key].url)
         }
         emits('choice', files)
-        const elTableRef = tableRef.value.getRef()
-        elTableRef.clearSelection()
+        const elTableRef = tableRef.value?.getRef()
+        elTableRef?.clearSelection()
     }
 }
 
 const onSelectionChange = (selection: TableRow[]) => {
     if (props.limit == 0) return
     if (selection.length > props.limit) {
-        const elTableRef = tableRef.value.getRef()
-        elTableRef.toggleRowSelection(selection[selection.length - 1], false)
+        const elTableRef = tableRef.value?.getRef()
+        elTableRef?.toggleRowSelection(selection[selection.length - 1], false)
     }
     state.tableSelectable = !(selection.length >= props.limit)
 }

web/src/components/table/index.vue

@@ -63,15 +63,15 @@
 </template>
 
 <script setup lang="ts">
-import type { ElTable, TableInstance } from 'element-plus'
+import type { ElTable } from 'element-plus'
 import type { Component } from 'vue'
-import { computed, inject, nextTick, ref } from 'vue'
+import { computed, inject, nextTick, useTemplateRef } from 'vue'
 import { useConfig } from '/@/stores/config'
 import type baTableClass from '/@/utils/baTable'
 import { shortUuid } from '/@/utils/random'
 
 const config = useConfig()
-const tableRef = ref<TableInstance>()
+const tableRef = useTemplateRef('tableRef')
 const baTable = inject('baTable') as baTableClass
 type ElTableProps = Partial<InstanceType<typeof ElTable>['$props']>
 

web/src/components/terminal/index.vue

@@ -182,7 +182,7 @@
 <script setup lang="ts">
 import type { TimelineItemProps } from 'element-plus'
 import { ElMessageBox, ElScrollbar } from 'element-plus'
-import { nextTick, onMounted, reactive, ref } from 'vue'
+import { nextTick, onMounted, reactive, useTemplateRef } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { postChangeTerminalConfig } from '/@/api/common'
 import FormItem from '/@/components/formItem/index.vue'
@@ -194,7 +194,7 @@ type SourceType = 'npm' | 'composer'
 
 const { t } = useI18n()
 const terminal = useTerminal()
-const terminalScrollbarRef = ref<InstanceType<typeof ElScrollbar>>()
+const terminalScrollbarRef = useTemplateRef('terminalScrollbarRef')
 
 const state = reactive({
     registryLoading: false,

web/src/layouts/backend/components/baAccount.vue

@@ -77,8 +77,8 @@
 </template>
 
 <script setup lang="ts">
-import type { FormInstance, FormItemRule } from 'element-plus'
-import { reactive, ref, watch } from 'vue'
+import type { FormItemRule } from 'element-plus'
+import { reactive, useTemplateRef, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { baAccountCheckIn, baAccountGetUserInfo } from '/@/api/backend/index'
 import clickCaptcha from '/@/components/clickCaptcha'
@@ -92,7 +92,7 @@ const { t } = useI18n()
 const baAccount = useBaAccount()
 const siteConfig = useSiteConfig()
 const model = defineModel<boolean>()
-const baAccountFormRef = ref<FormInstance>()
+const baAccountFormRef = useTemplateRef('baAccountFormRef')
 
 interface Props {
     loginCallback?: (res: ApiResponse) => void
@@ -116,8 +116,7 @@ const state = reactive({
 })
 
 const onBaAccountSubmitPre = () => {
-    if (!baAccountFormRef.value) return
-    baAccountFormRef.value.validate((valid) => {
+    baAccountFormRef.value?.validate((valid) => {
         if (valid) {
             clickCaptcha(state.user.captchaId, (captchaInfo: string) => onBaAccountSubmit(captchaInfo), { apiBaseURL: siteConfig.apiUrl })
         }

web/src/layouts/backend/components/config.vue

@@ -2,7 +2,7 @@
     <div class="layout-config-drawer">
         <el-drawer :model-value="configStore.layout.showDrawer" :title="t('layouts.Layout configuration')" size="310px" @close="onCloseDrawer">
             <el-scrollbar class="layout-mode-style-scrollbar">
-                <el-form ref="formRef" :model="configStore.layout">
+                <el-form :model="configStore.layout">
                     <div class="layout-mode-styles-box">
                         <el-divider border-style="dashed">{{ t('layouts.Layout mode') }}</el-divider>
                         <div class="layout-mode-box-style">