vue 获取焦点_Vue自定义全局指令和局部指令

最新推荐文章于 2024-04-08 09:53:58 发布
最新推荐文章于 2024-04-08 09:53:58 发布
阅读量395 收藏
点赞数
文章标签： vue 获取焦点
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42510792/article/details/113323522
版权
本文介绍了如何在Vue中通过自定义全局和局部指令实现输入框自动获取焦点的功能。首先讲解了全局注册指令的实现，通过`Vue.directive`进行注册并在`inserted`钩子中调用`el.focus()`。然后，阐述了局部注册指令的用法，强调局部指令仅限于当前实例使用，并展示了相应的HTML和JS代码示例。
摘要由CSDN通过智能技术生成

大家好，我是羊歌，欢迎收看《羊歌编程笔记》。

在上个vue的视频课程里，我和大家分享了《自定义指令》的定义及作用，今天我要和大家分享的内容呢，是接着上集视频的内容，主要和大家讲解一下，自定义指令实操部分。让大家对自定义的指令中全局注册指令和局部注册指令有一个更深入的了解。

c63fb729b86c117338c5caca1a44f5e2.png

(图一)自定义指令实操

本次内容要展示的内容：是用Vue自定义全局指令和局部指令这两种方案，来实现输入框自动获取焦点。效果图如下：

92a702b460853ab05e671a55b85b9a9c.png

(图二)输入框自动获取焦点

下面我们用自定义全局指令来实现输入框自动获取焦点这样的功能。

在这里呢，我们新建了一个VUE自定义指令的项目项目下面的文件分别是自定义全局指令文件qjzl.html文件，一个是qjzl.js文件还有一个是vue.js文件。

下面2张图是自定义全局指令代码文件，vue.js文件大家自行下载即可。

4a3138e71e0023392e3687fbe42263ee.png

(图三)自定义全局指令HTML界面

9f7c30b723cf896883b31da679bed968.png

(图四)自定义全局指令JS界面

我们先来看qjzl的js文件。大家看这里的foces是我自定义的一个指令ID，我用Vue.directive来进行全局注册，这里跟全局注册组件差不多，在这里的大括号里的对象，inserted: function (el)呢，表示被绑定的元素el插入到 DOM 中时，它执行了钩子函数inserted。下面的el.focus()，表示我们要聚焦的元素。

我们接着往下我们实例化了一个VUE，这里就不用说了，我们来看看qjzl的html文件。

在这里面呢，我们建了一个

，这里呢我们有一个 v-focus >大家注意这里的v-focus就是我们自定义指令。

在火狐浏览器中显示的效果就是图二所展示的效果，大家可以根据代码实际操作一下。

我们来看看局部注册指令。

我们打开jbzl.html文件。我们div里面的内容呢，基本上没有什么变化，改的是这个script标签里的内容，我们来看一下，从整体的结构上来讲的话，这个和我们的局部组件也差不多吧。这里的指令呢就的directives: 下面focus就是我们自定义指令对象。只是这里呢有个重点，我要强调一下，局部指令只能在这个实例中使用。请看图五

ab9e4a94b7f58a7deb0b5c9662ca9bfe.png

(图五)自定义局部指令实现输入框自动获取焦点

在浏览器的显示效果，和自定义全局注册指令效果是一样的？比较的简单啊，大家记住就行。

最后呢，欢迎大家在今晚9点来看《羊歌编程笔记》Vue自定义全局指令和局部指令实操的视频讲解。

如果有不理解的，评论区留言，羊歌呢会跟大家一起探讨！

