优化_自动聚焦问题

目标:我们想实现,网页一加载input框自动聚焦

在utils文件下创建  directive.js封装中间件

固定格式:

import Vue from 'vue'
// 封装中间价函数插件
const directiveObj = {
  install (vue) {
     //实现体
    
  }
}

export default directiveObj
import Vue from 'vue'
// 封装中间价函数插件
const directiveObj = {
  // 只有第一次出现是插入到真实DOM, 触发inserted方法
  // 以后初选是css层面的显示出现(eg:css的display:none), 不会触发inserted方法
// 插件对象(必须有install方法, 才可以注入到Vue.use中)
  install (vue) {
    // 自定义全局指令---对input可以自动聚焦
    Vue.directive('fofo', {
      // el参数为被绑定fofo指令的dom节点
      inserted (el) {
        fn(el)
      },
      update (el) {
        fn(el)
      }
    })
  }
  // 给自定义指令添加update方法, 指定所在DOM更新时执行
}
function fn (el) {
  if (el.nodeName === 'INPUT' || el.nodeName === 'TEXTAREA') {
    // 如果直接是input标签/textarea标签
    el.focus()
  } else {
    // 指令在van-search组件身上, 获取的是组件根标签div, 而input在标签内
    const inp = el.querySelector('input')
    const textArea = el.querySelector('textarea')
    // 如果找到了
    if (inp || textArea) {
      inp && inp.focus()
      textArea && textArea.focus()
    } else {
      // 本身也不是, 子标签里也没有
      console.error('请把v-fofo用在输入框标签上')
    }
  }
}
export default directiveObj

使用:

<van-field
      v-fofo
      v-model.trim="message"
      rows="2"
      autosize
      type="textarea"
      maxlength="10"
      placeholder="请输入昵称"
      show-word-limit
    />

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值