Skip to content

Commit c57582a

Browse files
pany-angpany-ang
committed
feat: using Vue 3.5's new useTemplateRef
1 parent 1acee7a commit c57582a

File tree

7 files changed

+17
-19
lines changed

7 files changed

+17
-19
lines changed

‎src/common/components/SearchMenu/Modal.vue‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
<script lang="ts" setup>
2-
import type { ElScrollbar } from "element-plus"
32
import type { RouteRecordNameGeneric, RouteRecordRaw } from "vue-router"
43
import { useDevice } from "@@/composables/useDevice"
54
import { isExternal } from "@@/utils/validate"
@@ -14,9 +13,9 @@ const modelValue = defineModel<boolean>({ required: true })
1413
const router = useRouter()
1514
const { isMobile } = useDevice()
1615
17-
const inputRef = ref<HTMLInputElement | null>(null)
18-
const scrollbarRef = ref<InstanceType<typeof ElScrollbar> | null>(null)
19-
const resultRef = ref<InstanceType<typeof Result> | null>(null)
16+
const inputRef = useTemplateRef("inputRef")
17+
const scrollbarRef = useTemplateRef("scrollbarRef")
18+
const resultRef = useTemplateRef("resultRef")
2019
2120
const keyword = ref<string>("")
2221
const result = shallowRef<RouteRecordRaw[]>([])

