我们想将  https://www.xiaohewan.com/article/show?id=88 这文章中的弹出框进行封装。

把上述代码封装成一个小程序组件需要以下步骤：

1. 在 `components` 文件夹下创建一个名为 `popup` 的文件夹，包含 `popup.wxml`、`popup.wxss`、`popup.js` 和 `popup.json` 四个文件。

2. 在 `popup.wxml` 文件中编写弹出页的模板代码：

```html
<template name="popup">
<view class="popup" wx:if="{{show}}">
<!-- 弹出页内容 -->
<view class="content">
{{slot}}
<button bindtap="hidePopup">关闭</button>
</view>
</view>
</template>
```

这里使用了小程序的 `slot` 模板标签来定义一个插槽，以便在使用组件时动态填充弹出页的内容。

3. 在 `popup.js` 文件中编写弹出页组件的逻辑代码：

```javascript
Component({
properties: {},

data: {
show: false // 控制弹出页是否显示
},

methods: {
// 点击按钮，显示弹出页
showPopup: function() {
this.setData({ show: true });
},

// 点击关闭按钮，隐藏弹出页
hidePopup: function() {
this.setData({ show: false });
}
}
})
```

4. 在使用弹出页组件的页面中引入该组件：

```html
<!-- 引入 popup 组件 -->
<import src="../../components/popup/popup.wxml"/>

<!-- 使用 popup 组件 -->
<template is="popup" data="{{show:show}}" bind:hidePopup="hidePopup">
<!-- 弹出页内容 -->
<view class="content">
<text>这里是弹出页的内容</text>
</view>
</template>

<!-- 按钮 -->
<button bindtap="showPopup">点击弹出</button>
```

这里使用 `import` 标签引入 `popup` 组件的模板，然后用 `template` 标签包含需要在弹出页中显示的内容。通过 `data` 属性和绑定的 `showPopup` 和 `hidePopup` 方法，将组件的数据和事件传递给页面中的代码。

5. 在 `popup.wxss` 中设置组件的样式：

```css
.popup {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
z-index: 9999;
}

.content {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background-color: #fff;
padding: 20rpx;
}
```

这样，您就可以通过在页面中使用 `<template is="popup" data="{{...}}"/>` 的方式来创建弹出页组件，并将组件显示和隐藏的操作交给组件内部处理了。

作者：老A
来源：嘻吖仔
原文：http://www.xiaohewan.com/article/show?id=89
版权声明：本文为作者原创文章，转载请附上文章链接！