open-index/open-npm huggingface dataset:
npm package: @sensorskit/vue-input-binding
Description: vue custom directive for focus and blur binding
Author: newraina
Latest version: 0.0.2

# vue-input-binding

[![npm (scoped)](https://img.shields.io/npm/v/@sensorskit/vue-input-binding.svg)](https://www.npmjs.com/package/@sensorskit/vue-input-binding)
 [![Build Status](https://travis-ci.org/SensorsKit/vue-input-binding.svg?branch=master)](https://travis-ci.org/SensorsKit/vue-input-binding)

[[在线预览]](https://sensorskit.github.io/vue-input-binding/)

> **用神策追踪输入框的聚焦失焦事件**
>
> |    事件    | 属性 |
> | ---------- | --- |
> | InputFocus |  InputLabel? |
> | InputBlur  |  InputLabel?, StayTime, StayMSTime |

## 使用

``` bash
yarn add @sensorskit/vue-input-binding
```

在 Vue.js 项目的入口处引入：

```js
import VueInputBinding from '@sensorskit/vue-input-binding'

Vue.use(VueInputBinding)

// 如果需要自定义选项
Vue.use(VueInputBinding, {
  sa: window.sa // 神策 JS SDK 暴露的全局变量
})
```

## 自动触发神策事件 [推荐]

在需要自动触发聚焦失焦事件的地方引入自定义指令：

```html
<!-- 此时会自动触发神策的聚焦失焦事件，并带上必要属性，需要在引入时配置 sa 全局变量 -->
<input type="text" data-label="手机号" v-sa-track>
```

如果在元素上设置了 `data-label` 属性，触发神策事件时会自动带上 InputLabel 属性。

## 手动触发神策事件

如果需要自行处理聚焦失焦逻辑：

```html
<input type="text" v-on-focus="onFocus" v-on-blur="onBlur">
```

此时，数据框聚焦时会触发 onFocus 方法，失焦时会触发 onBlur 方法，onBlur 会接收一个参数：

```js
export default {
  ...

  methods: {
    onFocus() {
      sa.track('InputFocus', { ...your custom properties })
    },

    // onBlur 接收一个 Object 参数，里面包含距离上次聚焦的停留时间：StayTime, StayMSTime
    onBlur({ StayTime, StayMSTime }) {
      sa.track('InputBlur', {
        ...your custom properties,
        StayMSTime, // 毫秒
        StayTime // 秒
      })
    }
  }
}
```
npm package: @sensorskit/vue-on-delete
Description: vue custom directive of delete binding
Author: newraina
Latest version: 1.1.0

# vue-on-delete

[![npm (scoped)](https://img.shields.io/npm/v/@sensorskit/vue-on-delete.svg)](https://www.npmjs.com/package/@sensorskit/vue-on-delete)
[![Build Status](https://travis-ci.org/SensorsKit/vue-on-delete.svg?branch=master)](https://travis-ci.org/SensorsKit/vue-on-delete)

[[在线预览]](https://sensorskit.github.io/vue-on-delete/)

> 通用的「是否删除」监听逻辑：**输入框字符减少的同时没有新增字符**
>
> 示例：
>
> * 输入框里有字符存在时，按下了退格键，算删除
> * 输入框里没有字符，按下退格键，不算删除
> * 输入框里选中了一段文字，按下退格键，算删除
> * 输入框里选中了一段文字，键入别的字符，此时选中文字会被替换掉，不算删除

## 使用

```bash
yarn add @sensorskit/vue-on-delete
```

在 Vue.js 项目的入口处引入：

```js
import VueOnDelete from '@sensorskit/vue-on-delete'

Vue.use(VueOnDelete)

// 如果需要自定义选项
Vue.use(VueOnDelete, {
  directive: 'your-custom-directive-name'
})
```

在需要绑定删除逻辑的地方引入自定义指令：

```html
<input type="text" v-on-delete="onDelete">

<!-- 如果自定义了directive name -->
<input type="text" v-your-custom-name="onDelete">
```
npm package: @sensorskit/vue-on-modify
Description: vue custom directive of modify binding
Author: newraina
Latest version: 0.1.0

# vue-on-modify

[![npm (scoped)](https://img.shields.io/npm/v/@sensorskit/vue-on-modify.svg)](https://www.npmjs.com/package/@sensorskit/vue-on-modify)
 [![Build Status](https://travis-ci.org/SensorsKit/vue-on-modify.svg?branch=master)](https://travis-ci.org/SensorsKit/vue-on-modify)

[[在线预览]](https://sensorskit.github.io/vue-on-modify/)

> 通用的「是否修改」监听逻辑：**输入框失焦之后，字符相对输入框上次聚焦时发生变化**
>
> 示例：
>   - 输入框聚焦，输入字符后失焦，算修改
>   - 输入框聚焦，输入字符后又把刚输入的字符删掉，再失焦，不算修改

## 使用

``` bash
yarn add @sensorskit/vue-on-modify
```

在 Vue.js 项目的入口处引入：

```js
import VueOnModify from '@sensorskit/vue-on-modify'

Vue.use(VueOnModify)

// 如果需要自定义选项
Vue.use(VueOnModify, {
  directive： 'your-custom-directive-name'
})
```

在需要绑定修改逻辑的地方引入自定义指令：

```html
<input type="text" v-on-modify="onModify">

<!-- 如果自定义了directive name -->
<input type="text" v-your-custom-name="onModify">
```