vue自定义指令-常用指令案列

不要停止努力呦！

已于 2023-02-09 16:33:50 修改

阅读量62

点赞数

分类专栏： vue自定义指令文章标签： vue.js javascript 前端

于 2022-12-28 17:33:37 首次发布

本文链接：https://blog.csdn.net/qq_42657934/article/details/128471798

版权

vue自定义指令专栏收录该内容

1 篇文章 0 订阅

订阅专栏

命名必须以v开头简写模式在updated mounted钩子中执行

在这里插入图片描述

<template>
  <div class="directives-component"  >
    <input type="text"  v-model="bgColor">
    <div class="directives-box" v-bgcololr="{background:bgColor }" v-move></div>
    <button class="btn" v-debounce="debounceClick">防抖</button> 
    <button class="btn" v-Permission="'b'">权限指令</button>
  </div>
</template>

<script setup lang="ts">
import { ref, Directive, DirectiveBinding} from 'vue'
const bgColor = ref<string>('请输入背景色')
// 更改背景色指令
const vBgcololr = (el: HTMLElement, biding: DirectiveBinding) => {
  el.style.background = biding.value.background
}
// 防抖指令
const vDebounce: Directive = (el:HTMLElement, biding: DirectiveBinding) => {
  let timer: NodeJS.Timeout
  el.addEventListener('click', () => {
    if(timer) clearTimeout(timer)
    timer = setTimeout(() => {
      biding.value()
    }, 6000)
  })
}
const debounceClick = () => {
  console.log('只会触发一次')
}
// 检查是否拥有权限
const checkPermission = (value: string) => {
  let hasPermission = ['a', 'c', 'd']
  let index = hasPermission.indexOf(value)
  if(index > -1){
    return true
  }
  return false
}
// 权限指令
const vPermission: Directive = (el: HTMLHtmlElement, binding: DirectiveBinding) => {
  let hasPermission = checkPermission(binding.value)
  if(!hasPermission){
    // 没有权限 移除元素
    el.parentNode && el.parentNode.removeChild(el)
  }
}

// 移动指令
const vMove: Directive = (el: HTMLElement, binding: DirectiveBinding) => {
  const element = el as HTMLDivElement
  const mousedown = (e: MouseEvent) => {
    console.log('e', e)
    const offsetX = e.clientX - el.offsetLeft
    const offsetY = e.clientY - el.offsetTop
    const move = (e: MouseEvent) => {
      el.style.left = e.clientX - offsetX +  'px'
      el.style.top = e.clientY - offsetY +  'px'
    }
    document.addEventListener('mousemove', move)
    document.addEventListener('mouseup', () => {
      document.removeEventListener('mousemove', move)
    })
  }
  element.addEventListener('mousedown', mousedown)

}
</script>
<style scoped lang="less">
.directives-component{
  padding: 10px;
  position: relative;
  input{
    width: 300px;
    border: 2px solid #ccc;
  
  }
  .directives-box{
    width: 300px;
    height: 500px;
    border: 2px solid #ccc;
    border-top: 30px solid black;
    position: absolute;
  }
  .btn{
    width: 300px;
    background-color: skyblue;
  }
}
</style>