对于一些我们常用到自定义的样子和页面，可以将其进行封装成组件，方便我们使用时进行调用，节省重复代码。本文主要介绍将自定义弹框进行封装，在需要的页面中进行调用。
国际惯例：先上弹框样式
一个删除弹框，并且按钮上需绑定事件，在调用的页面中可进行触发。本文中我添加我再想想上的事件，另一按钮事件绑定相同，不一一赘述。
先来说组件部分：
1、新建组件文件，在根目录文件下新建components文件并在里面新建一个popup弹框文件，将WXML、JS、WXSS、JSON依次添加。当添加JSON时会报错，popup.json中添加"component": true，无需在app.json的pages:[]中添加页面路径。
2、在popup.wxml中写组件的页面
<view class="spec-panel">
<view class="spec-box">
<view class="spec-box-title">
<text>温馨提示</text>
</view>
<view>
<text class='font-size1'>确认删除浏览记录吗？</text>
</view>
<view class='horizontal'>
<view class='item padding-top-10' >
<text class='font-size2'>确认删除</text>
</view>
<view class='item style1' >
<text class='style2' bindtap="hideDel">我再想想</text>
</view>
</view>
</view>
<view class="spec-panel-bg" bindtap="hideDel" />
<slot />
</view>
3、popup.wxss样式
.spec-panel {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 5;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
transform: translate3d(0, 0, 0);
}
.spec-panel .spec-panel-bg {
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, .5);
position: absolute;
top: 0;
left: 0;
z-index: -1;
}
.spec-panel .spec-box {
width: 620rpx;
background-color: #fff;
padding: 40rpx;
border-radius: 5px;
box-sizing: border-box;
position: relative;
}
.spec-panel .spec-box .spec-box-title {
font-size: 18px;
font-weight: bold;
line-height: 1.5;
text-align: center;
color: #333;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
border-bottom: 1px solid #eee;
padding-bottom: 8px;
}
.horizontal{
display: flex;
flex-direction: row;
}
.item{
flex: 1;
}
.padding-top-10{
padding: 10px 0 0 0;
}
.style1{
padding: 10px 0 0 0;
text-align: right;
}
.style2{
background: #FF3766;
border: 1px solid #FF3766;
padding: 5px 10px;
border-radius: 5px;
color: #fff;
font-size: 14px;
}
.font-size1{
font-size: 0.8rem;
color: #000;
}
.font-size2{
border: 1px solid #FF3766;
padding: 5px 10px;
border-radius: 5px;
color: #FF3766;
font-size: 14px;
}
4、popup.js
Component({
options: {
multipleSlots: true // 在组件定义时的选项中启用多slot支持
},
/**
* 组件的属性列表
*/
properties: {
},
/**
* 组件的初始数据
*/
data: {
},
/**
* 组件的方法列表
*/
methods: {
//隐藏删除弹框
hideDel () {
const myEventDetail = {} // detail对象，提供给事件监听函数
const myEventOption = {} // 触发事件的选项
this.triggerEvent('myevent', myEventDetail, myEventOption)
},
}
})
页面调用部分：
1、在需调用页面的JSON文件中使用组件将组件路径啊写上
2、调用页面的wxml部分
<view wx:if="{{isShow}}">
<!-- 当popup.js中的myevent事件触发时，会触发调用页面中的onMyEvent事件-->
<!-- <component-popup bind:myevent="onMyEvent"> -->
<component-popup bindmyevent="onMyEvent">
</component-popup>
</view>
3、调用页面的JS
data: {
isShow:false,
},
onMyEvent () {
this.setData({
isShow: false
})
}
