小程式如何封裝提示元件並且使用

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
}
複製程式碼