‎src/layouts/components/TagsView/ScrollPane.vue‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,12 @@
11
<script lang="ts" setup>
2-
import type { ElScrollbar } from "element-plus"
32
import type { RouterLink } from "vue-router"
43
import Screenfull from "@@/components/Screenfull/index.vue"
54
import { useRouteListener } from "@@/composables/useRouteListener"
65
import { ArrowLeft, ArrowRight } from "@element-plus/icons-vue"
76
import { useSettingsStore } from "@/pinia/stores/settings"
87
98
interface Props {
10-
tagRefs: InstanceType<typeof RouterLink>[]
9+
tagRefs: InstanceType<typeof RouterLink>[] | null
1110
}
1211
1312
const props = defineProps<Props>()
@@ -19,10 +18,10 @@ const settingsStore = useSettingsStore()
1918
const { listenerRouteChange } = useRouteListener()
2019
2120
/** 滚动条组件元素的引用 */
22-
const scrollbarRef = ref<InstanceType<typeof ElScrollbar>>()
21+
const scrollbarRef = useTemplateRef("scrollbarRef")
2322
2423
/** 滚动条内容元素的引用 */
25-
const scrollbarContentRef = ref<HTMLDivElement>()
24+
const scrollbarContentRef = useTemplateRef("scrollbarContentRef")
2625
2726
/** 当前滚动条距离左边的距离 */
2827
let currentScrollLeft = 0
@@ -72,7 +71,7 @@ function scrollTo(direction: "left" | "right", distance: number = translateDista
7271
7372
/** 移动到目标位置 */
7473
function moveTo() {
75-
const tagRefs = props.tagRefs
74+
const tagRefs = props.tagRefs!
7675
for (let i = 0; i < tagRefs.length; i++) {
7776
// @ts-expect-error ignore
7877
if (route.path === tagRefs[i].$props.to.path) {

‎src/layouts/components/TagsView/index.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ const permissionStore = usePermissionStore()
1919
const { listenerRouteChange } = useRouteListener()
2020
2121
/** 标签页组件元素的引用数组 */
22-
const tagRefs = ref<InstanceType<typeof RouterLink>[]>([])
22+
const tagRefs = useTemplateRef<InstanceType<typeof RouterLink>[]>("tagRefs")
2323
2424
/** 右键菜单的状态 */
2525
const visible = ref(false)

‎src/pages/demo/composable-demo/use-watermark.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<script lang="ts" setup>
22
import { useWatermark } from "@@/composables/useWatermark"
33
4-
const localRef = ref<HTMLElement | null>(null)
4+
const localRef = useTemplateRef("localRef")
55
const { setWatermark, clearWatermark } = useWatermark(localRef)
66
const { setWatermark: setGlobalWatermark, clearWatermark: clearGlobalWatermark } = useWatermark()
77
</script>

‎src/pages/demo/element-plus/index.vue‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<script lang="ts" setup>
22
import type { CreateOrUpdateTableRequestData, TableData } from "@@/apis/tables/type"
3-
import type { FormInstance, FormRules } from "element-plus"
3+
import type { FormRules } from "element-plus"
44
import { createTableDataApi, deleteTableDataApi, getTableDataApi, updateTableDataApi } from "@@/apis/tables"
55
import { usePagination } from "@@/composables/usePagination"
66
import { CirclePlus, Delete, Download, Refresh, RefreshRight, Search } from "@element-plus/icons-vue"
@@ -21,7 +21,7 @@ const DEFAULT_FORM_DATA: CreateOrUpdateTableRequestData = {
2121
password: ""
2222
}
2323
const dialogVisible = ref<boolean>(false)
24-
const formRef = ref<FormInstance | null>(null)
24+
const formRef = useTemplateRef("formRef")
2525
const formData = ref<CreateOrUpdateTableRequestData>(cloneDeep(DEFAULT_FORM_DATA))
2626
const formRules: FormRules<CreateOrUpdateTableRequestData> = {
2727
username: [{ required: true, trigger: "blur", message: "请输入用户名" }],
@@ -74,7 +74,7 @@ function handleUpdate(row: TableData) {
7474
7575
// #region 查
7676
const tableData = ref<TableData[]>([])
77-
const searchFormRef = ref<FormInstance | null>(null)
77+
const searchFormRef = useTemplateRef("searchFormRef")
7878
const searchData = reactive({
7979
username: "",
8080
phone: ""

‎src/pages/demo/vxe-table/index.vue‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ interface RowMeta {
2121
/** vxe-table 自动添加上去的属性 */
2222
_VXE_ID?: string
2323
}
24-
const xGridDom = ref<VxeGridInstance>()
24+
const xGridDom = useTemplateRef<VxeGridInstance>("xGridDom")
2525
const xGridOpt: VxeGridProps = reactive({
2626
loading: true,
2727
autoResize: true,
@@ -178,7 +178,7 @@ const xGridOpt: VxeGridProps = reactive({
178178
// #endregion
179179
180180
// #region vxe-modal
181-
const xModalDom = ref<VxeModalInstance>()
181+
const xModalDom = useTemplateRef<VxeModalInstance>("xModalDom")
182182
const xModalOpt: VxeModalProps = reactive({
183183
title: "",
184184
showClose: true,
@@ -192,7 +192,7 @@ const xModalOpt: VxeModalProps = reactive({
192192
// #endregion
193193
194194
// #region vxe-form
195-
const xFormDom = ref<VxeFormInstance>()
195+
const xFormDom = useTemplateRef<VxeFormInstance>("xFormDom")
196196
const xFormOpt: VxeFormProps = reactive({
197197
span: 24,
198198
titleWidth: "100px",

‎src/pages/login/index.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<script lang="ts" setup>
2-
import type { FormInstance, FormRules } from "element-plus"
2+
import type { FormRules } from "element-plus"
33
import type { LoginRequestData } from "./apis/type"
44
import ThemeSwitch from "@@/components/ThemeSwitch/index.vue"
55
import { Key, Loading, Lock, Picture, User } from "@element-plus/icons-vue"
@@ -18,7 +18,7 @@ const settingsStore = useSettingsStore()
1818
const { isFocus, handleBlur, handleFocus } = useFocus()
1919
2020
/** 登录表单元素的引用 */
21-
const loginFormRef = ref<FormInstance | null>(null)
21+
const loginFormRef = useTemplateRef("loginFormRef")
2222
2323
/** 登录按钮 Loading */
2424
const loading = ref(false)

0 commit comments

Comments
 (0)