小程序自定义showToast组件

预先说明：我用的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方法，把想要展示的标题、内容、图标和颜色作为参数传进去就可以了。