# iview-weapp

**Repository Path**: hihopeorg/iview-weapp

## Basic Information

- **Project Name**: iview-weapp
- **Description**: 基于小程序去适配ohos的UI组件库
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-10-13
- **Last Updated**: 2024-06-04

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# iview-Weapp

本项目是基于开源项目iview-Weapp进行ohos化的移植和开发的，可以通过项目标签以及github地址（https://github.com/TalkingData/iview-weapp）追踪到原项目版本

#### 项目介绍

- iview-Weapp项目名称：iview-Weapp

- 所属系列：ohos的第三方组件适配移植

- 功能：提供自定义的高质量组件

- 项目移植状态：完成

- 调用差异：无

- 项目作者和维护人：hihope

- 联系方式：hihope@hoperun.com

- 原项目Doc地址：https://github.com/TalkingData/iview-weapp

- 原项目基线版本：v2.0.0

- 编程语言：js

#### 效果展示
![showcase](screenShot/showcase.gif)

#### 安装教程

方法1.

1. 下载iview-Weapp源码。
2. 拷贝iview-Weapp源码中iview目录代码到default目录下。
3. 在demo中引用。
#### 使用说明

##### 1.html组件依赖

######    layout栅格布局使用样例

   我们定义了两个概念，行`row`和列`col`，具体使用方法如下：

   - 使用`i-row`在水平方向创建一行
   - 将一组`i-col`插入在`i-row`中
   - 在每个`i-col`中，键入自己的内容
   - 通过设置`i-col`的`span`参数，指定跨越的范围，其范围是1到24
   - 每个`i-row`中的`i-col`总和应该为24

   ```
   <element src="../../iview/xwrow/index.hml" name="i-row"></element>
   <element src="../../iview/xwcol/index.hml" name="i-col"></element>
   <element src="../../iview/xwpanel/index.hml" name="i-panel"></element>
	<div class="container">
       <i-panel title="基础布局" hide-border="true"></i-panel>
       <i-row class="demo-row">
           <i-col span="24" class="demo-col"><text class="textContent">24：100%</text></i-col>
       </i-row>
       <i-row class="demo-row-light">
           <i-col span="12" class="demo-col"><text class="textContent">12：50%</text></i-col>
           <i-col span="12" class="demo-col-highlight"><text class="textContent">12：50%</text></i-col>
       </i-row>
       <i-row class="demo-row">
           <i-col span="8" class="demo-col"><text class="textContent">8：33.33%</text></i-col>
           <i-col span="8" class="demo-col-light"><text class="textContent">8：33.33%</text></i-col>
           <i-col span="8" class="demo-col"><text class="textContent">8：33.33%</text></i-col>
       </i-row>
       <i-row class="demo-row-light">
           <i-col span="6" class="demo-col"><text class="textContent">6：25%</text></i-col>
           <i-col span="6" class="demo-col-highlight"><text class="textContent">6：25%</text></i-col>
           <i-col span="6" class="demo-col"><text class="textContent">6：25%</text></i-col>
           <i-col span="6" class="demo-col-highlight"><text class="textContent">6：25%</text></i-col>
       </i-row>
       <i-row class="demo-row">
           <i-col span="16" class="demo-col"><text class="textContent">16：66.66%</text></i-col>
           <i-col span="8" class="demo-col-light"><text class="textContent">8：33.33%</text></i-col>
       </i-row>
       <i-panel title="左右偏移" hide-border="true"></i-panel>
       <i-row class="row-class">
           <i-col span="8" class="col-class"><text>col-8</text></i-col>
           <i-col span="8" offset="8" class="col-class light"><text >col-8 | offset-8</text></i-col>
       </i-row>
       <i-row class="row-class">
           <i-col span="6" offset="8" class="col-class"><text >col-6 | offset-8</text></i-col>
           <i-col span="6" offset="4" class="col-class light"><text >col-6 | offset-4</text></i-col>
       </i-row>
       <i-row class="row-class">
           <i-col span="12" offset="8" class="col-class"><text>col-12 | offset-8</text></i-col>
       </i-row>
   </div>
   
   
   ```
   

