open-index/open-npm huggingface dataset:
npm package: @hummer/vue-plugin-canvas
Description: ### 简介 &lt;ex-canvast&gt;是 Tenon 中画布组件，可用于绘制一些自定义图形，如：线段、矩形、圆形、椭圆、图片、文本等，从而实现复杂图形的展示。
Latest version: 0.6.0

# Tenon Vue Plugin Canvas
## &lt;ex-canvas&gt;

### 简介
&lt;ex-canvast&gt;是 Tenon 中画布组件，可用于绘制一些自定义图形，如：线段、矩形、圆形、椭圆、图片、文本等，从而实现复杂图形的展示。

### 属性

- 支持 [通用视图属性](https://hummer.didi.cn/doc#/zh-CN/normal_view_prop)。Canvas 组件自身相关的属性均是以方法调用的形式来进行设置的

### 样式

- 支持通用样式，可参考[样式介绍](https://hummer.didi.cn/doc-tenon#/zh-CN/basic_style)

### 方法
| 方法名     |   参数  |   返回值   | 说明 |
| :-------- | :--------:| :------: | :-------:|
|lineWidth| (widthValue: number) | void | 设置stroke的线粗细 |
|lineColor| (colorHex: number) | void | 设置stroke的线粗细 |
|lineCap| (value: number) | void | 设置线头样式 |
|lineJoin| (value: number) | void | 设置折线折点样式 |
|drawLine| (fraomX : number , fromY : number , toX : number , toY : number) | void | 根据入参，在起始点与终点之间画一条线段 |
|strokeRect| (x: number , y: number , w: number , h: number) | void | 画矩形 |
|strokeEllipse| (x: number , y: number , trailX: number , trailY: number) | void | 画椭圆 |
|strokeCircle| (x: number , y : number , radius: number) | void | 画圆形 |
|arc| (x: number , y: number , radius: number , startAngle: number , endAngle:number ,clockwise: boolean) | void | 画弧形 |
|fillColor| (colorHex: string) | void | 设置填充颜色 |
|fillRect| (x: number, y: number, w: number, h: number) | void | 填充矩形 |
|fillEllipse| (x: number, y: number, trailX: number, trailY: number) | void | 填充椭圆 |
|fillCircle| (x: number, y: number, radius: number) | void | 填充圆形 |
|fontSize| (size: number) | void | 设置绘制文本字号 |
|textColor| (colorHex: string) | void | 设置绘制文本字色 |
|fillText| (x: number, y: number, maxWidth: number) | void | 绘制文本 |
|drawImage| (src: string, x: number, y: number, width: number, height: number) | void | 绘制图片 |

### Vue示例
```
  <ex-canvas ref="canvas"></ex-canvas>
```
npm package: @hummer/vue-plugin-error-handler
Description: `Tenon Vue Plugin Error Handler` 用于全局捕获生产环境的 Error 信息，调用原生 API，统一上报给原生。 ### 简介 Error Handler 用于捕获生产环境中运行时 Error 信息，调用原生 API，统一上报给原生。 > 运行时错误，是指在 Vue 运行过程中发生的异常信息，主要包括生命周期处理、内部方法调用
Latest version: 0.6.0

# Tenon Vue Plugin Error Handler
`Tenon Vue Plugin Error Handler` 用于全局捕获生产环境的 Error 信息，调用原生 API，统一上报给原生。
### 简介
Error Handler 用于捕获生产环境中运行时 Error 信息，调用原生 API，统一上报给原生。
> 运行时错误，是指在 Vue 运行过程中发生的异常信息，主要包括生命周期处理、内部方法调用

> PS. 该插件无法捕获交互类错误，比如交互类事件的 Callback 函数，由原生调用的函数，异常由原生直接捕获。

### 使用方式
```javascript
import ErrorHandler from '@hummer/vue-plugin-error-handler';
Tenon.use(ErrorHandler);
```
npm package: @hummer/vue-plugin-list
Description: ### 简介 &lt;ex-list&gt;是 Tenon 中高性能的长列表组件
Latest version: 0.6.0

# Tenon Vue Plugin List
## &lt;ex-list&gt;

### 简介
&lt;ex-list&gt;是 Tenon 中高性能的长列表组件

### 属性

| 属性名     |     类型 |   默认值   | 说明 |
| :-------- | :--------:| :------: | :-------:|
| data | Array | [] | 绑定的数据结构|

### 样式

- 支持通用样式，可参考[样式介绍](https://hummer.didi.cn/doc-tenon#/zh-CN/basic_style)

### 方法
| 方法名     |   参数  |   返回值   | 说明 |
| :-------- | :--------:| :------: | :-------:|
|scrollToPosition| (position:number) | void | 滚动到指位置（position是索引）|
|stopPullRefresh| () | void | 结束下拉刷新 |
|stopLoadMore| (enabled: boolean) | void | 结束加载更多(enabled: 下次能否继续触发加载更多) |
|refresh| () | void | 手动触发拉新 |


### 事件
#### refresh 
下拉刷新事件

**@param(state)**
| 属性名 | 类型 | 说明 | 示例 |
| ---- | ---- | ---- | ---- |
| state | String | 刷新状态<br>状态说明:<br>0:初始状态/结束刷新<br/>1:开始下拉<br/>2:正在刷新 | `state: 1`| 

#### loadMore 
加载更多事件

**@param(state)**
| 属性名 | 类型 | 说明 | 示例 |
| ---- | ---- | ---- | ---- |
| state | String | 加载状态<br>状态说明:<br>0:初始状态/结束加载<br/>1:正在加载<br/>2:无更多数据 | `state: 1`| 

### Vue示例
```
  <ex-list
    class="list"
    :data="list"
    @refresh="handleRefresh"
    @loadMore="handleLoadMore"
  >
    <template v-slot:refresh>
      <view>
        <text>Refresh View</text>
      </view>
    </template>
    <template v-slot:loadmore>
      <view>
        <text>Load More View</text>
      </view>
    </template>
    <template v-slot:item="item">
      <view class="list-item" @tap="handleItemTap(item)">
        <text class="default-text">I Am Default View!</text>
      </view>
    </template>
  </ex-list>
```
npm package: @hummer/vue-plugin-popup
Description: ### 简介 &lt;ex-popup&gt;是 Tenon 中自定义弹窗组件
Latest version: 0.6.0

# Tenon Vue Plugin Popup
## &lt;ex-popup&gt;

### 简介
&lt;ex-popup&gt;是 Tenon 中自定义弹窗组件

### 属性

| 属性名     |     类型 |   默认值   | 说明 |
| :-------- | :--------:| :------: | :-------:|
| show | Boolean | false | 是否展示弹窗|

### 样式

- 支持通用样式，可参考[样式介绍](https://hummer.didi.cn/doc-tenon#/zh-CN/basic_style)
- 
### Vue 示例
```
  <ex-popup
    :show="showDialog"
  >
    <view>
      <text>我是一个全屏的弹窗</text>
    </view>
  </ex-popup>
```
npm package: @hummer/vue-plugin-viewpager
Description: ### 简介 &lt;ex-viewpager&gt;是 Tenon 中视图轮播组件
Latest version: 0.6.0

# Tenon Vue Plugin Viewpaer
## &lt;ex-viewpager&gt;

### 简介
&lt;ex-viewpager&gt;是 Tenon 中视图轮播组件

### 属性

| 属性名     |     类型 |   默认值   | 说明 |
| :-------- | :--------:| :------: | :-------:|
| data | Array | [] | 绑定的数据结构|
| itemSpacing  |   Number|String |  0  | 两个page之间的距离 | 
| edgeSpacing  |   Number|String |  0  | 正中间的page离手机边缘的距离（item宽度 = ViewPager.width - edgeSpacing * 2）| 
| scaleFactor  |   Number |  1  | 前后Item放缩的比例 | 
| alphaFactor  |   Number |  1  | 前后Item透明度的比例 | 
| canLoop  |   Boolean |  false  | 是否可以无限循环 | 
| autoPlay  |   Boolean |  false  | 是否自动播放 | 
| loopInterval  |   Number |  0  | 自动轮播的时间间隔，单位ms（0时autoPlay失效） | 

### 样式

- 通用样式，可参考[样式介绍](https://hummer.didi.cn/doc-tenon#/zh-CN/basic_style)

### 事件
#### itemClick 
备注：View Item点击事件

参数：**@param(position)**
| 属性名 | 类型 | 说明 | 示例 |
| ---- | ---- | ---- | ---- |
| position | Number | 当前索引 | `position:0`| 

#### pageChange 
备注：页面改动事件

参数：**@param(current,total)**
| 属性名 | 类型 | 说明 | 示例 |
| ---- | ---- | ---- | ---- |
| current | Number | 当前索引 | `current:0`| 
| total | Number | 总页数 | `total:0`| 

#### pageScroll 
备注：页面改动事件

参数：**@param(position,percent)**
| 属性名 | 类型 | 说明 | 示例 |
| ---- | ---- | ---- | ---- |
| position | Number | 当前索引 | `position:0`| 
| percent | Number | 当前滚动的百分比（0~1） | `percent:0`| 

### Vue示例
```
  <ex-viewpager
    class="banner"
    :list="list"
    :itemSpacing="10"
    :edgeSpacing="50"
    :scaleFactor="0.99"
    :alphaFactor="1"
    :canLoop="true"
    :autoPlay="true"
    :loopInterval="2000"
    @itemClick="handleItemClick"
    @pageChange="handlePageChange"
    @pageScroll="handlePageScroll"
  >
    <template v-slot:item="item">
      <view class="banner-item"  @tap="handleClickTap(item)">
        <image class="banner-image" :src="item.data.url"></image>
      </view>
    </template>
  </ex-viewpager>
```
npm package: @hummer/vue-preset-base
Description: 包含 Hummer 支持的原生组件的拓展
Latest version: 0.6.0

# Tenon Vue 基础插件集
包含 Hummer 支持的原生组件的拓展

### 插件
#### vue-plugin-list
长列表组件
#### vue-plugin-popup
弹窗组件
#### vue-plugin-viewpager
轮播组件