vue中将光标定位到Input上的问题

  1 <template>
  2     <div class="person_email">
  3         <div class="contain_email">
  4             <x-header :left-options="{backText: ''}">修改邮箱</x-header>
  5             <img class="qrcodeimg" src="../../../assets/new/email.png" alt="">
  6             <p>当前邮箱:&nbsp;&nbsp;{{email}}</p>
  7             <group class='input_'>
  8                 <x-input ref="email" placeholder="输入邮箱" v-model="new_email" @on-click-clear-icon="clear_Email">
  9                 </x-input>
 10             </group>
 11             <group title="" class='input_'>
 12                 <x-input placeholder="验证码" v-model="psw" @on-click-clear-icon="clear_psw">
 13                     <x-button slot="right" type="primary" mini @click.native="get_psw"  v-bind:disabled="isDisabled">{{post_psw}}</x-button>
 14                 </x-input>
 15             </group>
 16             <div class="button_">
 17                 <x-button type="primary" @click.native="submit">提交</x-button>
 18             </div>
 19         </div>
 20     </div>
 21 </template>
 22 <script>
 23     import { updatePhomail } from '@/controller/corp/update_phomail'
 24     import { changeEmail } from '@/controller/corp/change_email'
 25     import dateutil from '@/util/date'
 26     import { XHeader, Cell, Group, Panel, Confirm, CellBox, XInput, XButton } from 'vux'
 27     import KpBottomBtn from '@/plugin/bottombtn'
 28     export default {
 29         name: 'mine',
 30         props: ['mine'],
 31         data() {
 32             return {
 33                 email: JSON.parse(sessionStorage.getItem('agentStaffRes')).agentStaffEmail || "无邮箱信息",
 34                 new_email: "",
 35                 psw: "",
 36                 time:60,
 37                 isDisabled:false,
 38                 post_psw:'获取验证码'
 39                 
 40             }
 41         },
 42         components: {
 43             XHeader,
 44             Group,
 45             Cell,
 46             Panel,
 47             KpBottomBtn,
 48             Confirm,
 49             CellBox,
 50             XInput,
 51             XButton
 52         },
 53         computed: {
 54             profile() {
 55                 let corpRole = ''
 56                 let isInner = this.agentLoginStaff ? this.agentLoginStaff.agentType : ''
 57                 if(isInner) {
 58                     corpRole = isInner === 0 ? '(外部账号)' : '（内部账号）'
 59                 } else {
 60                     corpRole = ''
 61                 }
 62                 let profile = {
 63                     src: require('../../../assets/user_default.png'),
 64                     title: this.agentLoginStaff ? (this.agentLoginStaff.agentStaffName + ' | ' + this.agentLoginStaff.agentStaffPhone) : '',
 65                     desc: this.agentLoginStaff ? this.agentLoginStaff.agentName + corpRole : ''
 66                 }
 67                 if(this.agentLoginStaff) {
 68                     profile.src = this.agentLoginStaff.agentStaffAvatar
 69                 }
 70                 return [profile]
 71             }
 72         },
 73         mounted() {
 74             this.$refs.email.focus()
 75         },
 76         methods: {
 77             get_psw() { //验证邮箱接口
 78                 let _this = this;
 79                 _this.isDisabled = true;
 80                 let interval = window.setInterval(function() {
 81                     _this.post_psw =  _this.time + 's后重试';
 82                     --_this.time;
 83                     if(_this.time < 0) {
 84                         _this.post_psw = "获取验证码";
 85                         _this.time = 10;
 86                         _this.isDisabled = false;
 87                         window.clearInterval(interval);
 88                     }
 89                 }, 1000);
 90                 changeEmail({
 91                     email: this.new_email
 92                 })
 93             },
 94             submit() { //提交            
 95                 updatePhomail({
 96                     accountId: JSON.parse(sessionStorage.getItem('agentStaffRes')).accountId,
 97                     type: 2,
 98                     code: this.psw,
 99                     number: this.new_email,
100                     callback: res => {
101                         let temp = JSON.parse(sessionStorage.agentStaffRes)
102                         temp.agentStaffEmail = this.new_email
103                         sessionStorage.setItem('agentStaffRes', JSON.stringify(temp))
104                         this.$router.push('/person_center')
105                     }
106                 })
107             },
108             clear_Email(){
109                 this.new_email = ''
110             },
111             clear_psw(){
112                 this.psw = ''
113             }
114         }
115     }
116 </script>
117 <style lang="less">
118     .contain_email {
119         img {
120             display: block;
121             margin: auto;
122             margin-top: 30px;
123             margin-bottom: 30px;
124         }
125         p {
126             text-align: center;
127             font-weight: bold;
128         }
129         .input_ {
130             width: 329px;
131             margin: auto;
132             display: block;
133         }
134         .button_ {
135             width: 329px;
136             margin: auto;
137             height: 44px;
138             margin-top: 44px;
139         }
140     }
141 </style>

这样光标在此页面的时候就可以定位到input标签上。

环境：要引入vux，脚手架的环境才能复制看到效果，所以看方法就好了。

用refs的时候如果是普通DOM元素就是指向DOM元素

<input type="text"  id="input" ref="input"/ >//此时refs和DOM的效果是一致

console.log(1111111111,this.$refs.input1,documentElement.get)Byid("input1")

如果是再组件上用就会指向组件实例，被解析成为了一个对象的形式。

当v-for和ref一起连用的时候也是返回一个对象。

<ul v-for="item in this.list">
        <li ref="item">{{item.name}}</li>
    </ul>
  </div>
</template>

<script>
    
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'

export default {
  name: 'home',
  components: {
    HelloWorld
  },
  data:function(){// 在实例中data是对象, 在组件中data就得是函数返回对象
      return{
          list:[{name:111},{name:2222}] 
      }
               
  },
  methods:{
      ko() {
          console.log(document.getElementById("df"))
          console.log(this.$refs.df)
          console.log(this.$refs.item)//(2)[li,li]
      }
  }
}
</script>

 

转载于:https://www.cnblogs.com/lujunan/p/10239665.html