# directive

**Repository Path**: xmheackers/directive

## Basic Information

- **Project Name**: directive
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-07-16
- **Last Updated**: 2024-07-16

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# derectives

`Vue2`, `Vue3` 自定义指令

`Vue2`和 `Vue3`的指令生命周期不同，故分为 `@zhizu/directive-vue2`, `@zhizu/directive-vue3`

提供核心包 `@zhizu/directive-core`

## 现状

Vue2:

1. `BOSS`分为主应用和子应用, 现有指令包括：防抖（2种），节流，权限，吸顶，标题
2. 充电SASS, 指令包括：输入框只能输入正整数（2种），防抖
3. H5, 暂无
4. 基于 `uni-app`小程序，智租推荐官小程序，充电小程序 等，暂无

Vue3:

1. 南光，暂无

## 解决问题

1. 减少业务逻辑冗余代码
2. 减少交互逻辑代码, 降低重写交互逻辑的风险
3. 提供便捷的指令，适用现有项目和后续新项目
4. 增强交互反馈，主要在移动端交互

## 计划

包括Vue2和Vue3

1. 防抖, 节流指令
2. 处理数字 `input`框指令
3. 节点拖拽指令
4. 节点放大缩小指令
5. 长列表指令
6. 检测是否在某些元素之外触发了指定的事件，比如判断鼠标是否点击了元素 A 和 B 范围之外的元素
7. tooltip

## 实现

1. @zhizu/directive-core 提供核心逻辑
2. @zhizu/directive-vue2 提供vue2语法指令
3. @zhizu/directive-vue3 提供vue3语法指令

# 防抖

1. 普通防抖，默认延迟500ms, 默认触发click事件

```html
<!-- 连续点击，500ms后触发 -->
<template>
  <button v-debounce="handleClick">BUTTON</button>
</template>
<script>
  export default {
    methods: {
      handleClick() {}
    }
  }
</script>
```

2. 指定事件防抖

```html
<template>
  <input v-debounce:input="(e) => handleInput(e)" />
</template>
<script>
  export default {
    methods: {
      handleInput() {}
    }
  }
</script>
```

3. 指定时间防抖

```html
<!-- 1000ms后触发 -->
<template>
  <button
    v-debounce:click="{
      handler: handleClick,
      delay: 800,
    }"
  >BUTTON</button>
</template>
<script>
  export default {
    methods: {
      handleInput() {}
    }
  }
</script>
```

3. 立即触发防抖

```html
<!-- 1s内不再触发，1s后点击再次触发 -->
<template>
  <button
    v-debounce:click="{
      handler: handleClick,
      delay: 1000,
      begin: true
    }"
  >BUTTON</button>
</template>
<script>
  export default {
    methods: {
      handleInput() {}
    }
  }
</script>
```