open-index/open-npm huggingface dataset:
npm package: @retailwe/ui-tag
Description: ## 引入
Latest version: 0.0.23

# tag 标签

## 引入

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

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

## 代码演示

### 基础用法

```html
<wr-tag>default</wr-tag>
<wr-tag type="primary">primary</wr-tag>
<wr-tag type="success">success</wr-tag>
<wr-tag type="danger">danger</wr-tag>
<wr-tag type="warning">warning</wr-tag>
```

### 镂空样式

```html
<wr-tag plain>default</wr-tag>
```

### 圆角样式

```html
<wr-tag round>default</wr-tag>
```

### 标记样式(半边圆角)

```html
<wr-tag mark>default</wr-tag>
```

### 自定义颜色

```html
<wr-tag color="#f2826a">default</wr-tag>
```

### 标签大小

```html
<wr-tag type="success">success</wr-tag>
<wr-tag type="success" size="medium">标签</wr-tag>
<wr-tag type="success" size="large">标签</wr-tag>
```

### 可关闭标签

```html
<wr-tag closeable bind:close="onClose" data-id="{{item.id}}">success</wr-tag>
```

## API

### icon Props

| 参数 | 说明 | 类型 | 默认值 | 版本 |
|-----------|-----------|-----------|-------------|-------------|
| type | 类型，可选值为`primary` `success` `danger` `warning` | *string* | - | - |
| size | 大小, 可选值为`large` `medium` | *string* | - | - |
| color | 标签颜色 | *string* | - | - |
| plain | 是否为空心样式 | *boolean* | `false` | - |
| round | 是否为圆角样式 | *boolean* | `false` | - |
| mark | 是否为标记样式 | *boolean* | `false` | - |
| text-color | 文本颜色，优先级高于`color`属性 | *string* | `white` | - |
| closeable | 是否显示关闭按钮，点击该按钮会触发`close`事件 | `boolean` | `false` | - |

### icon Event

| 事件名 | 说明 | 参数 |
|------|------|------|
| close | 点击tag关闭标志时触发 | - |

### Slot

| 名称 | 说明 |
|-----------|-----------|
| - | Tag 显示内容 |

### icon 外部样式类

| 类名 | 说明 |
|-----------|-----------|
| wr-class | 根节点外部样式类 |
npm package: @retailwe/ui-textarea
Description: ## 引入
Latest version: 0.0.19

# textarea 标签

## 引入

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

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

## 代码演示

### 基础用法

```html
<wr-textarea
  placeholder="请输入内容"
  bindinput="onInput"
></wr-textarea>
```

```ts
Page({
  data: {
    value: '',
  },
  onInput(e: any) {
    const { index } = e.currentTarget.dataset;
    const { value } = e.detail;
    this.setData({
      'value': value,
    });
  },
});
```

### 带边框

```html
<wr-textarea
  placeholder="请输入内容"
  border
  bindinput="onInput"
></wr-textarea>
```

### 限制内容长度

```html
<wr-textarea
  placeholder="请输入内容"
  border
  maxlength="10"
  show-count
  bindinput="onInput"
></wr-textarea>
```

### 高度自适应

```html
<wr-textarea
  placeholder="请输入内容"
  border
  auto-height
  bindinput="onInput"
></wr-textarea>
```

## API

### Props

*以下属性会透传至原生`textarea`：* `type`, `showConfirmBar`, `adjustPosition`, `value`, `placeholder`, `maxlength`, `focus`, `disabled`,

| 参数 | 说明 | 类型 | 默认值 | 版本 |
|-----------|-----------|-----------|-------------|-------------|
| showCount | 是否显示字数统计，仅`maxlength`大于-1时有效 | *number* | `false` | - |
| border | 是否显示边框和内边距，默认无边距无边框 | *boolean* | `false` | - |
| value | 已输入的文本内容 | *string* | - | - |
| placeholder | `value`为空时的占位内容 | *string* | - | - |
| maxlength | 内容最大长度，`-1`代表不做限制 | *number* | `-1` | - |
| type | 请参考原生textarea的type属性 | *number* | `-1` | - |
| showConfirmBar | 软件盘上是否显示完成按钮 | *boolean* | `true` | - |
| autoFocus | 自动获取焦点 | *boolean* | `false` | - |
| focus | 是否获取焦点 | *boolean* | `false` | - |
| adjustPosition | 键盘弹起时是否自动上推页面 | *boolean* | `true` | - |
| cursorSpacing | 键盘弹起时组件底部与键盘的距离，请参考原生textarea的type属性 | *number* | `0` | - |
| disabled | 是否禁用组件 | `boolean` | `false` | - |
| autoHeight | 是否开启高度自适应 | `boolean` | `false` | - |

### Event

| 事件名 | 说明 | 参数 |
|------|------|------|
| input | 输入内容变化时触发 | `{ value }` |
| confirm | 点击键盘上的完成按钮时触发 | `{ value }` |
| focus | 获取焦点时触发, `height`为键盘高度 | `{ value, height }` |
| blur | 失去焦点时触发, `cursor`为游标位置 | `{ value, cursor }` |

### 外部样式类

| 类名 | 说明 |
|-----------|-----------|
| wr-class | 根节点外部样式类 |
| wr-class-placeholder | 预设内容外部样式类 |
npm package: @retailwe/ui-toast
Description: ## 引入
Latest version: 0.0.22

# toast 轻提示

## 引入

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

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

## 代码演示

### 基础用法

通用 toast 一些信息文字提示

```html
<button bindtap="handleTap">出来吧，toast!!</button> <wr-toast id="wr-toast" />
```

