# wm-components

**Repository Path**: hihopeorg/wm-components

## Basic Information

- **Project Name**: wm-components
- **Description**: 商品列表、抽奖、车牌号专属键盘的样式组件库
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

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

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# wm-components
## 简介
>商品列表、抽奖、车牌号专属键盘

## 效果展示
![效果展示](screenshot/sample1.gif)
![效果展示](screenshot/sample2.gif)
![效果展示](screenshot/sample3.gif)
![效果展示](screenshot/sample4.gif)

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


## 使用说明

 ```
 a、抽奖小游戏
    <element name='luck-draw' src="wm_components/src/main/js/components/luck-draw/luck-draw"></element>
    <luck-draw has-result="{{hasResult}}" is-win-prize="{{isWinPrize}}" @get-result="handleLuckDraw"></luck-draw>

 b、商品列表竖版
    <element name='goods-list' src='wm_components/src/main/js/components/goods-list/goods-list'></element>
    <div class='goods-list-box' style="flex-direction: column;background-color: #f0f0f0;height: 100%;">
      <block for="{{item in goodsList}}" data-key="{{item.id}}">
          <goods-list goods-info="{{item}}" add-image="{{addImg}}" @event-type="handleClick"></goods-list>
      </block>
    </div>

 c、商品列表横版
    <element name='goods-item' src="wm_components/src/main/js/components/goods-item/goods-item"></element>
    <div class='goods-item-box' style="background-color: #f0f0f0;height: 100%;">
      <block for="{{item in goodsList}}" data-key="{{item.id}}">
          <goods-item goods-info="{{item}}" add-image="{{addImg}}" @event-type="handleClick"></goods-item>
      </block>
    </div>

 d、车牌号专属键盘
    <element name='plate-number-keyboard' src="wm_components/src/main/js/components/plate-number-keyboard/plate-number-keyboard"></element>
    <div id="root" style="flex-direction: column;background-color: #f0f0f0;">
        <input id="input" style="border-radius: 0px;background-color: #00000000;" focusable="true" placeholder="请输入车牌号" on:click="handleFocus" data-from="input" value="{{plateNumber}}" type="text" ></input>
        <plate-number-keyboard is-show="{{showKeyboard}}" @close-keyboard="closeKeyboardDo" @get-result="setNumber" init-value="{{plateNumber}}"></plate-number-keyboard>
    </div>
 ```



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

## 目录结构
```
|---- wm-components 
|     |---- entry  # 示例代码文件夹
|     |---- wm-components  # wemark库文件夹
|        |---- components  # 组件代码目录
|                   |---- goods-item  # 商品列表横版
|                   |---- goods-list  # 商品列表竖版
|                   |---- luck-draw   # 抽奖小游戏 
|                   |---- plate-number-keyboard  # 车牌号专属键盘          
|     |---- README.MD  # 安装使用方法
```

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