elementUI el-input focus
- Q1. el-input 获取焦点
- Q2. dialog中的 el-input获取焦点
- Q3. dialog中有table table中有 el-input 要获取焦点
一个宗旨: this.$refs.XXX.$el.querySelector('input').focus();
answer 1
<el-input ref="mark"></el-input>
使用时直接 (对于多个el-input也是一样的)
this.$refs.mark.$el.querySelector('input').focus();
answer 2
需要在dialog打开时候让input获取焦点
<el-dialog
title="销售员"
:visible.sync="customerVisible"
@open="customerDialogOpen" // 这个是重点
>
<el-input ref="customerInput" ></el-input>
</el-dialog>
//销售员 dialog 打开时 获取焦点
customerDialogOpen() {
this.customerVisible = true
this.$nextTick(function () {
this.$refs.customerInput.$el.querySelector('input').focus();
});
},
answer 3
<el-dialog title="结账" :visible.sync="sumVisible"
:close-on-click-modal="false"
@open="sumDialogOpen">
<el-table
:data="tableData"
size="mini"
style="width: 100%">
<el-table-column
prop="code"
label="编号"
width="50">
</el-table-column>
<el-table-column
prop="way"
label="结算方式"
width="80">
</el-table-column>
<el-table-column
label="金额">
<template slot-scope="scope">
<el-input size="mini" :ref="scope.row.ref" //看这里看这里
@keyup.up.native="up2pre(scope.row.ref)"
@keyup.down.native="down2next(scope.row.ref)">
</el-input>
</template>
</el-table-column>
...
</el-table>
</el-dialog>
tableData : [
{
code: '01',
way: '现金',
disabled: true,
ref: 'input1',
}, {
code: '02',
way: '银行卡',
disabled: false,
ref: 'input2',
}
]
下面就清楚了吧,跟上面2 的套路一样
//结算 dialog 打开时 获取焦点
sumDialogOpen() {
this.sumVisible = true
this.$nextTick(function () {
this.$refs.input2.$el.querySelector('input').focus();
});
},
至于多个input之间焦点如何切换,
down2next(e) {
let input
switch (e) {
case "input1":
input = `input2`
break
case "input2":
input = `input3`
break
}
this.$refs[input].$el.querySelector('input').focus();
},
各位兄台有没有便捷的方法?总感觉这样写的好蠢 啊,:smile:
作者:小学生的博客
链接:https://www.jianshu.com/p/63bfbbbd1e82
來源:简书
简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。
elementUI el-input focus的更多相关文章
- input:focus
input:focus,select:focus,textarea:focus{outline:-webkit-focus-ring-color auto 5px;outline-offset:-2p ...
- ios下input focus弹出软键盘造成fixed元素位置移位
正常状态下 input focus软键盘弹出时 问题描述: 头部结构fixed,滚动到下部内容区域,input.textarea等focus弹出软键盘时,头部位置偏移被居中(该问题ios7 beta3 ...
- 移动端解决input focus后键盘弹出,高度被挤压的问题
//解决弹出键盘页面高度变化bug var viewHeight = window.innerHeight; //获取可视区域高度 $("input").focus(functio ...
- 解决IOS safari在input focus弹出输入法时不支持position fixed的问题
该文章为转载 我们在做移动web应用的时候,常常习惯于使用position:fixed把一个input框作为提问或者搜索框固定在页面底部.但在IOS的safari和webview中,对position ...
- elementUi中input输入字符光标在输入一个字符后,光标失去焦点
elementUi中input输入字符光标在输入一个字符后,光标就退出,无法输入需要再次聚焦然后输入一个字符又再次退出 首先,用elementUi正常用v-model绑定输入的值是不会造成光标退出的, ...
- vue2.0 element-ui中input的@keyup.native.enter='onQuery'回车查询刷新整个表单的解决办法
项目中用的element-ui是v1.4.3版本 实现的功能是在input中输入查询的名称,按下键盘回车键,可以查询表格中数据 问题是,我输入名称,按下回车,会整个表单刷新,搜索条件也被清空:代码如下 ...
- 解决IE与FF 中 input focus 光标移动在最后的方案
只要把input元素的id传进来即可 function moveCursor(id) { var id = document.getElementById(id); id.focus(); var ...
- elementUI 设置input的只读或禁用
只读:readonly 在data里定义:readonly: true, 然后在input框里加上readonly就可以了. 禁用:disabled 在data里定义:edit: true, 然后在i ...
- element-ui 设置input的只读或禁用
只读:readonly 在data里定义:readonly: true, 然后在input框里加上readonly就可以了. 禁用:disabled 在data里定义:edit: true, 然后在i ...
- input.focus()在IOS上失效的解决方法
之前在iphone上做开发时遇到一个问题,在一般的正常浏览器上输入以下代码: 1 2 var apple = document.getElementById('abc'); apple.focus() ...
随机推荐
- 【转载】Window服务器开机后一直处于蓝色屏幕(非蓝屏 crash)状态
阿里云Windows系统服务器运维的过程中,有时候会遇到实例开机后一直处于蓝色背景屏幕(非蓝屏 crash )状态.此时你发现鼠标可以任意正常移动,但是屏幕上却没有任何的图标可以供操作,这种情况可能是 ...
- c# 模拟网易足彩算法
using System; using System.Collections; using System.Collections.Generic; using System.Linq; using S ...
- JSJ——java基本概念一
Java曾以什么优点吸引你走上程序员这条不归路? 友好的语法.面向对象.内存管理和最棒的跨平台可移植性.write-once/run-anywhere 当然,只有我们真正投身入java才发现有bug要 ...
- Fzreo matlab
fzero Root of nonlinear function collapse all in page Syntax x = fzero(fun,x0) example x = fzero(fun ...
- php 设计模式之单例模式
单例模式的关键点 1.//私有构造函数,防止直接new 创建实例 2.//设置静态成员变量 作保存实例 3.//公有访问实例的静态方法 4.//防止克隆对象的方法 上代码: //单例模式 class ...
- 课程作业——熟悉常用的Linux操作
cd命令:切换目录 (1) 切换到目录 /usr/local cd /usr/local (2) 去到目前的上层目录 cd .. (3) 回到自己的主文件夹 cd ~ ls命令:查看文件与目录 (4) ...
- ListView子项点击无反应的解决办法
在使用ListView控件的过程中,当子项包括Button或者CheckBoX等控件时,直接点击子项无反应,分析发现原来是Button,CheckBoX等控件会优先获取焦点,那么子项点击的焦点就被上述 ...
- blfs(systemd版本)学习笔记-构建ibus-libpinyin使用中文输入法
我的邮箱地址:zytrenren@163.com欢迎大家交流学习纠错! 一.包的下载地址 1.libpinyin 下载地址:http://deb.debian.org/debian/pool/main ...
- docker研究-1
Docker是一个开源的引擎,可以轻松的为任何应用创建一个轻量级的.可移植的.自给自足的容器.开发者在笔记本上编译测试通过的容器可以批量地在生产环境中部署,包括VMs(虚拟机).bare metal. ...
- Struts2框架原理
Struts2提供了基于MVC应用程序的开发模式,从而使应用程序结构更加清晰,同时也简化了Web应用程序的开发. Struts2的组成结构 主要包括控制器组件(包括核心控制器StrutsPrepare ...