###### color使用样例

 功能介绍：iView 推荐使用以下调色板的颜色作为设计和开发规范，以保证页面和组件之间的视觉一致。

   ```
   <element name="i-card" src="../../iview/xwcard/index.hml"></element>
   <div class="dis">
       <text class="itext">主色</text>
       <div class="container">
           <i-card color="#2d8cf0" class="color-item" >
               <text slot="content" style="font-size: 14px; color:white">Primary</text>
               <text slot="footer" class="color-item-content">#2d8cf0</text>
           </i-card>
           <i-card color="#5cadff" >
               <text slot="content" style="font-size: 14px; color:white">Light Primary</text>
               <text slot="footer" class="color-item-content">#5cadff</text>
           </i-card>
           <i-card color="#2b85e4">
               <text slot="content" style="font-size: 14px; color:white">Dark Primary</text>
               <text slot="footer"  class="color-item-content">#2b85e4</text>
           </i-card>
       </div>
       <text class="itext">辅助色</text>
       <div class="container">
           <i-card color="#19be6b" >
               <text slot="content" style="font-size: 14px; color:white">Success</text>
               <text slot="footer"  class="color-item-content">#19be6b</text>
           </i-card>
           <i-card color="#ff9900" >
               <text slot="content" style="font-size: 14px; color:white">Warning</text>
               <text slot="footer"  class="color-item-content">#ff9900</text>
           </i-card>
           <i-card color="#ed3f14" >
               <text slot="content" style="font-size: 14px; color:white">Error</text>
               <text slot="footer"  class="color-item-content">#ed3f14</text>
           </i-card>
       </div>
       <text class="itext">中性色</text>
       <div class="container">
           <i-card color="#1c2438" >
               <text slot="content" style="font-size: 14px; color:white">标题 Title</text>
               <text slot="footer"  class="color-item-content">#1c2438</text>
           </i-card>
           <i-card color="#495060" >
               <text slot="content" style="font-size: 14px; color:white">正文 Content</text>
               <text slot="footer"  class="color-item-content">#495060</text>
           </i-card>
           <i-card color="#ed3f14">
               <text slot="content" style="font-size: 14px; color:white">辅助 Sub Color</text>
               <text slot="footer"  class="color-item-content">#ed3f14</text>
           </i-card>
           <i-card color="#bbbec4">
               <text slot="content" style="font-size: 14px; color:white">失效 Disabled</text>
               <text slot="footer"  class="color-item-content">#bbbec4</text>
           </i-card>
           <i-card color="#dddee1">
               <text slot="content" style="font-size: 14px; color: #657180;">边框 Border</text>
               <text slot="footer"  class="color-item-content">#dddee1</text>
           </i-card>
           <i-card color="#e9eaec">
               <text slot="content" style="font-size: 14px; color: #657180;">分割线 Divider</text>
               <text slot="footer"  class="color-item-content">#e9eaec</text>
           </i-card>
           <i-card color="#f8f8f9">
               <text slot="content" style="font-size: 14px; color: #657180;">背景 Back</text>
               <text slot="footer"  class="color-item-content">#f8f8f9</text>
           </i-card>
       </div>
   </div>
   ```
######  page使用样例

 功能介绍：当数据量较多时，使用分页可以快速进行数据切换。

 ```
<div class="container {{ mode == 'number' ?'contain':'' }}" >
    <div class="i-page-prev" if="{{ mode === 'button' }}">
        <button class="i-page-button" onclick="handlePrev" disabled="{{ current === 1 }}">{{ prev }}</button>
    </div>

    <div class="i-page-number" if="{{ mode !== 'pointer' && !simple }}">
        <div>
            <text class="i-page-number-current">{{ current }}</text>
        </div>
        <text>/{{ total }}</text>
    </div>

    <div class="container" if="{{ mode === 'pointer' }}">
        <div class="i-page-pointer">
            <div for="{{ numTest }}" class="i-page-pointer-dot  {{ ($idx+1) == current ? 'i-dot-current' : '' }}"></div>
        </div>
    </div>

    <div class="i-page-next" if="{{ mode === 'button' }}">
        <button class="i-page-button" onclick="handleNext" disabled="{{ current == total }}">{{next}}</button>
    </div>
</div>

 ```

