Nerfing Powerful Megalomaniacs

    @sensorskit/vue-input-binding

    0.0.2 • Public • Published

    vue-input-binding

    npm (scoped) Build Status

    [在线预览]

    用神策追踪输入框的聚焦失焦事件

    事件 属性
    InputFocus InputLabel?
    InputBlur InputLabel?, StayTime, StayMSTime

    使用

    yarn add @sensorskit/vue-input-binding

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

    import VueInputBinding from '@sensorskit/vue-input-binding'
    
    Vue.use(VueInputBinding)
    
    // 如果需要自定义选项
    Vue.use(VueInputBinding, {
      sa: window.sa // 神策 JS SDK 暴露的全局变量
    })

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

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

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

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

    手动触发神策事件

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

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

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

    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 // 秒
          })
        }
      }
    }

    Keywords

    none

    Install

    npm i @sensorskit/vue-input-binding

    DownloadsWeekly Downloads

    0

    Version

    0.0.2

    License

    MIT

    Unpacked Size

    332 kB

    Total Files

    26

    Last publish

    Collaborators

    • qwezxc24680
    • newraina