小程序如何封装提示组件而且使用

1. 封装组件toast

<!-- toast.wxml -->
<view class="toast" wx:if="{{isShowToast}}">
  <view class="tip">{{msg}}</view>
</view>

<!-- toast.wxss -->
.toast {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.toast .tip {
  padding: 16rpx 20rpx 14rpx 20rpx;
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
  border-radius: 8rpx;
  font-size: 28rpx;
}

<!-- toast.js -->
/* properties里面接收的是对象 */
Component({
  properties: {
    isShowToast: {
      type: Boolean,
      value: false
    },
    msg: {
      type: String,
      value: ''
    }
  }
})

<!-- toast.json -->
/* 声明这是一个组件 */
{
  "component": true
}
复制代码

2. 页面引用example

<!-- example.wxml -->
<input class="input" type="number" placeholder="请输入手机号" value="{{phone}}" bindinput="inputPhone"/>
<button type="primary" size="mini" bindtap="submit">提交</button>
<toast isShowToast="{{isShowToast}}" msg="{{msg}}"></toast> /* 把参数传递给toast组件 */

<!-- example.wxss -->
@import './toast.wxss';

<!-- example.js -->
import { vailPhone } from 'utils/vailFormat.js'  /* 要使用必须先导入 */
Page({
  data: {
    isShowToast: false,
    msg: '',
    phone: ''
  },
  inputPhone (e) {
    this.setData({{
      phone: e.detaiil.value
    })
  },
  submit () {
    vailPhone(this.data.phone, this)
  }
})

<!-- example.json -->
/* 声明要使用的toast组件 */
{
  "usingComponents": {
    "toast": "/component/toast/toast"
  }
}

复制代码

3. vailFormat.js

function toast (msg, self) {
  self.setData({
    isShowToast: true,
    msg: msg
  })
  setTimeout(() => {
    self.setData({
      isShowToast: false
    })
  }, 2000)
}

function vailPhone (phone, self) {
  var reg = /^1[3|5|6|7|8]\d{9}$/
  if (phone == '') {
    toast('请输入手机号', self)
    return false
  } else if (!reg.test(phone)) {
    toast('请输入正确的手机号', self)
    return false
  } else {
    return true
  }
}

/* 必定要导出 别的地方才可使用 */
module.exports = {
  vailPhone: vailPhone
}
复制代码