1. First create a showToast folder
2.index.js
// components/showToast/index.js
Component({
/**
* 组件的属性列表
*/
properties: {
tips:String,
flag: {
type: Boolean,
value: false,
},
},
/**
* 组件的初始数据
*/
data: {
timer:null,
},
lifetimes:{
attached(){
console.log('出现');
if(this.data.timer){
return
}
this.data.timer=setTimeout(() => {
this.triggerEvent('closeShowToast')
}, 1500);
},
detached(){
clearTimeout()
this.data.timer=null
console.log('关闭');
}
},
/**
* 组件的方法列表
*/
methods: {
}
})
2.index.wxml
<view class="component-contain {
{ flag ? 'not-touch' : '' }}">
<view class="tips-area">{
{tips}}</view>
</view>3.index.wxss
/* components/showToast/index.wxss */
.component-contain{
position: fixed;
width: 100vw;
height: 100vh;
top: 0;
left: 0;
display: flex;
justify-content: center;
align-items: center;
z-index: 99999999;
}
.tips-area{
position: relative;
top: -50rpx;
max-width: 400rpx;
white-space: wrap;
background-color: rgba(0, 0, 0, 0.6);
color: #ffffff;
font-family: 'Noto-San';
border-radius: 20rpx;
font-size: 24rpx;
padding: 30rpx 20rpx;
text-align: center;
font-family: 'FZZhunYuan-director';
}
.not-touch {
pointer-events: none;
}4.index.json
{
"component": true,
"usingComponents": {}
}5. Reference this component on the page that needs to be used
<showToast wx:if="{
{showTips}}" tips="{
{toastTips}}" bindcloseShowToast="closeShowToast"></showToast>data: {
showTips: false,
toastTips: ''
},
// 关闭弹窗
closeShowToast() {
this.setData({
showTips: false,
toastTips: '',
})
},