```javascript
Page({
  data: {},
  handleTap(e) {
    const { index } = e.currentTarget.dataset;
    const toast = this.selectComponent(`#wr-toast`);
    toast.show({
      icon: 'success',
      text: 'toast内容'
      zIndex: 100,
      duration: 2000,
    });
  },
});
```

### 使用 core/toast.ts

通用 toast 一些信息文字提示

```html
<button bindtap="handleTap">出来吧，toast!!</button> <wr-toast id="wr-toast" />
```

```javascript
import Toast from '你的路径/core/base/helpers/toast';
Page({
  data: {},
  handleTap(e) {
    Toast({
      context: this,
      selector: '#wr-toast',
      text: 'toast内容',
    });
  },
});
```

## API

### wr-toast Props

| 参数      | 说明                   | 类型     | 默认值    | 版本 |
| --------- | ---------------------- | -------- | --------- | ---- |
| icon      | 弹窗显示 icon 类型名称 | _string_ | `success` | -    |
| iconColor | 弹窗显示 icon 颜色     | _string_ | `#fff`    | -    |
| iconSize  | 弹窗显示 icon 大小     | _string_ | -         | -    |
| text      | 弹窗显示文字提示       | _string_ | -         | -    |
| textColor | 弹窗显示文字颜色       | _string_ | `` | -    |
| zIndex    | 当前弹窗所在的层级值   | _number_ | `10`      | -    |
| fontSize  | 弹窗显示文字大小       | _number_ | -         | -    |
| duration  | 弹窗显示毫秒数         | _number_ | `2000`    | -    |
npm package: @retailwe/ui-tree-select
Description: ## 引入
Latest version: 0.0.15

# tree-select 消息提示

## 引入

```json
"usingComponents": {
  "wr-tree-select": "@retailwe/ui-tree-select/index"
}
```

## 代码演示

### 基础用法

```html
<tree-select
  items="{{items}}"
  subItems="{{subItems}}"
  bind:onSelect="{{tapSelect}}"
></tree-select>
```

```javascript
Page({
  data: {
    items: [{ title: 'apple' }, { title: 'sumsing' }, { title: 'xiaomi' }],
    subItems: [
      [{ text: 'iphone 11' }, { text: 'iphone x' }, { text: 'iphone 8' }],
      [{ text: 'sumsing 20' }, { text: 'sumsing 10' }, { text: 'sumsing 9' }],
      [{ text: 'xiaomi 10' }, { text: 'xiaomi 9' }, { text: 'xiaomi 6' }],
    ],
  },
  methods: {
    tapSelect() {},
  },
});
```

## API

### treeSelect Props

### treeSelect Props

| 参数   | 说明              | 类型     | 默认值 | 版本 |
| ------ | ----------------- | -------- | ------ | ---- |
| iClass | 自定义 class 类名 | _string_ | -      | -    |

| items | 标题栏列表 | array | [] | - | - |
| subItems |选择栏列表 | array | [] | - | - |

### treeSelect Event

| 事件名   | 说明         | 参数   |
| -------- | ------------ | ------ |
| onSelect | 选中项时触发 | 选中项 |
npm package: @retailwe/ui-uploader
Description: ## 效果预览
Latest version: 0.0.26

# uploader 上传

## 效果预览

如果`/page/components-exp`文件夹存在，且`app.json`中`example`分包配置存在时，在小程序开发者工具中输入以下命令进入预览页面。

```js
wx.navigateTo({
  url: '/supermarket/pages/components-exp/uploader/index',
  complete() { console.log(arguments[0].errMsg) }
})
```

## 引入

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

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

## 代码演示

### 基础用法

```html
<uploader
  media-type="{{['image']}}"
  add-text="选择图片"
  limit="9"
  img-size-limit="{{100*1024}}"
  bindchoose="onChoose"
  bindchoosefailed="onChooseFailed"
  binddelete="onDelete"
></uploader>
```

## API

### uploader Props

| 参数 | 说明 | 类型 | 默认值 | 版本 |
|-----------|-----------|-----------|-------------|-------------|
| limit | 最多可上传图片数 | *number* | `9` | - |
| files | 原有图片列表 | *array* | `[]` | - |
| videoDuration | 视频最大录制长度 | *number* | `10` | - |
| addIcon | 添加按钮icon | *string* | `camera` | - |
| addText | 添加按钮文本 | *string* | `添加` | - |
| mediaType | 支持上传的文件类型，图片或视频 | *array* | `['image', 'video']` | - |
| sourceType | 文件获取方式，相册/相机，详细请参考小程序官方文档 | *array* | `['album', 'camera']` | - |
| sizeType | 文件大小，详细请参考小程序官方文档 | *array* | `['original', 'compressed']` | - |
| ImgSizeLimit | 图片文件大小限制 | *number* | `0` | - |
| videoSizeLimit | 视频文件大小限制 | *number* | `0` | - |

files的结构
| path | 文件url/路径 | *string* | - | - |
| size | 文件大小 | *string* | - | - |

### uploader Event

| 事件名 | 说明 | 参数 |
|------|------|------|
| choose | 选择文件后触发 | 本次选择的文件列表，形如：`[{files: path: '', size: 0}]` |
| choosefailed | 文件选择失败/取消文件选择时触发 | err，错误原因 |
| delete | 删除已选文件时触发，返回被删除文件的索引 | `{index}` |

### uploader 外部样式类

| 类名 | 说明 |
|-----------|-----------|
| wr-class | 控件每一项根节点样式类 |