# moyv-components

**Repository Path**: CoderMoyv/moyv-components

## Basic Information

- **Project Name**: moyv-components
- **Description**: 摸鱼微信小程序组件库
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2021-08-03
- **Last Updated**: 2022-05-03

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 摸鱼微信小程序组件库

## 使用方式

`git clone https://gitee.com/CoderMoyv/moyv-components.git 
`

或者
直接下载ZIP

下载后复制`moyv-components`文件夹到您的小程序项目即可使用，引入方式可参考demo页面，每个组件都有对应的demo

## 组件目录

### 图片懒加载
#### 引入
```json
 "usingComponents": {
    "lazy-image": "/moyv-components/lazy-image/index"
  }
```
#### 使用
```html
<lazy-image image-class="imageClass"
 	src="https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg"
 	mode="aspectFill" show-menu-by-longpress>
</lazy-image>
```
#### 属性
|  属性   | 类型  |  默认值  |  必填  |  说明 |
|  ----  | ----  | ---- | ---- | ---- |
| src| string | - | 是 | 图片资源地址 |
| image-class | string | - | 否 | 图片样式类名 |
| mode  | string| scaleToFill | 否 | 图片裁剪、缩放的模式|
| show-menu-by-longpres | boolean | false | 否 | 开启长按图片显示识别小程序码菜单 |

### 弹窗
#### 引入
```json
 "usingComponents": {
    "popup":"/moyv-components/popup/index"
  }
```
#### 使用
```html
<view bindtap="openPopup">
  打开
</view>
<popup show="{{popupShow}}" bind:click-mask="closePopup">
  <view>
    内容
  </view>
</popup>
```
```js
Page({
  data: {
    popupShow: false,
  },
  /**
   * 打开弹窗
   */
  openPopup() {
    this.setData({ popupShow: true });
  },
  /**
   * 关闭弹窗
   */
  closePopup() {
    this.setData({ popupShow: false });
  }
})
```
#### 属性
|  属性   | 类型  |  默认值  |  必填  |  说明 |
|  ----  | ----  | ---- | ---- | ---- |
| show| boolean | false | 否 | 是否显示弹窗 |
| position | string | `center` | 否 | 弹出位置，可选值为 `center` `top` `bottom` `right` `left` |
| z-index  | number| 1080 | 否 | z-index 层级|
| safe-area-inset-bottom | boolean | true | 否|是否为 iPhone全面屏手机 留出底部安全距离 ( 仅position为`bottom`有效 ) |
| popup-style  | string| - | 否 | 自定义弹窗样式|
| mask-style  | string| - | 否 | 自定义遮罩层样式|