@sensorskit/vue-input-binding - npm Package Compare versions

Comparing version 0.0.1 to 0.0.2

lib/vue-input-binding.js

@@ -1,1 +0,1 @@
-!function(n,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.VueInputBinding=e():n.VueInputBinding=e()}(window,function(){return function(n){var e={};function t(r){if(e[r])return e[r].exports;var u=e[r]={i:r,l:!1,exports:{}};return n[r].call(u.exports,u,u.exports,t),u.l=!0,u.exports}return t.m=n,t.c=e,t.d=function(n,e,r){t.o(n,e)||Object.defineProperty(n,e,{configurable:!1,enumerable:!0,get:r})},t.r=function(n){Object.defineProperty(n,"__esModule",{value:!0})},t.n=function(n){var e=n&&n.__esModule?function(){return n.default}:function(){return n};return t.d(e,"a",e),e},t.o=function(n,e){return Object.prototype.hasOwnProperty.call(n,e)},t.p="/lib/",t(t.s=0)}([function(n,e,t){"use strict";t.r(e);var r={};t.d(r,"setSDK",function(){return v}),t.d(r,"bind",function(){return y}),t.d(r,"update",function(){return g}),t.d(r,"unbind",function(){return h});var u={};t.d(u,"bind",function(){return m}),t.d(u,"update",function(){return w}),t.d(u,"unbind",function(){return x});var o={};t.d(o,"bind",function(){return D}),t.d(o,"update",function(){return k}),t.d(o,"unbind",function(){return j});var a=Object.assign||function(n){for(var e=1;e<arguments.length;e++){var t=arguments[e];for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&(n[r]=t[r])}return n};function i(n){if(Array.isArray(n)){for(var e=0,t=Array(n.length);e<n.length;e++)t[e]=n[e];return t}return Array.from(n)}var c=[],f=[],l=!1,d=function(n,e,t,r){n.addEventListener(e,t,!1),c.push({el:n,scope:r,destroy:function(){return n.removeEventListener(e,t,!1)}})},s=function(n,e){if(c.length)for(var t=c.length-1;t>=0;){var r=c[t];r.el===n&&r.scope===e&&(r.destroy(),c.splice(t,1)),t-=1}},b={setDebugMode:function(n){l=n},e:function(){for(var n,e=arguments.length,t=Array(e),r=0;r<e;r++)t[r]=arguments[r];(n=console).error.apply(n,["[vue-input-binding]"].concat(i(t)))},d:function(){var n;if(l){for(var e=arguments.length,t=Array(e),r=0;r<e;r++)t[r]=arguments[r];(n=console).debug.apply(n,["[vue-input-binding]"].concat(i(t)))}else console.debug(l)}},p=null,v=function(n){return p=n},y=function(n){if(b.d("[sa-track] - bind"),!p)return b.e("未指定神策 SDK！");var e=Date.now(),t={};n.dataset.label&&(t.InputLabel=n.dataset.label),d(n,"focus",function(){e=Date.now(),p.track("InputFocus",t)},"sa-track"),d(n,"blur",function(){var t=Date.now()-e,r={StayTime:Math.floor(t/1e3),StayMSTime:t};n.dataset.label&&(r.InputLabel=n.dataset.label),p.track("InputBlur",r)},"sa-track")},g=function(){b.d("[sa-track] - update")},h=function(n){b.d("[sa-track] - unbind"),s(n,"sa-track")},m=function(n,e){b.d("[on-focus] - bind"),x(n);var t=e.value;if("function"!=typeof t)return b.e("on-focus 指令需要传入一个函数！");var r=Date.now(),u={};n.dataset.label&&(u.InputLabel=n.dataset.label),d(n,"focus",function(){r=Date.now(),function(n,e){f.filter(function(e){return e.el===n}).length?f=f.map(function(t){return t.el===n?{el:n,info:a({},n.info,e)}:t}):f.push({el:n,info:e})}(n,{enterTime:r}),t(u)},"on-focus")},w=function(n,e){e.value!==e.oldValue?(b.d("[on-focus] - update - rebind"),m(n,e)):b.d("[on-focus] - update")},x=function(n){b.d("[on-focus] - unbind"),s(n,"on-focus")},D=function(n,e){b.d("[on-blur] - bind"),j(n);var t=e.value;if("function"!=typeof t)return b.e("on-blur 指令需要传入一个函数！");n.dataset.label&&n.dataset.label,d(n,"blur",function(){var e=Date.now(),r=function(n,e){var t=f.filter(function(e){return e.el===n});return t.length?e?t[0].info[e]:t[0]:b.e("找不到元素信息：",n,e)}(n,"enterTime");r||b.e("元素没有取到聚焦时间");var u=e-r,o={stayTime:Math.floor(u/1e3),stayMSTime:u};n.dataset.label&&(o.InputLabel=n.dataset.label),t(o)},"on-blur")},k=function(n,e){e.value!==e.oldValue?(b.d("[on-blur] - update - rebind"),D(n,e)):b.d("[on-blur] - update")},j=function(n){b.d("[on-blur] - unbind"),s(n,"on-blur")},I={version:t(1).a,install:function(n,e){e.sa&&v(e.sa),e.debug&&b.setDebugMode(!0),n.directive("on-focus",u),n.directive("on-blur",o),n.directive("sa-track",r)}};e.default=I},function(n){n.exports={a:"0.0.1"}}])});
+!function(n,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.VueInputBinding=t():n.VueInputBinding=t()}(window,function(){return function(n){var t={};function e(o){if(t[o])return t[o].exports;var r=t[o]={i:o,l:!1,exports:{}};return n[o].call(r.exports,r,r.exports,e),r.l=!0,r.exports}return e.m=n,e.c=t,e.d=function(n,t,o){e.o(n,t)||Object.defineProperty(n,t,{configurable:!1,enumerable:!0,get:o})},e.r=function(n){Object.defineProperty(n,"__esModule",{value:!0})},e.n=function(n){var t=n&&n.__esModule?function(){return n.default}:function(){return n};return e.d(t,"a",t),t},e.o=function(n,t){return Object.prototype.hasOwnProperty.call(n,t)},e.p="/lib/",e(e.s=0)}([function(n,t,e){"use strict";e.r(t);var o={};e.d(o,"setSDK",function(){return y}),e.d(o,"bind",function(){return I}),e.d(o,"update",function(){return g}),e.d(o,"unbind",function(){return h});var r={};e.d(r,"bind",function(){return D}),e.d(r,"update",function(){return w}),e.d(r,"unbind",function(){return x});var u={};e.d(u,"bind",function(){return L}),e.d(u,"update",function(){return k}),e.d(u,"unbind",function(){return j});var a=Object.assign||function(n){for(var t=1;t<arguments.length;t++){var e=arguments[t];for(var o in e)Object.prototype.hasOwnProperty.call(e,o)&&(n[o]=e[o])}return n};function i(n){if(Array.isArray(n)){for(var t=0,e=Array(n.length);t<n.length;t++)e[t]=n[t];return e}return Array.from(n)}var c=[],f=[],l=!1,d=function(n,t,e,o){n.addEventListener(t,e,!1),c.push({el:n,scope:o,destroy:function(){return n.removeEventListener(t,e,!1)}})},s=function(n,t){if(c.length)for(var e=c.length-1;e>=0;){var o=c[e];o.el===n&&o.scope===t&&(o.destroy(),c.splice(e,1)),e-=1}},p={setDebugMode:function(n){l=n},e:function(){for(var n,t=arguments.length,e=Array(t),o=0;o<t;o++)e[o]=arguments[o];(n=console).error.apply(n,["[vue-input-binding]"].concat(i(e)))},d:function(){var n;if(l){for(var t=arguments.length,e=Array(t),o=0;o<t;o++)e[o]=arguments[o];(n=console).debug.apply(n,["[vue-input-binding]"].concat(i(e)))}else console.debug(l)}},b=function(n){return v(n)?n:"DIV"===n.tagName&&n.querySelector("input")?n.querySelector("input"):null},v=function(n){return"INPUT"===n.tagName},m=null,y=function(n){return m=n},I=function(n,t,e){if(p.d("[sa-track] - bind"),!(n=b(n)))return p.e("绑定的元素内未找到 input 标签！");if(!m)return p.e("未指定神策 SDK！");var o=Date.now(),r={};e.componentInstance&&e.componentInstance.title&&(r.InputLabel=e.componentInstance.title),n.dataset.label&&(r.InputLabel=n.dataset.label),d(n,"focus",function(){o=Date.now(),m.track("InputFocus",r)},"sa-track"),d(n,"blur",function(){var t=Date.now()-o,r={StayTime:Math.floor(t/1e3),StayMSTime:t};e.componentInstance&&e.componentInstance.title&&(r.InputLabel=e.componentInstance.title),n.dataset.label&&(r.InputLabel=n.dataset.label),m.track("InputBlur",r)},"sa-track")},g=function(){p.d("[sa-track] - update")},h=function(n){p.d("[sa-track] - unbind"),n=b(n),s(n,"sa-track")},D=function(n,t,e){if(p.d("[on-focus] - bind"),!(n=b(n)))return p.e("绑定的元素内未找到 input 标签！");x(n);var o=t.value;if("function"!=typeof o)return p.e("on-focus 指令需要传入一个函数！");var r=Date.now(),u={};e.componentInstance&&e.componentInstance.title&&(u.InputLabel=e.componentInstance.title),n.dataset.label&&(u.InputLabel=n.dataset.label),d(n,"focus",function(){r=Date.now(),function(n,t){f.filter(function(t){return t.el===n}).length?f=f.map(function(e){return e.el===n?{el:n,info:a({},n.info,t)}:e}):f.push({el:n,info:t})}(n,{enterTime:r}),o(u)},"on-focus")},w=function(n,t){t.value!==t.oldValue?(p.d("[on-focus] - update - rebind"),D(n,t)):p.d("[on-focus] - update")},x=function(n){p.d("[on-focus] - unbind"),n=b(n),s(n,"on-focus")},L=function(n,t,e){if(p.d("[on-blur] - bind"),!(n=b(n)))return p.e("绑定的元素内未找到 input 标签！");j(n);var o=t.value;if("function"!=typeof o)return p.e("on-blur 指令需要传入一个函数！");d(n,"blur",function(){var t=Date.now(),r=function(n,t){var e=f.filter(function(t){return t.el===n});return e.length?t?e[0].info[t]:e[0]:p.e("找不到元素信息：",n,t)}(n,"enterTime");r||p.e("元素没有取到聚焦时间");var u=t-r,a={stayTime:Math.floor(u/1e3),stayMSTime:u};e.componentInstance&&e.componentInstance.title&&(a.InputLabel=e.componentInstance.title),n.dataset.label&&(a.InputLabel=n.dataset.label),o(a)},"on-blur")},k=function(n,t){t.value!==t.oldValue?(p.d("[on-blur] - update - rebind"),L(n,t)):p.d("[on-blur] - update")},j=function(n){p.d("[on-blur] - unbind"),n=b(n),s(n,"on-blur")},M={version:e(1).a,install:function(n,t){t&&t.sa&&y(t.sa),t&&t.debug&&p.setDebugMode(!0),n.directive("on-focus",r),n.directive("on-blur",u),n.directive("sa-track",o)}};t.default=M},function(n){n.exports={a:"0.0.2"}}])});

