# popup-component

**Repository Path**: gqpSmile/popup-component

## Basic Information

- **Project Name**: popup-component
- **Description**: 微信小程序——自定义弹窗组件
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2019-11-21
- **Last Updated**: 2022-05-29

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# popup-component

#### 介绍
微信小程序——自定义弹窗组件

#### 软件架构
软件架构说明

#### 效果图

![](/images/popup.png)


#### 安装教程

​	下载项目后`微信开发工具或其他`打开即可

#### 使用说明

[使用自定义组件](https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/)

##### 使用自定义组件

1. 使用已注册的自定义组件前，首先要在页面的 `json` 文件中进行引用声明。此时需要提供每个自定义组件的标签名和对应的自定义组件文件路径：

   ```javascript
   {
       "usingComponents": {
           "my-popup": "/page/components/popup/popup"
       }
   }
   ```

2. 在页面的 `wxml` 中就可以像使用基础组件一样使用自定义组件。节点名即自定义组件的标签名，节点属性即传递给组件的属性值。

   ```html
   <!-- 使用自定义弹窗组件 -->
   <my-popup id="popup"
       bind:error= "_error"
       bind:success= "_success"
       content= "{{popupContent}}"
       desc="{{popupDesc}}"
       my-class="red-text"
       isShowBtn= "{{isShowBtn}}"
       >
   
       <text>插入slot中【根据需求】</text>
   </my-popup>
   ```

3. 在页面`js`中`获取组件实例`， 并传递相关属性及方法实现。

   * 在`onReady()`方法中获取组件实例

   ```javascript
   // 获取popup组件, 调用组件的方法
   this.popup = this.selectComponent('#popup');
   ```

   * 在`data`中定义属性【动态更改属性值】

   ```javascript
   data: {
       isShowBtn: false, //是否显示取消按钮
       popupContent: '微信小程序自定义组件？', //内容
       popupDesc: '', //描述
   },
   ```

   * 定义`显示、关闭弹窗`相关方法

   ```javascript
   /**
   * 取消
   */
   _error: function () {
       this.popup.hidePopup();
   },
   
   /**
   * 确认
   */
   _success: function () {
       this.popup.showPopup();
       console.log("处理逻辑。。。。。。");
   },
   
   /**
   * 显示弹窗事件
   */
   showPopup: function () {
       this.popup.showPopup();
   }
   ```



#### 参与贡献

1.  Fork 本仓库
2.  新建 Feat_xxx 分支
3.  提交代码
4.  新建 Pull Request