码迷,mamicode.com
首页 > 其他好文 > 详细

点击按钮 input 同步获取焦点

时间:2020-06-16 14:51:17      阅读:63      评论:0      收藏:0      [点我收藏+]

标签:mini   大数据   技术   data   put   code   target   ext   for   

点击 icon input 同步获取焦点,且点击input不可以获取焦点。

技术图片

 

 

 技术图片

 

 

 技术图片

 

 

 代码:

html

<el-form  :model="dataLabel.basePopulationLabels" label-width="80px" size="mini">
    <el-form-item label="姓名:"  style="width:100%">
        <el-input v-model="dataLabel.basePopulationLabels.basename" class="borderNone" style="width:40%" readonly></el-input>
        <el-input ref="input" v-model="dataLabel.basePopulationLabels.name" class="borderNone" @blur="blurInput"  :readonly=‘readonly‘ style="width:40%"></el-input>
        <i class="el-icon-edit" @click="getInputFocus" size="14px"></i>                    
    </el-form-item>
</el-form>

js

export  default {
    data(){
        return {
            dataLabel:{
               basePopulationLabels:{
                  name:"陈曦",
                  basename:"陈君"
              },// 基本人口标签
             societyLabels:{},// 社会属性标签
             userHobbyLabels:{},// 用户偏好标签
             businesslabels:{},// 业务属性标签
          },//大数据标签
           readonly:true,
        }
    }
    methods:{
            // 大数据标签
       getInputFocus(e){
            console.log(e.currentTarget)
            this.readonly = false
            this.$nextTick(() =>{
                 this.$refs.input.focus()
           })
      },
      blurInput(){
         this.readonly = true
     }
  }
}

在$nextTick内使用方法是因为:dom更新的先后顺序的问题,不是所有的数据改变一定会触发dom的更新,而在修改数据之后立即使用这个方法,可以获取更新后的 dom。

效果:

技术图片

 

点击按钮 input 同步获取焦点

标签:mini   大数据   技术   data   put   code   target   ext   for   

原文地址:https://www.cnblogs.com/lpp-11-15/p/13140796.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!