cl-touchable

Touchable

更新日志 v0.0.5

• 支持 PC 端，现在 PC 端和移动端有一致的体验
• onTap 事件改名为 onPress

移动端点按反馈有两个明显的问题：

1. 无法模拟CSS的 :hover 伪类效果，因为手指离开屏幕并不等同于鼠标离开元素
2. 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 一般情况下无须设置，在自嵌套的组件中，默认值会避免 点击穿透 现象