你可以通过给el-input组件添加一个ref属性来引用它,在Vue组件的JavaScript部分使用this.$refs来访问这个DOM元素。因为el-input是一个组件,它内部封装了一个input元素,但在大多数情况下,直接使用this.$refs.yourRefName.focus()就足够了,因为Element UI的el-input组件内部会处理聚焦的逻辑。
1. 需要聚焦的el-input输入框设置ref值: ref="unameInput" (unameInput为自己任意命名) 2. 在mounted生命周期使用this.$nextTick设置自动聚焦: mounted(){ // 页面渲染完成时自动聚焦到用户名输入框,ref="unameInput" this.$nextTick(() => { this.$refs.unameInput.focus(); }) } 回车自动聚焦下一个...
el-input⾃动获取焦点功能//在el-input⾥⾯添加v-focus <el-input v-focus ></el-input> //在export default⾥⾯与data同级下加上如下代码 directives: { //注册⼀个局部的⾃定义指令 v-focus focus: { // 指令的定义 inserted: function (el) { // 聚焦元素 el.querySelector('input...
都只有在第一次点击按钮的时候可以让Input获得焦点,在不刷新页面的情况下,第二次以后的按钮点击都不会让Input获得焦点。猜测了一下是存才一个全局变量,当我们第一次使Input获得焦点以后改变了这个预设变量的值,在Input失去焦点的时候并没有将这个值重置,所以导致了后面的问题。 事实上,只要你在打开这个页面后还没...
[element-ui] 自动获取el-input的焦点 <el-input v-model="filterPlanName" ref="autoFocus" ></el-input> 1. this.$nextTick((_) => { this.$refs.autoFocus.focus(); }) 1. 2. 3. 参考: [element-ui]自动获取el-input的焦点
虽然element有提供input的autofocus属性,但是当我们第二次进入页面就会发现autofocus已经不再生效,需要通过onMounted去触发input的focus解决这个问题。 1.先给el-input绑定一个ref: 2.定义一个函数去触发这个input的focus:const focusInput = () => { nextTick(() => { inputRef.value.focus() }) } ...
如果使用el-input需要做如下改进 <el-input v-focus></el-input> 1. import Vue from 'vue' Vue.directive('focus', { inserted(el, binding, vnode) { el.querySelector('input').focus() }, }) 1. 2. 3. 4. 5. 6. 7. 参考 在vue项目中引用element-ui时 让el-input 获取焦点的方法...
querySearchAsync(string, cb){//input 获取焦点触发的事件(内容发生变化触发) }, handleSelect(){//点击下拉选项 (选中下拉选项) }, handleBlur(){(失去焦点时触发) if(!this.handshow){ }else{ this.handshow = false; setTimeout(()=>{ this.$refs.test.focus() ...
el-input自动获取焦点 <el-inputref="tableHeadFilterInp"/>this.$nextTick(()=>{this.$refs.tableHeadFilterInp.focus()})
//1.定义focus事,绑定属性<el-input v-model="headerInput"@focus="onInputFocus" @blur="onInputBlur":style="thisStyle"> </el-input>thisStyle:'',//2.获得焦点事件onInputFocus(){ let self =this; self.thisStyle="outline: 0;box-shadow: 0px 0px 10px 0px #ffffff;transition: border ease...