######   actionsheet动作面板使用样例

   功能介绍：从底部弹出的模态框，提供和当前场景相关的 2 个以上的操作动作，也支持提供标题和描述。内置固定的展示样式、不支持特别灵活的修改。 

```
<element name='i-button' src='../../iview/xwbutton/index.hml'></element>
<element src="../../iview/xwactionSheet/index.hml" name="i-action-sheet"></element>
<element src="../../iview/xwmessage/index.hml" name="i-message"></element>
<div >
    <div style="margin-top: 100px;flex-direction: column;">
        <i-button type="ghost" @bind-tap="handleOpen1">一般用法</i-button>
        <i-button type="ghost" @bind-tap="handleOpen2">带有提示、异步</i-button>
    </div>
    <i-action-sheet visible="{{ visible1 }}" actions="{{ actions1 }}" show-cancel="true" @bind-cancel="handleCancel1" @bind-tap="handleClickItem1" ></i-action-sheet>
    <i-action-sheet visible="{{ visible2 }}" actions="{{ actions2 }}" show-cancel="true" @bind-cancel="handleCancel2" @bind-tap="handleClickItem2" mask-closable="{{ false }}">
        <div slot="header" class="action-sheet">
            <div style="color: #444;font-size: 16px"><text>确定吗？</text></div>
            <text>删除后无法恢复哦</text>
        </div>
    </i-action-sheet>
    <i-message id="message"></i-message>
</div>

```

###### badge徽章使用样例

功能介绍：主要用于通知未读数的角标，提醒用户点击。

```
<element src="../../iview/xwbadge/index.hml" name="i-badge"></element>
<div class="container">
    <div class="contain">
        <i-badge dot="true">
            <text class="text1"></text>
        </i-badge>
    </div>
    <div class="contain">
        <i-badge count="3">
            <text class="text1"></text>
        </i-badge>
    </div>
    <div class="contain">
        <i-badge count="123"  overflow-count="100">
            <text class="text1"></text>
        </i-badge>
    </div>
    <div class="contain">
        <i-badge count="66">
        </i-badge>
    </div>
    <div class="contain">
        <i-badge count="66" color="green">
        </i-badge>
    </div>
</div>

```

###### switch开关使用样例

功能介绍：在两种状态间切换时用到的开关选择器。

```
<element src="../../iview/xwswitch/index.hml" name="i-switch"></element>
<element src="../../iview/xwpanel/index.hml" name="i-panel"></element>
<element src="../../iview/xwicon/index.hml" name="i-icon"></element>
<element src="../../iview/xwcell/index.hml" name="i-cell"></element>
<div class="container">
    <i-panel hide-border-top="true">
        <i-cell label="基本用法">
            <i-switch value="{{ switch1 }}" slot='content' @bind-change='bindChange'></i-switch>
        </i-cell>
        <i-cell label="自定义内容">
            <i-switch value="{{ switch1 }}" size="large" slot='content' @bind-change='bindChange'>
                <text slot='open'>开启</text>
                <text slot='close'>关闭</text>
            </i-switch>
        </i-cell>
        <i-cell label="图标">
            <i-switch value="{{ switch1 }}" slot='content' @bind-change='bindChange'>
                <i-icon type="right" slot="close" size="15" color="white"></i-icon>
                <i-icon type="close" slot="open" size="15" color="white"></i-icon>
            </i-switch>
        </i-cell>
        <i-cell label="禁止切换">
            <i-switch disabled='true' slot='content' @bind-change='bindChange'></i-switch>
        </i-cell>
    </i-panel>
</div>
```
##### 2.属性说明

layout栅格布局组件属性说明表
|属性|说明|类型|默认值|
|:-:|:-:|:-:|:--|
|span| 栅格的占位格数，可选值为0~24的整数|Number| - |
|offset|栅格左侧的间隔格数，间隔内不可以有栅格 |Number| - |

page组件属性说明表
|属性|说明|类型|默认值|
|:-:|:-:|:-:|:--|
|mode	|类型，可选值为 button、number、pointer|	String|	button|
|current	|当前页码	|Number	|1|
|total	|总页数	|Number	|0|
|simple	|是否隐藏数值	|Boolean	|false|
|prev   | 按钮内容    | String   | ''|
|next   | 按钮内容   |  String    | ''|