大唐驱魔师
关注
vue2中的自定义指令的基本语法、常见参数与使用场景，超详细教程！
共同学习，共同成长
05-18 2876
今日给大家讲解vue2中的自定义指令的基本语法、指令的常见参数与常见使用场景，并结合具体案例来让小伙伴们深入理解，彻底掌握！快来看看吧~
vue自定义指令（详解）
蜗牛~~
02-17 3314
vue自定义指令，核心就是需要自己亲手去操作DOM 而vue中的内置指令例如v-model只不过是vue帮你动了dom上的display属性， 所以自定义指令，就是自己亲手对原生操作dom进行了一次封装 局部指令 需求一：定义一个v-big指令，让它和v-text功能类似，把绑定的值放大10倍 我们现在自定义一个big指令，展示放大10倍的num值，让v-big指令和v-text指令作用一样 <template> <div class="myDiv"> .
vue 输入框获取焦点
qq_41913971的博客
06-11 7201
<input @keyup="searchGame" ref="searchInput" v-focus class="game__search-input" type="text" placeholder="搜索" v-model="searchGameName"> <div @click="handleKey" class="game__pop-key-search"></div> &
vue.js 获取焦点方法
weixin_61329726的博客
10-22 1572
Vue.js还提供了ref属性，通过该属性可以引用DOM元素，并在需要的时候操作该元素。我们可以通过结合ref和mounted生命周期钩子来获取焦点。Vue.js允许我们自定义指令，来操作DOM元素。我们可以通过自定义一个v-focus指令来实现获取焦点的功能。为了更好地理解如何获取焦点，我们可以创建一个简单的示例应用来演示上述两种方法。1. 使用v-focus自定义指令。2. 使用ref引用。
Vue获取焦点与自定义指令
_oTaku
09-02 146
Vue 搜索框获取焦点（自定义指令）
vue获取焦点、失去焦点
热门推荐
weixin_43949154的博客
03-12 1万+
@blur 是当元素失去焦点时所触发的事件 @focus是元素获取焦点时所触发的事件
Vue 设置焦点
PB瓦工
01-17 566
【代码】Vue 设置焦点。
vue2.0自定义指令示例代码详解
10-17
自定义指令分为全局指令和局部指令，全局指令可以在任何组件中使用，而局部指令只能在它被声明的组件内使用。在Vue实例中注册全局自定义指令需要使用Vue.directive()方法，而局部指令则需要在组件的directives选项中...
vue自定义指令合集 vue2.0版本
12-17
Vue.js 是一款非常流行的...理解并熟练掌握自定义指令的创建和使用，对于提升Vue应用程序的可定制性和可维护性具有重要意义。在实际开发中，你可以根据业务场景创建各种实用的自定义指令，提高代码的复用性和可读性。
【Vue 第二十五章】Vue3自定义指令、权限按钮实现思路、自定义拖拽指令
前端知识分享喵
05-30 2561
Vue3自定义指令、权限按钮实现思路、自定义拖拽指令
Vue实现输入框自动获取焦点
ACM_THORN的博客
01-17 1287
为表格添加行编辑功能时需要实现1.点击编辑后对应输入框自动获取焦点；2.点击页面其他区域自动关闭输入框的编辑状态。本文为"如何精准获取当前单元格内的输入框元素"提供三种思路。
vue3焦点获取、动态定位焦点,vue3光标定位，vue3 input focus
weijia3624的专栏
09-08 5367
vue3焦点获取、动态定位焦点,v <div> //获取焦点主要就是定义一个ref <input v-model="inputvalue" ref="inputVal"/> <button @click="addItem">提交</button> </div> methods:{ //事...
vue全局指令-获取焦点
aiqi4106的博客
07-31 208
<div id="app"> <div class="panel panel-primary"> <div class="panel-body form-inline"> <label>搜索关键字: <input type="text" class="form-control" v-foc...
Vue经典实例之可编辑的表格table（史上最简单方便的处理方式，比用element容易理解），同时处理input获取焦点的问题！不好用你找我
最新发布
2401_84093899的博客
04-08 1370
技术是没有终点的，也是学不完的，最重要的是活着、不秃。零基础入门的时候看书还是看视频，我觉得成年人，何必做选择题呢，两个都要。喜欢看书就看书，喜欢看视频就看视频。最重要的是在自学的过程中，一定不要眼高手低，要实战，把学到的技术投入到项目当中，解决问题，之后进一步锤炼自己的技术。技术学到手后，就要开始准备面试了，找工作的时候一定要好好准备简历，毕竟简历是找工作的敲门砖，还有就是要多做面试题，复习巩固。有需要面试题资料的朋友点击这里可以领取。
【Vue】输入框状态切换&自动获取输入框焦点の实现
weixin_45912372的博客
04-10 3707
设置一个0ms的定时器，当浏览器执行到定时器时，会将定时器内部的函数放入延迟队列中，当定时器的等待事件结束后，会将函数放入消息队列的末尾，消息队列的执行按照先进先出原则，当前面的任务执行完成后，浏览器会自动执行。通俗的理解是：等组件的 DOM 更新完成之后，再执行 cb 回调函数。按钮展示输入框，并自动获取对话框焦点，失去焦点时展示。，实现点击按钮展示输入框，给输入框绑定失去焦点事件。时，页面已经根据最新的数据渲染完成了，此时我们执行。，确定输入框的展示状态，默认为。获取到显示的输入框的焦点(
添加全局自动聚焦的Vue自定义功能
weixin_48837605的博客
08-05 277
import Vue from "vue" // 标签添加自动聚焦的功能 // 用法: Vue.directive("fofo",{ inserted(el){ fo(el) }, update (el) { //指令所在的标签被更新时候,触发 fo(el) }) function fo (el) { // el是所在的标签 if(el.nodeName === "INPUT" || el.nodeName === "TEXTAREA") { // el本身的标签名就.
局部自定义指令--页面载入自动获取焦点
weixin_30538029的博客
09-26 152
<div id="app"> <p>页面载入时，input 元素自动获取焦点：</p> <input v-focus> </div> <script> // 创建根实例 new Vue( { el: '#app', directives: { // 注册一个局部的自定义指令 v-focus focus...
Vue 自定义指令 自动获取焦点
laoli360的博客
09-29 1377
除了核心功能默认内置的指令 (v-model 和 v-show)，Vue 也允许注册自定义指令。 v-xxx html+css的复用的主要形式是组件 你需要对普通 DOM 元素进A行底层操作，这时候就会用到自定义指令 App.vue内准备内容 <template> <div> <!-- <input type="text" v-gfocus> --> <input type="text" v-focus>
Vue中自定义指令 自动获焦
前端工程师，博文都是自己学习到的，或者开发中遇到的点，记录一下
12-31 245
<input type="text" placeholder="请输入内容" v-model='msg' v-focus> //局部自定义指令 directives: { focus:{ inserted(el,binding){ el.focus(); } } } 代码虽短都是精髓...
vue自定义全局指令和局部指令实现登陆页面
04-23
对于实现登录页面的自定义指令，可以考虑自定义一个全局指令或局部指令。 全局指令可以通过 Vue.directive() 方法来实现，它能够在整个应用中被调用。在实现登录页面自定义指令时，我们可以在线条型输入框中添加自定义指令： Vue.directive('login-validate', { bind(el, binding, vnode) { // 获取 input 元素 const input = el.querySelector('input') // 监听 input 元素的 input 事件 input.addEventListener('input', () => { // 获取输入框中的值 const value = input.value // 根据具体需求添加验证逻辑 if (!value) { // 如果输入值为空，添加错误提示 el.classList.add('error') input.classList.add('error') } else { // 如果输入值不为空，移除错误提示 el.classList.remove('error') input.classList.remove('error') } }) } }) 局部指令可以通过在组件的 directives 选项中注册来实现，它只会在该组件中被调用。在实现登录页面自定义指令时，我们可以在组件内添加自定义指令： export default { // ... directives: { loginValidate: { bind(el, binding, vnode) { // 获取 input 元素 const input = el.querySelector('input') // 监听 input 元素的 input 事件 input.addEventListener('input', () => { // 获取输入框中的值 const value = input.value // 根据具体需求添加验证逻辑 if (!value) { // 如果输入值为空，添加错误提示 el.classList.add('error') input.classList.add('error') } else { // 如果输入值不为空，移除错误提示 el.classList.remove('error') input.classList.remove('error') } }) } } } } 以上是自定义全局指令和局部指令的实现方法，实际应用时可以根据具体需求进行适当的修改和优化。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值