小程序封装原生弹框组件（一个弹框，点击确定关闭弹框，有需要的直接复制哦）
<!-- 成功后弹框 -->
<van-popup show="{{ onePop }}" round >
<view class="succpop">
<view class="pop_title">温馨提示</view>
<view class="pop_content">{{onePopMsg}}</view>
<view class="bott_btn" bindtap="closeSUcc">确定</view>
</view>
</van-popup>// components/pop/pop.js
Component({
/**
* 组件的属性列表
*/
properties: {
onePop:Boolean,
onePopMsg:String,
},
/**
* 组件的初始数据
*/
data: {
},
/**
* 组件的方法列表
*/
methods: {
// 多个按钮
closeSUcc(){
this.setData({
succePop:false
})
},
}
})
.succpop {
width: 707rpx;
}
.succpop .pop_title {
text-align: center;
margin: 40rpx 0;
font-size: 37rpx;
font-family: PingFang SC;
font-weight: 500;
color: #333333;
}
.succpop .pop_content {
text-align: center;
margin: 65rpx 0 65rpx 0;
font-size: 31rpx;
font-family: Source Han Sans CN;
font-weight: 400;
color: #333333;
padding: 0 40rpx;
}
.succpop .bott_btn {
width: 520rpx;
height: 88rpx;
background: #FE9804;
box-shadow: 0rpx 10rpx 10rpx 0rpx rgba(0,0,0,0.1);
font-size: 41rpx;
font-family: Source Han Sans CN;
font-weight: 500;
color: #ffffff;
line-height: 88rpx;
text-align: center;
border-radius: 50rpx;
margin-left: 50%;
transform: translateX(-50%);
margin-top: 30rpx;
margin-bottom: 40rpx;
}
上面是组件的内容，下面是引用方法
首先第一步在app.json或者单文件json文件引入
"pop-one":"/components/pop-one/pop-one"我用的比较多就在app.json引入的
下面是文件使用方法:文章来源：https://www.toymoban.com/news/detail-516717.html
<pop-one succePop="{{succePop}}" successMessage="{{successMessage}}"></pop-one> succePop:true,
successMessage:'你好'只需要子啊data中控制这两个属性就可以了，喜欢的点个赞哦文章来源地址https://www.toymoban.com/news/detail-516717.html
到了这里，关于微信小程序（原生）封装弹框组件的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
