# @retailwe/ui-add-cart

> ## 引入

Latest version **0.0.22** (published 2020-11-11) · 0 weekly downloads

## Install

```sh
npm install @retailwe/ui-add-cart
pnpm add @retailwe/ui-add-cart
yarn add @retailwe/ui-add-cart
bun add @retailwe/ui-add-cart
```

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.22 |
| Published | 2020-11-11 |
| First published | 2020-05-02 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | rachelrgao, gaterking, jeannehuang, jerryc |

## Links

- npm: https://www.npmjs.com/package/@retailwe/ui-add-cart
- Repository: git@git.code.tencent.com:tencent-retail-fe/retailwe
- npm.io page: https://npm.io/package/@retailwe/ui-add-cart

## Recent versions

- 0.0.22 (latest) — 2020-11-11
- 0.0.20 (beta) — 2020-10-27
- 0.0.21 — 2020-11-09
- 0.0.19 — 2020-10-23
- 0.0.18 — 2020-10-21
- 0.0.17 — 2020-10-15
- 0.0.16 — 2020-09-24
- 0.0.15 — 2020-08-27
- 0.0.14 — 2020-07-13
- 0.0.13 — 2020-06-30
- 0.0.12 — 2020-05-14
- 0.0.11 — 2020-05-12
- 0.0.10 — 2020-05-09
- 0.0.9 — 2020-05-09
- 0.0.8 — 2020-05-08
- … 1 more at https://npm.io/package/@retailwe/ui-add-cart/versions

## README

# add-cart 添加购物车

## 引入

全局引入，在miniprogram根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。

```json
// app.json 或 index.json
"usingComponents": {
  "add-cart": "@retailwe/ui-add-cart/index"
}
```

## 代码演示

### 基础用法

```html
<wr-add-cart wr-class="add-cart-icon" icon="add-cart" size="48" color="#FA550F" data-id="goods-0" data-index="{{0}}" bindclick="onAddCart" />
```

``` javascript
onAddCart(e: any) {
  const { callback } = e.detail;
  if (callback) {
    callback({
      startPos: { x: 10, y: 10 }, // 动画起始坐标
      endPos: {
        x: 200,
        y: 300,
      }, // 动画终止坐标
      image: {
        url: 'https://...',
        width: 50,
        height: 50,
      }, // 图片url及宽高
    });
  }
}
```

### 指定动画速度

```javascript
onAddCart(e: any) {
  const { callback } = e.detail;
  if (callback) {
    callback({
      startPos: { x: 10, y: 10 }, // 动画起始坐标
      endPos: {
        x: 200,
        y: 300,
      }, // 动画终止坐标
      image: {
        url: 'https://...',
        width: 50,
        height: 50,
        duration: 500,  // 单位ms
      }, // 图片url及宽高
    });
  }
}
```

## API

### add-cart  Props

| 参数 | 说明 | 类型 | 默认值 | 版本 |
|-----------|-----------|-----------|-------------|-------------|
| icon | 加购按钮的iconfont图标 | *string* | `add-cart` | - |
| size | 图标大小 | *string \| number* | `48` | 传入数字时，将以rpx为单位 |
| color | 图标颜色 | *string* | `#FA550F` | - |
| info | 角标内容 | *string* | - | - |
| dot | 是否显示红点 | *boolean* | - | - |
| customStyle | 自定义样式 | *string* | - | - |

### add-cart  Event

| 事件名 | 说明 | 参数 |
|------|------|------|
| click | 点击加购时触发 | `callback`: 回调函数，用于触发加购动画, |

`callback`参数说明

```ts
type CallbackParams = {
  startPos: Point; // 起始点坐标，单位px
  endPos: Point; // 终止点坐标，单位px
  image: {
    url: string; // 图片url
    width: number; // 图片宽度，单位px
    height: number; // 图片高度，单位px
  }; // 图片
  duration?: number; // 动画持续时间，单位ms
};
```

---
_Source: https://npm.io/package/@retailwe/ui-add-cart · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._