小程序如何封装自定义组件（Toast）

1、创建和pages 同级的component目录新建一个myToast目录例如:

小程序如何封装自定义组件（Toast）

2、myToast.wxml文件内容:

<!-- 自定义toast组件 -->

<!-- name 模块名称   -->

 <template name="toast" >

 <!-- catchtouchmove=‘xxx’ 遮罩层的滚动穿透 -->

 <!-- isHide 显示消失 -->

  <view class="toast_content_box" wx:if="{{ isHide }}"

catchtouchmove="preventdefault">

    <view class="toast_content">

      <view class='toast_content_text'>

          <!-- 内容 -->

          {{content}}

      </view>

    </view>

  </view>

 </template>

3、myToast.wxss文件样式（根据自己ui样式去写）：

.toast_content_box {

  overflow: hidden;

  display: flex;

  width: 100%;

  height: 100%;

  justify-content: center;

  align-items: center;

  position: fixed;

  z-index: 999;

  background-color: rgba(0, 0, 0, 0.3)

}

.toast_content {

   width: 50%;

  padding: 30rpx;

  background-color: rgba(0, 0, 0, 0.8);

  border-radius: 20rpx;

}

.toast_content_text {

  width: 100%;

  height: 100%;

  background-size: 100% 100%;

  background-repeat: no-repeat;

  text-align: center;

  color: #fff;

  font-size: 28rpx;

  font-weight: 300;

}

4、myToast.js文件内容：

let _compData = {

  '_toast_.isHide': false,// 控制组件显示隐藏

  '_toast_.content': '',// 显示的内容

}

let toastPannel = {

  // toast显示的方法

  ShowToast: function (data) {

    let self = this;

    this.setData({ '_toast_.isHide': true, '_toast_.content': data });

  },

  // toast隐藏的方法

  HideToast: function (data) {

    let self = this;

    self.setData({ '_toast_.isHide': false })

  },

  // toast显示的方法 2000后隐藏

  ShowToastTime: function (data) {

    let self = this;

    this.setData({ '_toast_.isHide': true, '_toast_.content': data });

    setTimeout(() => {

      this.setData({ '_toast_.isHide': false, '_toast_.content': data });

    }, 2000)

  },

}

function ToastPannel() {

  // 拿到当前页面对象

  let pages = getCurrentPages();

  let curPage = pages[pages.length - 1];

  this.__page = curPage;

  // 小程序最新版把原型链干掉了。。。换种写法

  Object.assign(curPage, toastPannel);

  // 附加到page上，方便访问

  curPage.toastPannel = this;

  // 把组件的数据合并到页面的data对象中

  curPage.setData(_compData);

  return this;

}

module.exports = {

  ToastPannel

}