package.json

 {
   "name": "@sensorskit/vue-input-binding",
   "description": "vue custom directive for focus and blur binding",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "author": "newraina <[e-mail]>",
@@ -6,0 +6,0 @@ "main": "lib/vue-input-binding.js",

README.md

@@ -13,3 +13,3 @@ # vue-input-binding
 > | InputFocus |  InputLabel? |
-> | InputBlur  |  InputLabel?, StayTime |
+> | InputBlur  |  InputLabel?, StayTime, StayMSTime |
 
@@ -35,3 +35,3 @@ ## 使用
 
-## 自动触发神策事件
+## 自动触发神策事件 [推荐]
 
@@ -66,7 +66,8 @@ 在需要自动触发聚焦失焦事件的地方引入自定义指令：
 
-    // onBlur 接收一个 Object 参数，里面包含距离上次聚焦的停留时间：StayTime
-    onBlur({ StayTime }) {
+    // onBlur 接收一个 Object 参数，里面包含距离上次聚焦的停留时间：StayTime, StayMSTime
+    onBlur({ StayTime, StayMSTime }) {
       sa.track('InputBlur', {
         ...your custom properties,
-        StayTime
+        StayMSTime, // 毫秒
+        StayTime // 秒
       })
@@ -73,0 +74,0 @@ }

src/index.js

@@ -10,7 +10,7 @@ import * as saTrackDirective from './sa-track'
 VueInputBinding.install = function (Vue, options) {
-  if (options.sa) {
+  if (options && options.sa) {
     saTrackDirective.setSDK(options.sa)
   }
 
-  if (options.debug) {
+  if (options && options.debug) {
     log.setDebugMode(true)
@@ -17,0 +17,0 @@ }

src/on-blur.js

@@ -1,7 +0,14 @@
-import { log, on, off, getElinfo } from './util'
+import { log, on, off, getElinfo, getInputFromEl } from './util'
 
 const scope = 'on-blur'
 
-export const bind = (el, binding) => {
+export const bind = (el, binding, vnode) => {
   log.d('[on-blur] - bind')
+
+  el = getInputFromEl(el)
+
+  if (!el) {
+    return log.e('绑定的元素内未找到 input 标签！')
+  }
+
   unbind(el)
@@ -15,8 +22,2 @@
 
-  const porperties = {}
-
-  if (el.dataset.label) {
-    porperties.InputLabel = el.dataset.label
-  }
-
   on(el, 'blur', () => {
@@ -34,2 +35,6 @@ const leaveTime = Date.now()
 
+    if (vnode.componentInstance && vnode.componentInstance.title) {
+      porperties.InputLabel = vnode.componentInstance.title
+    }
+
     if (el.dataset.label) {
@@ -54,3 +59,4 @@ porperties.InputLabel = el.dataset.label
   log.d('[on-blur] - unbind')
+  el = getInputFromEl(el)
   off(el, scope)
 }

src/on-focus.js

@@ -1,7 +0,14 @@
-import { log, on, off, saveElInfo } from './util'
+import { log, on, off, saveElInfo, getInputFromEl } from './util'
 
 const scope = 'on-focus'
 
-export const bind = (el, binding) => {
+export const bind = (el, binding, vnode) => {
   log.d('[on-focus] - bind')
+
+  el = getInputFromEl(el)
+
+  if (!el) {
+    return log.e('绑定的元素内未找到 input 标签！')
+  }
+
   unbind(el)
@@ -19,2 +26,6 @@
 
+  if (vnode.componentInstance && vnode.componentInstance.title) {
+    porperties.InputLabel = vnode.componentInstance.title
+  }
+
   if (el.dataset.label) {
@@ -42,3 +53,4 @@ porperties.InputLabel = el.dataset.label
   log.d('[on-focus] - unbind')
+  el = getInputFromEl(el)
   off(el, scope)
 }

src/sa-track.js

@@ -1,2 +0,2 @@
-import { log, on, off } from './util'
+import { log, on, off, getInputFromEl } from './util'
 
@@ -8,5 +8,11 @@ const scope = 'sa-track'
 
-export const bind = el => {
+export const bind = (el, binding, vnode) => {
   log.d('[sa-track] - bind')
 
+  el = getInputFromEl(el)
+
+  if (!el) {
+    return log.e('绑定的元素内未找到 input 标签！')
+  }
+
   if (!sdk) {
@@ -21,2 +27,6 @@ return log.e('未指定神策 SDK！')
 
+  if (vnode.componentInstance && vnode.componentInstance.title) {
+    porperties.InputLabel = vnode.componentInstance.title
+  }
+
   if (el.dataset.label) {
@@ -37,2 +47,6 @@ porperties.InputLabel = el.dataset.label
 
+    if (vnode.componentInstance && vnode.componentInstance.title) {
+      porperties.InputLabel = vnode.componentInstance.title
+    }
+
     if (el.dataset.label) {
@@ -52,3 +66,4 @@ porperties.InputLabel = el.dataset.label
   log.d('[sa-track] - unbind')
+  el = getInputFromEl(el)
   off(el, scope)
 }

src/util.js

@@ -85,1 +85,19 @@ const registeredHandlers = []
 }
+
+/**
+ * 从 el 及其子元素中获取 input 原生元素
+ * 如果 el 就是 input，直接返回
+ */
+export const getInputFromEl = el => {
+  if (isInput(el)) {
+    return el
+  }
+
+  if (el.tagName === 'DIV' && el.querySelector('input')) {
+    return el.querySelector('input')
+  }
+
+  return null
+}
+
+export const isInput = el => el.tagName === 'INPUT'

No alert changes

Improved metrics

Total package byte prevSize

332423

increased by0.63%

Lines of code

473

increased by8.49%

Number of lines in readme file

75

increased by1.35%

No dependency changes