当前位置: 首页 > article >正文

Vue3 动态设置 ref

介绍

在一些场景,ref设置是未知的需要根据动态数据来决定,如表格中的input框需要我们主动聚焦,就需要给每一个input设置一个ref,进而进行聚焦操作。

Demo

点击下面截图中的编辑按钮,自动聚焦到相应的输入框中。
在这里插入图片描述

<template>
  <!-- 动态ref -->
  <div class="test_ref">
    <div v-for="item in 9" :key="item">
      <span>{{ item }}</span>

      <!-- 动态设置ref -->
      <el-input
        v-model="inputVal"
        placeholder="Please input"
        :ref="(el:refItem) => handleSetInputMap(el, item)"
      />

      <el-button type="primary" :icon="Edit" @click="handleEdit(item)" />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { Edit } from "@element-plus/icons-vue";
import { ComponentPublicInstance } from "vue";
type refItem = Element | ComponentPublicInstance | null;
const inputVal = ref();
const inputRefMap = ref({});

/** 编辑 */
const handleEdit = (item: number) => {
  // 若输入框此时还没有渲染出来,如先隐藏再触发显示 需要使用nextTick进行聚焦
  inputRefMap.value[`Input_Ref_${item}`].input.focus();
};

/** 动态设置Input Ref */
const handleSetInputMap = (el: refItem, item: number) => {
  if (el) {
    inputRefMap.value[`Input_Ref_${item}`] = el;
  }
};
</script>

<style lang="scss" scoped>
.test_ref {
  padding: 50px;
  > div {
    width: 300px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-bottom: 10px;
  }
}
</style>

效果

在这里插入图片描述


http://www.kler.cn/a/133591.html

相关文章:

  • SpringMVC学习笔记(二)
  • Android 10 默认授权安装app运行时权限(去掉运行时所有权限授权弹窗)
  • Vector Optimization – Stride
  • 软件工程概论项目(二),node.js的配置,npm的使用与vue的安装
  • 十三、注解配置SpringMVC
  • 【Vue】Vue3.0(十九)Vue 3.0 中一种组件间通信方式-自定义事件
  • 2018年五一杯数学建模C题江苏省本科教育质量综合评价解题全过程文档及程序
  • 使用html2canvas转换table为图片时合并单元格rowspan失效,无边框显示问题解决(React实现)
  • python从基础到UnitTest框架-python基础语法
  • iOS_折叠展开 FoldTextView
  • 手机LiDAR-based激光雷达标定板提高无人汽车智能化程度
  • Nas搭建webdav服务器并同步Zotero科研文献
  • 持续集成部署-k8s-配置与存储-配置管理:SubPath
  • 新版JetBrains ToolBox【Windows】修改应用安装位置
  • Node.js之path路径模块
  • ubuntu22.04换源
  • NSSCTF第13页(2)
  • 音视频项目—基于FFmpeg和SDL的音视频播放器解析(十二)
  • golang学习笔记——select 判断语句
  • 动态加载js文件的方法封装
  • 系统安全-常见的几种sql注入攻击的方式
  • 【IDEA 使用easyAPI、easyYapi、Apifox helper等插件时,导出接口文档缺少代码字段注释的相关内容、校验规则的解决方法】
  • 1、cvpr2024
  • 2023.11.19 hadoop之MapReduce
  • [ 一刷完结撒花!! ] Day50 力扣单调栈 : 503.下一个更大元素II |42. 接雨水 | 84.柱状图中最大的矩形
  • Fork项目新分支如何同步