文字超出限制在末尾加省略号，showToast消息提示接口,在图片未能正确加载时 显

这几天我根据wx.showToast接口提供的参数，跟着写了个消息提醒模板，

• 1、如果没有指定icon图标地址，那么就是单纯的显示文字提示，否则就是图标+文字的模式，这时候就要确保icon指向的图片地址是正确的啦。

• 2、如果没有指定duration提示的延迟时间，默认是1.5s，而我设置的最大值10s是不会自动隐藏消息提示的，除非手动hideToast. 单位：毫秒

• 3、如果没有指定mask遮罩，默认是跟着显示的，防止触摸穿透

• 4、如果没有指定cb回调函数，默认直接显示消息提醒，否则可以在等消息提示结束后即刻处理一些其他业务：例如地址跳转，改变订单状态等等

以下是整个模板代码结构：

showToast.wxml：

1. <template name="showToast">
2. <block wx:if="{{showToast.isShow? showToast.isShow: false}}">
3. <view class="toast-bg" wx:if="{{showToast.mask==false? false : true}}"></view>
4. <view class="toast-center">
5. <view class="toast">
6. <image class="toast-icon" src="{{showToast.icon}}" mode="scaleToFill" wx:if="{{showToast.icon}}" />
7. <text class="toast-text">{{showToast.title}}</text>
8. </view>
9. </view>
10. </block>
11. </template>

showToast.wxss：

1. /*showToast*/
2. .toast-bg {
3. position: fixed;
4. top: 0;
5. bottom: 0;
6. z-index: 999999;
7. width: 100%;
8. height: 100%;
9. background: rgba(0, 0, 0, .2);
10. }
11. /*水平居中必备样式*/
12. .toast-center {
13. position: fixed;
14. z-index: 9999999;
15. width: 100%;
16. height: 100%;
17. text-align: center;
18. }
19. .toast {
20. display: inline-block;
21. padding: 20rpx 40rpx;
22. max-width: 600rpx;
23. font-size: 28rpx;
24. color: #fff;
25. background: rgba(0, 0, 0, .5);
26. border-radius: 10rpx;
27. text-align: center;
28. }
29. /*垂直居中必备样式*/
30. .toast-center::after{
31. content: '';
32. display: inline-block;
33. width: 0;
34. height: 100%;
35. vertical-align: middle;
36. }
37. .toast .toast-icon {
38. display: block;
39. margin: 0 auto 10rpx auto;
40. width: 50rpx;
41. height: 50rpx;
42. }

showToast.js：

1. /*
2. 显示toast提示
3. title: 提示的内容 必填
4. icon: 图标，//请指定正确的路径，选填
5. duration: 提示的延迟时间，单位毫秒，默认：1500, 10000永远存在除非手动清除 选填
6. mask: 是否显示透明蒙层，防止触摸穿透，默认：true 选填
7. cb: 接口调用成功的回调函数 选填