【Vue基础】自动获取焦点功能

方法一：用特殊字符ref操作DOM

解决的问题: 在vue中操作DOM元素
步骤:
1. 给DOM元素设置ref属性的值
2. 在Vue中的mounted选项下通过this.$refs.属性获取到要操作的DOM
通过在控制台输出 this.$refs.ref属性值可以查看到要操作的dom元素的标签
通过如下代码可实现页面自动聚焦功能：

        <div id='app'><input type="text" ref='txt'></div><script>new Vue({el: "#app",data:{},mounted() {// console.log(this.$refs.txt)this.$refs.txt.focus();}})

方法二：自定义指令

使用场景:需要对普通 DOM 元素进行操作，这时候就会用到自定义指令
分类:全局注册和局部注册

1. 局部注册

在vm对象的选项中设置自定义指令 directives:{}
directives:{
指令的核心名称 :{
inserted: function(使用指令时的DOM对象) {
具体的DOM操作 } }}
在视图中通过标签去使用指令

//视图部分
<input v-focus type="text">
//实例部分new Vue({el: "#app",directives: {focus: {inserted: function(el) {el.focus();}}

2.全局注册

在创建 Vue 实例之前定义全局自定义指令Vue.directive()
Vue.directive(‘指令的名称’,{ inserted: (使用指令的DOM对象) => { 具体的DOM操作 } } );
在视图中通过"v-自定义指令名"去使用指令

 Vue.directive('focus',{insert:(el)=>{el.focus();}});

注意：

Vue.directive(自定义指令名) 不需要加v- 使用自定义指令时需要加v-
inserted: 当被绑定的元素插入到 DOM 中时,会被调用

补充：
1. 可将之前的静态页面哪里中的添加商品输入框实现自动聚焦效果~

【Vue基础】自动获取焦点功能相关推荐

vue input自动获取焦点的方法
在移动端输入框想自动获取焦点(自动弹出输入法) 我是在 uitls 文件下面 index.js 注册全局的指令 import Vue from 'vue' // 注册一个全局自定义指令 v-focus ...
vue实现自动登录功能
业务需求:用户登录时,如勾选自动登录则将登录成功的用户名和密码进行保存,下次登录则自动展示到相应的输入框中便于登录: 效果如下: .vue文件中主要代码如下: mounted() {this.getC ...
vue 移动端跳页搜索自动获取焦点
需求:点击搜索框跳转新页面然后自动获取焦点弹起键盘. 遇到的问题: input的autofocus属性在android上可以,在ios上不兼容,ios为了安全起见,禁掉了. 解决方案: 使用子路由做新 ...
适合前端初学者，vue.js完成ToDoList的增删改，支持回车提交增加，及修改时自动获取焦点
重新学习vue,将实例中的ToDoList做了些调整.增加了些功能功能: 1.添加要做事项,支持回车完成添加,也可以点击按钮添加,添加后input清空 2.待做事项,是一个有序列表 3.列表可以删除 ...
Vue.js：el-input自动获取焦点通过自定义指令实现v-focus
文档 https://v2.cn.vuejs.org/v2/guide/custom-directive.html 使用 el-input组件提供的参数autofocus 自动获取焦点,效果不是很好 ...
Vue 中使用 el-input 自动获取焦点和二次获取焦点问题
最近,碰到一个问题,就是输入框旁边有一个编辑按钮,点击时,才可以对输入框进行编辑: 要实现的效果: 为了方便输入,需要自动获取焦点,所以加入了autofocus,但是发现,只有第一个并且第一次点击才起 ...
vscode中如何修改vetur配置_vscode 配置vue+vetur+eslint+prettier自动格式化功能
该配置用于vue开发,最终效果是保存时自动根据eslint对js.html和css代码进行格式化. vscode Vetur插件 Vetur插件用于识别vue文件,原本vetur自带格式化功能,但是和 ...
antd vue 多个下拉联动_Antd下拉选择,自动匹配功能的实现
我就废话不多说了,大家还是直接看代码吧~ placeholder="客户名称" showSearch optionFilterProp="children"// ...
Vue 基础快速入门(二)
Vue 组件化编程模块, 组件, 模块化与组件化模块理解:向外提供特定功能的 js 程序, 一般就是一个 js 文件为什么:js 文件很多很复杂作用:复用 js,简化 js 的编写, 提高 ...

【Vue基础】自动获取焦点功能

方法一：用特殊字符ref操作DOM

方法二：自定义指令

1. 局部注册

2.全局注册

【Vue基础】自动获取焦点功能相关推荐

最新文章

热门文章