Vue2.x Todo之自定义指令实现自动聚焦的方法

网络编程 2024/9/1 佚名

3 2 1

我们希望用户双击 todo 进入编辑状态后输入框自动获取焦点，而不是需要先手动点一下。input 元素有一个 focus 方法可以来帮我们完成这个事情，但现在的问题是如何在 Vue 中获得这个 input 元素，从而来操作它。Vue 的自定义指令可以完成这个功能。

我们先来看看 Vue 官网的一个示例：

然而，有的情况下，你仍然需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令。举个聚焦输入框的例子，如下：

一个输入框：

当页面加载时，该元素将获得焦点 (注意： autofocus 在移动版 Safari 上不工作)。事实上，只要你在打开这个页面后还没点击过任何内容，这个输入框就应当还是处于聚焦状态。现在让我们用指令来实现这个功能：

 // 注册一个全局自定义指令 `v-focus` 

Vue.directive('focus', { // 当被绑定的元素插入到 DOM 中时…… inserted: function (el) { // 聚焦元素 el.focus() } })

如果想注册局部指令，组件中也接受一个 directives 的选项：

directives: { focus: { // 指令的定义 inserted: function (el) { el.focus() } } }

指令是什么，就是用来指导被绑定的元素的行为，我们之前接触过 v-if、v-model、v-bind 等指令，官方文档说的非常清楚，我们可以自己注册一个指令，然后实现某些钩子函数，从而指定被绑定元素的行为。这里我们依葫芦画瓢，实现一个 focus 指令，这个指令实现了 inserted 钩子函数，这个函数在被绑定的元素被插入 dom 时触发，且被绑定的元素会作为参数传入钩子函数，我们就可以在函数中对它操作。

我们在 Vue 对象中声明局部指令：

<script>
  let id = 0; // 用于 id 生成
  var app = new Vue({
    ...
    methods: {
      ...
    },
    directives: {
      focus: {
        inserted: function (el) {
          el.focus()
        }
      }
    }
  })
</script>

然后就可以使用这个指令了，把它绑定到编辑框，这样编辑框出现时指令就被触发，从而聚焦。

<input type="text" 
    value="编辑 todo..."
    v-focus="true"
    v-if="editedTodo!==null && editedTodo.id===todo.id"
    v-model="todo.title"
    @keyup.enter="editDone(todo)"
    @keyup.esc="cancelEdit(todo)"/>

注意因为元素一旦出现一定要聚焦的，所以条件始终为 true。

现在用户体验好多了！快打开浏览器体验一下吧！

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

Vue2,Todo,自动聚焦,Vue2,自动聚焦

标签：

Vue2,Todo,自动聚焦,Vue2,自动聚焦

免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

评论“Vue2.x Todo之自定义指令实现自动聚焦的方法”

Vue2.x Todo之自定义指令实现自动聚焦的方法

暂无“Vue2.x Todo之自定义指令实现自动聚焦的方法”评论...

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒经典版》的玩家都可以获得奖励。

更新动态

20240901

Vue2.x Todo之自定义指令实现自动聚焦的方法

Vue2,Todo,自动聚焦,Vue2,自动聚焦

关于微信小程序登录的那些事

关于React动态加载路由处理的相关问题

评论“Vue2.x Todo之自定义指令实现自动聚焦的方法”

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

更新动态

友情链接