微信小程序自定义弹窗组件

业务背景：弹窗有时字体较多，超过7个字，不适用wx.showToast.
在这里插入图片描述
组件代码

<view class="toast-box {{isShow? 'show':''}}" animation="{{animationData}}"><view class="toast-content" ><view class="toast-img"><block wx:if="{{type==='success'}}"><image class="toast-icon" src="/images/correct.png" /></block><block wx:if="{{type==='fail'}}"><image class="toast-icon" src="/images/warn.png" /></block></view><view class="toast-title">{{title}}</view><view style="width:100%;border-top: 1rpx solid #ddd;"></view><view bindtap="handleClose" style="width: 100%;text-align: center;color: #666;line-height: 80rpx;">确 定</view></view>
</view>

/* components/toast/toast.wxss */

.toast-box {position: fixed;left: 0;top: 0;width: 100vw;height: 100vh;z-index: 11;display: none;background: rgba(0, 0, 0, .6);opacity: 0;}.show{display: block;}.toast-content {position: absolute;left: 50%;top: 45%;width:600rpx;/*height: 250rpx;*/border-radius: 10rpx;box-sizing: bordre-box;transform: translate(-50%, -50%);background: white;}.toast-img{width: 100%;height: 100rpx;padding-top: 15rpx;box-sizing: bordre-box;text-align: center;}.toast-icon{width: 100rpx;height: 100rpx;}.toast-title {width: 100%;padding: 30rpx;line-height: 45rpx;color: #666;text-align: center;font-size: 28rpx;box-sizing: border-box;}

// components/toast/toast.js

Component({properties: {},data: {type: 'fail',title: '',isShow: false,animationData: ''},methods: {showToast: function (data) {const that = this;if (this._showTimer) {clearTimeout(this._showTimer)}if (this._animationTimer) {clearTimeout(this._animationTimer)}// display需要先设置为block之后，才能执行动画this.setData({title: data.title,type: data.type,isShow: true,});this._animationTimer = setTimeout(() => {const animation = wx.createAnimation({duration: 500,timingFunction: 'ease',delay: 0})animation.opacity(1).step();that.setData({animationData: animation.export(),})}, 50)this._showTimer = setTimeout(function () {that.hideToast();if (data.compelete && (typeof data.compelete === 'function')) {data.compelete()}}, data.duration)},handleClose(){this.hideToast();},hideToast: function () {if (this._hideTimer) {clearTimeout(this._hideTimer)}let animation = wx.createAnimation({duration: 200,timingFunction: 'ease',delay: 0})animation.opacity(0).step();this.setData({animationData: animation.export(),})this._hideTimer = setTimeout(() => {this.setData({isShow: false,})}, 0)}}})

引用部分

// json{"usingComponents": {"vas-toast": "../../components/toast/toast"}
}
// html
<vas-toast id='toast'></vas-toast>
jsonShow: function () {this.prompt = this.selectComponent("#toast");},
that.prompt.showToast({type: 'fail',title: res.data.errmsg,duration: 4000,compelete: function () {}})