# miniprogram-component-plus

**Repository Path**: hihopeorg/miniprogram-component-plus

## Basic Information

- **Project Name**: miniprogram-component-plus
- **Description**: 扩展功能组件库
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-10-13
- **Last Updated**: 2022-05-18

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# miniprogram-component-plus

## 简介

> miniprogram-component-plus是扩展功能组件库


<img src="screenshot/miniprogram.gif"/>

## 下载安装

```shell
npm install @ohos/miniprogram-component-plus --save
```
OpenHarmony npm环境配置等更多内容，请参考 [如何安装OpenHarmony npm包](https://gitee.com/openharmony-tpc/docs/blob/master/OpenHarmony_npm_usage.md) 。


## 使用说明

 1、视频滑动切换组件，可实现类似微视无限视频列表效果
 ```
   <mp-video-swiper
           class="video-swiper"
           video-list="{{ videoList }}"
           @play="onPlay"
           @pause="onPause"
           @timeupdate="onTimeUpdate"
           @ended="onEnded"
           @error="onError"
           @waiting="onWaiting"
           @progress="onProgress"
           @loadedmetadata="onLoadedMetaData"
           >
   </mp-video-swiper>
 ```
 2、选项卡组件
 ```
    <mptabs
            tabs="{{ tabs }}"
            active-tab="{{ activeTab }}"
            swiper-class="weui-tabs-swiper"
            active-class="tab-bar-title__selected"
            @tab-click="TabCLick"
            @change="Change">
        <div for="{{tabs}}" slot="tab-content-h" class="tab-content">
            <text> {{$item}} </text>
        </div>
    </mptabs>   
 ```
 3、索引列表组件，可实现类似通讯录效果。组件内节点将被添加到列表上方
 ```
    <mp-index-list class="city__list" list="{{list}}" @choose="onChoose">
       <div class="page__hd">
         <text class="page__title">Index List</text>
         <text class="page__desc">类通讯录列表</text>
       </div>
    </mp-index-list>
 ```
4、可选文本组件。该组件有两种使用模式：长按出现选区，与浏览器默认效果一致；长按出现复制按钮，点击复制拷贝全部内容至剪贴板，常见于聊天对话框等场景
   ```
    <mp-select-text
          show-copy-btn="true"
          placement="{{$item.placement}}"
          value="{{$item.value}}"
          @copy="onCopy"
          on-document-tap="{{evt}}">
    </mp-select-text>     
   ```

## 兼容性
支持 OpenHarmony API version 8 及以上版本。

## 目录结构
````
|---- miniprogram-component-plus  
|     |---- entry  # 示例代码文件夹
|     |---- library  #库文件夹
|           |---- index.ets  # 对外接口
|           └─src/main/js
|              ├─col # col组件
|              ├─row # row组件
|              ├─index-list # index list组件
|              ├─mptabs # mptabs组件
|              ├─select-text # select-text组件
|              ├─video-swiper # video-swiper组件
|              └─vtabs # vtabs组件
|
|---- README.md  # 安装使用方法                    
````

## 贡献代码
使用过程中发现任何问题都可以提 [Issue](https://gitee.com/hihopeorg/miniprogram-component-plus/issues) 给我们，当然，我们也非常欢迎你给我们发 [PR](https://gitee.com/hihopeorg/miniprogram-component-plus/pulls) 。

## 开源协议
本项目基于 [MIT License](https://gitee.com/hihopeorg/miniprogram-component-plus/blob/master/LICENSE) ，请自由地享受和参与开源。