Touchable
v0.0.5
更新日志 - 支持
PC
端,现在PC
端和移动端有一致的体验 onTap
事件改名为onPress
移动端点按反馈有两个明显的问题:
- 无法模拟CSS的
:hover
伪类效果,因为手指离开屏幕并不等同于鼠标离开元素 click
事件在移动端有明显的延迟
本组件模拟了和PC端点按行为一致的视觉效果:
press
事件取代click
事件- 事件可以通过滑出元素矩形范围取消
- 可自定义手指按下时的样式,当手指离开时会自动恢复,模拟了
:hover
效果
安装
npm install cl-touchable
或
yarn add cl-touchable
React 版本
// 导入
import Touchable from 'cl-touchable';
//使用
<Touchable
onPress={}
className={}
activeClass={}
style={}
activeStyle={}
stopPropagation={true}
>
// Your child content here
</Touchable>
组件可嵌套自身使用,如:
<Touchable>
<Touchable></Touchable>
</Touchable>
如果不设置任何 activeClass
或 activeStyle
,组件的默认点按行为为降低 50%
透明度 opacity: 50%
Vue 版本
// 导入
import ClTouchable from 'cl-touchable/lib/vue/index.vue';
// 注册
Vue.component(ClTouchable.name, ClTouchable);
// 使用
<cl-touchable
activeClass=""
activeStyle=""
:stopPropagation=""
@press=""
>
// slot Your content here
</cl-touchable>
stopPropagation
一般情况下无须设置,在自嵌套的组件中,默认值会避免点击穿透
现象