预先说明：我用的colorUI的icon，如果没有用color UI，你可能需要引入一下color UI或者修改一下。

情况

众所周知，小程序的消息提示框带上图标只能显示7个汉字，很不方便。

在做小程序的时候发现这个问题，连返回的错误消息都输出不完，要你何用。。因此自己整一个消息组件。

效果展示：

代码：

toast.wxml

<view class="toast-mask">
  <view class="toast">
    <view class="toast-icon cuIcon-{
     
     {icon}}fill line-{
     
     {iconColor}} text-center"></view>
    <view class="toast-title">{
   
   {title}}</view>
    <view class="toast-content">{
   
   {content}}</view>
  </view>
</view>

toast.wxss

@import '/colorui/main.wxss';
@import '/colorui/icon.wxss';

.toast-mask {
    
    
  position: fixed;
  z-index: 9999;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  /* background-color: rgba(0, 0, 0, 0.6); */
  display: flex;
  justify-content: center;
  align-items: center;
}

.toast {
    
    
  color: #fff;
  background: rgba(0, 0, 0, 0.7);
  border-radius: 4px;
  box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
  align-items: center; 
  max-width: 65%;
  min-width: 45%;
} 

.toast-icon {
    
    
  background: #fff;
  margin:20rpx 0;
  font-size: 120rpx;
  width: 100%;
  border-radius: 4rpx;
}

.toast-title {
    
    
  width: 80%;
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 10rpx;
  text-align: center;
}

.toast-content {
    
    
  width: 90%;
  font-size: 28rpx;
  margin-bottom: 28rpx;
  text-align: center;
}

toast.js

Component({
    
    
  properties: {
    
    
    icon: {
    
    
      type: String,
      value: ''
    },
    iconColor: {
    
    
      type: String,
      value: 'black'
    },
    title: {
    
    
      type: String,
      value: ''
    },
    content: {
    
    
      type: String,
      value: ''
    }
  },
  methods: {
    
    
    hideToast() {
    
    
      this.triggerEvent('hideToast')
    }
  }
})

toast.json

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

使用方法：

假设要在“user”这个页面中使用

1. 复制上面的代码，创建好toast组件

2. 在的user.json中引入toast组件

   {
         
         
     "usingComponents": {
         
         
       "toast": "/components/toast/toast"
     }
   }
   

3. 在user.wxml使用toast组件

   <toast wx:if="{
          
          {showToast}}" icon="{
          
          {toastIcon}}" iconColor="{
          
          {toastColor}}" title="{
          
          {toastTitle}}" content="{
          
          {toastContent}}" bind:hideToast="onHideToast"></toast>
   

4. 在user.js的data中加上如下变量

       showToast: false, // 是否显示toast
       toastIcon: 'warn', // toast图标
       toastColor:'yellow', //图标颜色
       toastTitle: '测试标题',
       toastContent: '测试内容测试内容',
   

5. 在user.js加上如下方法

   onShowToast(icon,color,title,content) {
         
         
       this.setData({
         
         
         showToast: true,
         toastIcon: icon,
         toastColor: color,
         toastTitle: title,
         toastContent: content
       })
     },
     onHideToast() {
         
         
       this.setData({
         
         
         showToast: false
       })
     },
     fastToast(icon,color,title,content){
         
         
       var that = this;
       that.onShowToast(icon,color,title,content);
       setTimeout(()=>{
         
         
         that.onHideToast()
       },2000);
     },
   

到此结束，想要调用的时候直接调用fastToast方法，把想要展示的标题、内容、图标和颜色作为参数传进去就可以了。