微信小程序之自定义组件toast

最近在开发小程序，毕竟第一次开发，什么都是重头来，不过好在文档什么的都很详细，不过踩坑还是必须的，今天踩坑就是小程序的toast组件。在开发项目的时候，toast提示是不可避免的，好在小程序也有相对的组件，在使用工具开发的时候没发现什么问题，但在真机上使用的时候，会发现toast提示文字过多的时候，超过两行的文字会被遮住。怎么办呢？文档上也有说最多只能七个字或者两行。这个时候只能自己写了。下面是组件代码：
toast.js

let toast_timer = null;

Component({
    /**
     * 组件的属性列表
     */
    properties: {
            title: {
                type: String,
                value: ''
            },
            toastType: {
                type: String,
                value: 'default', // default || success || warning || error || loading
            },
            image: {
                type: String,
                value: ''
            },
            hidden: {
                type: Boolean,
                value: true
            },
            duration: {  
                type: Number,
                value: 1.5
            },
            durationCustom: {  //是否需要自定义弹窗时间，默认会根据弹出内容的长度大小来控制显示时间
                type: Boolean,
                value: false
            },
            textPosition:{
                type: String,
                value:'center'
            }
    },

    /**
     * 组件的初始数据
     */
    data: {
        
    },

    /**
     * 组件的方法列表
     */
    methods: {

        showToast: function(message) {
            let toastMessage = '';
            const { title, durationCustom, duration } = this.data;
            if (message) {
                toastMessage = message;
            }else {
                toastMessage = title;
            }
            this.setData({
                hidden: false,
                title: toastMessage
            });

            if (toast_timer) {
                clearTimeout(toast_timer);
            }
            let durationValue = duration;
            if (!durationCustom) {
                // 根据提示信息设置动画时间，最小1s,最大5s
                durationValue = 5;
                let accurateValue = title.length * 0.06 + 0.5;
                durationValue = (durationValue > accurateValue ? accurateValue : durationValue) * 1000;
                if (durationValue < 1000) {
                    durationValue = 1000;
                }
            }
            const me = this;
            toast_timer = setTimeout(() => {
                me.hideToast();
                toast_timer = null;
            }, durationValue);
        },

        hideToast: function() {
            this.setData({
                hidden: true,
            });
        },

        doNothing: function () {
            //阻止点击事件渗透
        },
    }
})

toast.wxml ps:这里目前只写了默认提示，预留了其他情况提示坑位

<view class='toastMask' hidden='{{hidden}}' catchtap='hideToast' catchtouchmove='doNothing' catchlongtap='doNothing'>
    <view class='toastBody {{textPosition}}' catchtap='doNothing'>
        <block wx:if='{{toastType === "default"}}'>
            <rich-text class='toast_content_text'  nodes="{{title}}"></rich-text> 
        </block>

        <block wx:elif='{{toastType === "success"}}'>
            <!--暂未实现  -->
        </block>

        <block wx:elif='{{toastType === "warning"}}'>
            <!--暂未实现  -->
        </block>

        <block wx:elif='{{toastType === "error"}}'>
            <!--暂未实现  -->        
        </block>

        <block wx:elif='{{toastType === "loading"}}'>
            <!--暂未实现  -->
        </block>
    </view>
</view>

toast.wxss

.toastMask {
    position: fixed;  
    width: 100%;  
    height: 100%;  
    top: 0rpx;  
    left: 0rpx;  
    z-index: 1314;  
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.toastBody {
    max-width: 70%;
    background: rgba(0, 0, 0, 0.7);
    border-radius: 20rpx;
    padding: 10px 18px;
}

.toast_content_text {
    width: 100%;
    height: 100%;
    color: white;
    font-size: 24rpx;
    text-align: center;
}
.left{
    text-align: left;
}
.center{
    text-align: center;
}
.right{
    text-align: right;
}

toast.json

{
  "component": true,
  "usingComponents": {}
}

以上就是组件的全部代码！组件的引用在app.json中全局引用，无需每个文件引用。