vue自定义指令使用场景

本文探讨了Vue自定义指令的使用场景,强调在组件无法满足需求时进行底层DOM操作的必要性。文章通过三个实例介绍自定义指令的常见用途:实现输入框自动聚焦、下拉菜单的显示控制以及将时间转化为相对格式。这些案例展示了如何巧妙地利用自定义指令增强应用交互体验。
摘要由CSDN通过智能技术生成

使用自定义指令背景

  • 代码复用和抽象的主要形式是组件。
  • 当需要对普通 DOM 元素进行底层操作,此时就会用到自定义指令
  • 但是,对于大幅度的 DOM 变动,还是应该使用组件

常用案例

1、 输入框自动聚焦

// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
   
// 当被绑定的元素插入到 DOM 中时
inserted: function (el) {
   
// 聚焦元素
el.focus()
}
})
<input v-focus>
123456789

2 下拉菜单

点击下拉菜单本身不会隐藏菜单
点击下拉菜单以外的区域隐藏菜单

Vue.directive('clickoutside', {
   
bind(el, binding) {
   
function documentHandler(e) {
   
if (el.contains
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值