【vue3+ts+vite】输入框默认获取焦点

已于 2023-08-08 11:09:07 修改
阅读量858 收藏 2
点赞数
文章标签： vue.js 前端 typescript
于 2023-06-21 14:35:14 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46580991/article/details/131327138
版权

1.HTML中输入框标签添加ref

 2.TypeScript中创建ref的命名属性，然后xxx.value&&xxx.value.focus()，即可获取焦点

 代码检查（type-check）容易出现问题：单独只写xxx.value.focus()，调试无异常，但是build打包会报以下错误

me_ll_you
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化
05-12
vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+...
vue3+ts+vite+router+vuex+api请求封装
12-29
Vue3+TS+Vite+Router+Vuex+API请求封装是现代前端开发中的一个典型组合，用于构建高效、可维护的后台管理系统。这个脚手架提供了完整的开发环境配置和基础架构，使得开发者能够快速搭建后台应用。下面将详细介绍这个...
vue3输入框生成的时候自动获取焦点
The_more_more的博客
05-06 4403
vue3输入框生成的时候自动获取焦点 前言 当我们在做vue3的项目的时候，在对一些信息的修改的时候，需要双击或者点击按钮来进行操作，让数据变成输入框来进行修改数据，当输入框失去焦点的时候就进行保存，然而不方便的是，输入框出现的时候不能获取焦点导致用户的体验不好。 创建实例演示（创建文件，可忽略） 首先我们需要一个vue3的项目，如何创建一个vue3的项目，新建一个空的文件夹，cmd打开，输入 1. vue create 项目的名称 举例：vue create demo 我们选择自定义，即 2. Manua
vue3 获取焦点，vu3 input 获取焦点 Vue 3 focus input
09-08
我们都知道在vue2中获取焦点为,然后调用focus方法 this.$nextTick(()=>{ this.$refs.XXX.focus() }) 现在我们的vue3怎么获取焦点，请看附件，已经正常使用。 请放心下载
vue3打开页面后文本框自动获得焦点
最新发布
徐同保的专栏
05-09 430
vue3打开页面后文本框自动获得焦点
vue3新特性中ref自动获取焦点.
pmywy的博客
02-28 1819
vue3新特性中ref自动获取焦点
vue3+ts+uniapp实现小程序端input获取焦点计算上推页面距离
奔跑吧代码
09-04 1472
vue3+ts+uniapp实现小程序端input获取焦点计算上推页面距离
vue 3.0 给input 获取焦点
withme
10-21 6121
// 给table 循环的input 点击的时候获取焦点 // 1、给input 设置ref 属性 <el-input v-else ref="refInput" @blur="(scope.row.code = !scope.row.code), changeBlur()" v-model="scope.row[item.prop]" :placeholder="'请输入内容' + item.label" /> // 1、给input的ref属性在setup中使用? 叫什么
Vue3.0ElementPlus＜input输入框自动获取焦点＞
热门推荐
weixin_45684041的博客
06-14 1万+
记录一下自己最近开发vue3.0的小小问题~~ 最近在做项目时，dialog弹框事件需定位input焦点，方便用户可直接输入。原理其实很简单，Element已经提供了focus方法，但是文档中并没有写明怎么调用。官方文档介绍： 正确使用方式：在el-input标签上加入ref属性，然后在需要的地方直接调用方法即可；代码如下（示例）： 2.引入ref和nextTick 代码如下（示例）： 3.在dialog打开事件中触发 代码如下（示例）：.........
uniapp + vue3 +vite + ts + pinia 框架模板
01-31
标题 "uniapp + vue3 + vite + ts + pinia 框架模板" 提供了我们讨论的关键技术栈。这是一个基于uni-app、Vue.js 3、vite、TypeScript和Pinia的项目模板，用于构建移动端应用。让我们逐一探讨这些技术的特性与它们在...
Vue3+Vite4+TS 后台模板
06-08
Vue3+Vite4+TS 后台模板是一款基于最新技术栈构建的高效、现代化的前端开发框架，专为后台管理界面设计。该模板利用了Vue.js的最新版本Vue3，搭配快速构建工具Vite4，以及TypeScript的静态类型检查，提供了强大的...
Vue3 + Ts + ElementPlus + Vite2 从零搭建后台管理系统.zip
05-13
Vue3 + Ts + ElementPlus + Vite2 从零搭建后台管理系统 Vue3 + Ts + ElementPlus + Vite2 从零搭建后台管理系统 Vue3 + Ts + ElementPlus + Vite2 从零搭建后台管理系统 Vue3 + ...
vue3+vite+ts 仿淘宝放大镜效果
09-17
在本项目中，我们主要探讨的是如何利用Vue3、Vite和TypeScript来实现一个类似于淘宝网站中的商品图片放大镜效果。这个效果通常用于增强用户的购物体验，让他们能更清晰地查看商品细节。以下是实现这一功能所涉及的...
Vite + Vue3 + ts 注册登录页面书写 搭配Nodejs + Express + postgresql接口
04-10
Vite + Vue3 + ts 注册登录页面书写 搭配Nodejs...一个vue包 vite+vue3+ts+eleplus 配置了router vuex axios postcss-px-to-viewport界面自适应 env prod环境等 启动:均是 npm i npm start 仅供学习哈 也在慢慢完善中
vue3+vite2+ts+vant3 项目demo
04-16
此项目 按照大佬文章 一步步学习搭建 https://juejin.cn/post/7036745610954801166?share_token=5dd94aae-bed2-4733-93ac-306118376443；感谢大佬
vue3+ts+vite4脚手架
07-10
Vue3+TS+Vite4脚手架是一个现代化的前端开发环境，专为构建高效、高性能的Web应用而设计。这个脚手架包含了Vue.js的最新版本（Vue3）、TypeScript的支持以及Vite4的快速开发工具。让我们深入探讨这些核心组件以及...
vue3 antdv input输入 自动获取焦点的实现
qq_44792224的博客
05-25 2403
【代码】vue3 antdv input输入 自动获取焦点的实现。
vue3焦点获取、动态定位焦点,vue3光标定位，vue3 input focus
weijia3624的专栏
09-08 5228
vue3焦点获取、动态定位焦点,v <div> //获取焦点主要就是定义一个ref <input v-model="inputvalue" ref="inputVal"/> <button @click="addItem">提交</button> </div> methods:{ //事...
vue自定义指令——输入框默认获得焦点
chenrunlan的博客
01-07 1577
为了实现输入框默认获取焦点的过程，我们需要直接操作dom对象，但是这样一来代码会变的不容易读懂，而且，若是很多组件都需要实现该功能，会出现很多的重复代码，所以小菜鸡决定使用vue的自定义指令来实现该功能。 1.首先我们在main.js中定义指令 Vue.directive('focus', { inserted(el) { // 聚焦元素 el.querySelector('input').focus() }, }) 2.接着，我们了input组件总调用该指.
vue3+ts+vite 监听input输入框
06-07
你可以使用 Vue3 中的 `@input` 事件来监听 input 输入框的输入。具体实现可以参考以下代码： 1. 在模板中使用 `v-model` 绑定 input 的值： ``` ``` 2. 在组件中定义 `inputValue` 变量，并定义 `handle...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值