微信小程序自定义toast多行文本提示 并配置全局使用

toast-text-more.wxml

// component/toast-text-more/toast-text-more.ts wt

let toastTimer = null;
Component({
  /**
   * 组件的属性列表
   */
  properties: {
  },

  /**
   * 组件的初始数据
   */
  data: {
    title: '提示',//默认显示的提示文本
    duration: '1000',//提示显示时间
    hidden: true,//是否显示
    isShowAllData: false//是否显示全部数据，默认false: 最多显示3行，显示不开显示...
  },
  lifetimes: {
    attached() {
      wx.$event.on('changeToastMore', this, this.showToast)
    },
    detached() {
      wx.$event.remove('changeToastMore', this)
    },
  },
  /**
   * 组件的方法列表
   */
  methods: {
    // 展示弹框
    showToast: function (options) {
      if (toastTimer) {
        clearTimeout(toastTimer);
      }
      this.setData({
        hidden: false,
        isShowAllData: options?.isShowAllData ?? this.data.isShowAllData,
        title: options?.title ?? this.data.title
      });

      let _this = this;
      toastTimer = setTimeout(() => {
        _this.hideToast();
        toastTimer = null;
      }, options?.duration ?? this.data.duration);
    },
    // 关掉弹框
    hideToast: function () {
      this.setData({
        hidden: true,
      });
    }
  }
})

/* component/toast-text-more/toast-text-more.less wt */

.toast-mask {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  .toast-body {
    position: absolute;
    top: 40%;
    max-width: 480rpx;
    background: #4c4c4c;
    border-radius: 16rpx;
    padding: 20rpx 30rpx;

    .toast-text {
      color: white;
      font-size: 32rpx;
      text-align: center;
    }

    .toast-all-text {
      display: -webkit-box;
      word-break: break-all;
      text-overflow: ellipsis;
      overflow: hidden;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3; //设置 需要显示的行数
    }
  }
}

toast-more-text.js是utils里的全局方法

//自定义toast 多行文本提示 全局事件
function showToastMore(options) {
  wx.$event.emit('changeToastMore', options);
}
wx.$showToastMore = showToastMore;
module.exports = wx.$showToastMore;

在app.js里全局引用

全局引用js文件.png

注意：eventBus文件没有放出来，见上一篇。
在你要用的页面的js里用法示例：

    wx.$showToastMore({
          title: '多行文本显示很多很多多行文本显示很多很多多行文本显示很多很多多行文本显示很多很多多行文本显示很多很多',
          duration: 2000
        })