Page events 
|事件名	|说明	|返回值|
|:-:|:-:|:--|
|handleChange	|切换页码时触发，返回 prev 或 next	|{ type } |

actionSheet组件属性说明表
|属性|说明|类型|默认值| 
|:-:|:-:|:-:|:--|
|visible	|是否显示组件	|Boolean	|false|
|mask-closable	|点击遮罩层是否可以关闭组件	|Boolean	|true|
|show-cancel	|是否显示取消按钮	|Boolean	|false|
|cancel-text	|取消按钮的文案	|String	|取消|
|actions	|按钮组，具体项参照后面的表格	|Array	|[]|

ActionSheet events #
|事件名|	说明	|返回值|
|:-:|:-:|:--|
|handleClickItem |点击某个按钮时触发，返回按钮所在 actions 中的索引 |{ index }|
|handleClickMask	|点击关闭或遮罩层时触发	|-|

ActionSheet slot #
|名称	|说明|
|:-:|:--|
|header	|标题栏，可以添加提示信息|

ActionSheet actions #
|属性	|说明	|类型	|默认值|
|:-:|:-:|:-:|:--|
|name	|按钮文案	|String	|-|
|icon	|按钮图标	|String	|-|
|color	|按钮文字的颜色	|String	|-|
|loading	|按钮是否显示为加载中	|Boolean	|false|


badge组件属性说明表
|属性|说明|类型|默认值| 
|:-:|:-:|:-:|:--|
|count|大于 overflowCount 时，显示 ${overflowCount}+，为 0 时隐藏	|Number	|123|
|overflow-count	|展示封顶的数字值|	Number	|99|
|dot	|不展示数字，只有一个小红点，如需隐藏 dot ，需要设置 count 为 0	|Boolean	|false|
|color|右上角框的颜色 |String |''|


switch组件属性说明表
|属性|说明|类型|默认值| 
|:-:|:-:|:-:|:--|
|value	|指定当前是否选中	|Boolean	|false|
|size	|开关的尺寸，可选值为 large、small、default 或者不写。建议开关如果使用了2个汉字的文字，使用 large	|String	|default|
|disabled|	是否禁用开关|	Boolean	|false|
|name	|隐藏的 input 的 name 值	|String|	-|

Switch events #
|事件名|	说明	|返回值|
|:-:|:-:|:--|
|bindtoggle	|开关变化时触发，返回当前的状态	|{ value }|

Switch slot #
|名称|	说明|
|:-:|:--|
|open	|自定义显示打开时的内容|
|close	|自定义显示关闭时的内容|
  
## 兼容性

支持 OpenHarmony API version 8 及以上版本。

## 目录结构

```
├─entry      # 示例代码文件夹
├─README.md  # 安装使用方法
└─iviewWeapp
    └─src
        └─main
            ├─js
               ├─common   # 工具类与资源文件夹
               ├─components
                    └─dist      # 自定义组件文件夹
                        ├─xwactionSheet 
                        ├─xwalert
                        ├─xwavatar
                        ├─xwbadge
                        ├─xwbutton
                        ├─xwcard
                        ├─xwcell
                        ├─xwcheckbox
                        ├─xwcol
                        ├─xwcollapse
                        ├─xwcollapseitem
                        ├─xwcountdown
                        ├─xwdivider
                        ├─xwdrawer
                        ├─xwgrid
                        ├─xwgridicon
                        ├─xwgriditem
                        ├─xwgridlabel
                        ├─xwicon
                        ├─xwindex
                        ├─xwinput
                        ├─xwinputnumber
                        ├─xwloadmore
                        ├─xwmessage
                        ├─xwmodel
                        ├─xwnoticebar
                        ├─xwpage
                        ├─xwpanel
                        ├─xwprogress
                        ├─xwradio
                        ├─xwrate
                        ├─xwrow
                        ├─xwshadow
                        ├─xwspin
                        ├─xwstep
                        ├─xwsticky
                        ├─xwstickyitem
                        ├─xwswipeout
                        ├─xwswitch
                        ├─xwtabBar
                        ├─xwtabs
                        ├─xwtags
                        └─xwtoast
```

## 贡献代码

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

## 开源协议

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