# cl-touchable

> Touchable component for mobile

Latest version **0.0.5** (published 2018-04-16) · MIT license · 0 weekly downloads

## Install

```sh
npm install cl-touchable
pnpm add cl-touchable
yarn add cl-touchable
bun add cl-touchable
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.5 |
| Published | 2018-04-16 |
| First published | 2018-04-11 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 19.5 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Author | joye |
| Maintainers | joye61 |
| Keywords | React, Vue, Touchable |

## Links

- npm: https://www.npmjs.com/package/cl-touchable
- Repository: https://github.com/chelun-h5/touchable
- npm.io page: https://npm.io/package/cl-touchable

## Dependencies (3)

- [vue](https://npm.io/package/vue.md) ^2.5.16
- [csstype](https://npm.io/package/csstype.md) ^2.1.1
- [@types/react](https://npm.io/package/@types/react.md) ^16.3.6

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.0.5 (latest) — 2018-04-16
- 0.0.4 — 2018-04-13
- 0.0.3 — 2018-04-12
- 0.0.2 — 2018-04-12
- 0.0.1 — 2018-04-11

## README

# 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` 一般情况下无须设置，在自嵌套的组件中，默认值会避免 `点击穿透` 现象

---
_Source: https://npm.io/package/cl-touchable · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._