首页 > 其他分享 >使用自定义指令fofo, 让输入框自动聚焦

使用自定义指令fofo, 让输入框自动聚焦

时间:2023-02-07 16:11:54浏览次数:32  
标签:el 自定义 textArea 标签 inp 输入框 fofo

使用自定义指令fofo, 让输入框自动聚焦
判断指令所在的标签

import Vue from 'vue'
// 插件对象(必须有install方法, 才可以注入到Vue.use中)
export default {
  install () {
    Vue.directive('fofo', {
      inserted (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用在输入框标签上')
          }
        }
      }
    })
  }
}

标签:el,自定义,textArea,标签,inp,输入框,fofo
From: https://www.cnblogs.com/NaziriteGTC/p/17098828.html

相关文章

  • element 在点击输入框(input)清空(clearable)按钮时需要触发事件
    在input中添加 @clear="handleEmpty"(方法名)例如:<el-inputv-model="tQuery"clearableplaceholder="请输入您的问题..."prefix-icon="el-icon-search"@change="hand......
  • 灵活又简便,效率提升快,来了解下自定义表单工具!
    选择低代码开发平台,需要看准服务商、产品、服务保障等条件。只有认准专业的开发平台服务商,才能拥有一整套完善的低代码平台解决方案,才能帮助企业最大限度提升办公协作效率,......
  • elasticsearch添加自定义用户
    添加用户和角色curl--insecure-uelastic:Transfar@2022-XPOST'https://192.168.30.149:9200/_security/user/esuer?pretty'-H'Content-Type:application/json'......
  • avalonia自定义弹窗
    对于使用avalonia的时候某些功能需要到一些提示,比如异常或者成功都需要对用户进行提示,所以需要单独实现弹窗功能,并且可以自定义内部组件,这一期将手动实现一个简单的小弹窗,......
  • logic-flow自定义节点
    目前基于需要选择任一一种基本节点类型(如rect、circle、polygon等)来继承新建节点文件(例:CustomCircle.js)//CustomCircle.jsimport{CircleNode,CircleNodeModel}fr......
  • avalonia实现自定义小弹窗
    对于使用avalonia的时候某些功能需要到一些提示,比如异常或者成功都需要对用户进行提示,所以需要单独实现弹窗功能,并且可以自定义内部组件,这一期将手动实现一个简单的小弹窗,......
  • SpringBoot怎么自定义一个Starter
    SpringBoot怎么自定义一个Starterstarter是什么spring-boot-starter是spring-boot的一个非常重要组成部分。spring-boot-starter可以理解为一个可拔插式的组件。它可以让......
  • Odoo 自定义form表单按钮点击事件处理程序
    实践环境Odoo14.0-20221212(CommunityEdition)代码实现方案1通过研究发现,点击odooform表单按钮时,会调用odoo14\odoo\addons\web\static\src\js\views\form\form_co......
  • webrtc 自定义对接摄像机视频流
    ​​https://blog.csdn.net/u013113491/article/details/80285181​​编码器伪装法​​https://blog.csdn.net/foruok/article/details/70237019​​众所周知浏览器不支持......
  • SpringBoot中自定义消息转化器
    场景1.SpringBoot自动配置了消息转化器。2.自定义消息转化器,只需要在类中添加消息转化器的@Bean,就会被SpringBoot自动加入到容器中。实现新建Controllerpackagecom.exampl......