v-tapd
v0.0.2
Published
vue tap
Downloads
3
Readme
v-tapd ( 只支持vue2.0 )
a v-tap directive of vue.js
How To Use
- ES6
# install v-tapd
npm install v-tapd --save;
import vueTap from 'v-tapd';
Vue.use(vueTap);
- 直接引入
<script src="./vue.js"></script>
<script src="./vue-tap.js"></script>
支持Vue2.0
例子: http://zd98.xyz/v-tapd/test.html 只支持Vue2.0,使用姿势如下
// 具体请看demo test.html
<!--如果想要快速跳转直接写v-tap即可不用写任何参数-->
<a href="http://www.baidu.com" v-tap>如果想要快速跳转直接写v-tap即可不用写任何参数</a>
<div v-tap="cli">简单模式:传递函数</div>
<div v-tap="cli.bind(this,12)">简单模式: 函数传参</div>
<div v-tap="{methods: cli}">对象模式: 传递函数</div>
<div v-tap="{methods: cli, index: 1}">对象模式: 函数传参</div>
<div v-tap:active="onActive">支持tap点击态</div>
<p v-tap.prevent="{ methods : scroll }">无法滑动页面</p>
<!-- 这样的a标签可以进行一些处理而不跳转 -->
<a v-tap.prevent="{ methods : cant }" href="这是无法跳转的">这是无法跳转的</a>
<!--这样一样会直接快速跳转不会执行cant 除非设置了prevent-->
<a href="aaa" v-tap="{ methods : cant }">can't</a>
<a v-tap="a++">v-tap="a++" 直接执行表达式在2.0里无法使用</a>
<a href="javascript:window.history.go(-1);" v-tap>我可以直接在href里写js代码 如history.go(-1)</a>
new Vue({
el: "body",
methods : {
// 1. 使用对象模式
callback : function(params) {
// params 可获取绑定时候带的参数
console.log(params.event); // 原生事件
console.log(params.tapObj); // 手指触摸的一些参数
console.log(params.paramA); // 绑定时候传入的paramA
console.log(params.paramB); // 绑定时候传入的paramB
},
// 2. 使用简单模式
callback2: function(customParam...., tapParam){
//bind 直传参数
console.log(customParam) //指令直接传参
console.log(tapParam.event) // 原生事件
console.log(tapParam.tapObj) // tapObj
}
}
});
With parmas
1.
<ul>
<li v-for="(item,index) in list"
v-tap="{ methods:args , index : index, item:item }"
>
{{item.name}}---{{item.age}}
</li>
</ul>
args : function(params) {
// v-for循环带参数的回调
console.log('---params.event---',params.event)
console.log('---params.tapObj---',params.tapObj);
console.log('---params.index---',params.index)
console.log('---params.el---',params.el)
//params.tapObj 可获得 tap的一些参数
//pageX,pageY,clientX,clientY,distanceX,distanceY
//后面2个分别的手指可能移动的位置(以后可用于拓展手势)
},
2.
<ul>
<li v-for="(item,index) in list"
v-tap="args.bind(index,item)"
>
{{item.name}}---{{item.age}}
</li>
</ul>
args : function(index, item , tapParam) {
// v-for循环带参数的回调
console.log('---tapParam.event---',tapParam.event)
console.log('---tapParam.tapObj---',tapParam.tapObj);
console.log('---index---',index)
//tapParam.tapObj 可获得 tap的一些参数
//pageX,pageY,clientX,clientY,distanceX,distanceY
},
2017.01.23(update)
支持tap:active的回调 支持多种形式传递函数 //去除 e.currentTarget=el(兼容性问题) //添加 touchcancel事件
2017.01.20(update)
Forked MeCKodo/vue-tap 只支持Vue2.0,去除Vue1.0 只支持移动端,去除PC端支持