Vant2移动端Vue组件库问题记录

<template>
  <div class="seller">
    <van-cell
      title="开始时间"
      is-link
      :value-class="className"
      :value="timeValue"
      @click="showPopup" />
    <van-popup v-model="show" position="bottom">
      <van-datetime-picker
        v-model="currentDate"
        type="datetime"
        title="选择时间"
        :loading="isLoadingShow"
        :min-date="minDate"
        :max-date="maxDate"
        :formatter="formatter"
        @cancel="show = false"
        @confirm="confirmPicker"
      />
    </van-popup>
  </div>
</template>
 
<script>
export default {
  name: 'Seller',
  data () {
    return {
      msg: '商家页面',
      timeValue: '请选择时间',
      show: false,
      isLoadingShow: true,
      currentDate: new Date(),
      minDate: new Date(),
      maxDate: new Date(2020, 12, 31),
      className: ''
    }
  },
  methods: {
    // 显示弹窗
    showPopup () {
      this.show = true
      this.isLoadingShow = true
      setTimeout(() => {
        this.isLoadingShow = false
      }, 500)
    },
    // 确认选择的时间
    confirmPicker (val) {
      let year = val.getFullYear()
      let month = val.getMonth() + 1
      let day = val.getDate()
      let hour = val.getHours()
      let minute = val.getMinutes()
      if (month >= 1 && month <= 9) { month = `0${month}` }
      if (day >= 1 && day <= 9) { day = `0${day}` }
      if (hour >= 0 && hour <= 9) { hour = `0${hour}` }
      if (minute >= 0 && minute <= 9) { minute = `0${minute}` }
      this.className = 'timeClass'
      this.timeValue = `${year}-${month}-${day} ${hour}:${minute}`
      this.show = false
    },
    // 选项格式化函数
    formatter (type, value) {
      if (type === 'year') {
        return `${value}年`
      } else if (type === 'month') {
        return `${value}月`
      } else if (type === 'day') {
        return `${value}日`
      } else if (type === 'hour') {
        return `${value}时`
      } else if (type === 'minute') {
        return `${value}分`
      } else if (type === 'second') {
        return `${value}秒`
      }
      return value
    }
  }
}
</script>
 
<style lang="stylus" rel="stylesheet/stylus" scoped>
.seller
  .timeClass {
    color: #333;
  }
</style>

  onConfirm(value, index) {
    this.queryFrom.id = value.id // 需要传给后端的id值
    this.queryFrom.name = value.name // 用于渲染选择器列表数据
    this.showTitle = false // 关闭弹出层
  },

<van-list
  v-model="loading"
  :finished="finished"
  :finished-text="appList.length ? '没有更多了' : ''"
  @load="onLoad"
>
  <van-cell v-for="item in appList" :key="item" :title="item" />
</van-list>
 
export default {
  data() {
    return {
      loading: false,
      finished: false,
      appList: [], // 用车申请列表
      appQuery: {
        page: '1', // 要查询的页码
        rows: '10', // 每页记录数量
        userId: null, // 用户 Id
      }
    };
  },
  methods: {
    async onLoad() {
      // 异步更新数据
      let ret = await getAppList(this.appQuery)
      const { code, data } = ret
      if (code == 200) {
        this.appList = this.appList.concat(data.rows)
        // 加载状态结束
        this.loading = false;
        if (this.appList.length >= data.total) {
          // 没有更多数据了
          this.finished = true;
          Notify({
            message: '已加载完全部订单'，
            background: '#ee0a24'
          })
        } else {
          this.appQuery.page++
        }
      }
    },
  },
};

<van-tabs v-model="active">
  <van-tab title="标签 1">
    <ApprovalItem type='1' />
  </van-tab>
  <van-tab title="标签 2">
    <ApprovalItem type='2' />
  </van-tab>
  <van-tab title="标签 3">
    <ApprovalItem type='3' />
  </van-tab>
  <van-tab title="标签 4">
    <ApprovalItem type='4' />
  </van-tab>
</van-tabs>
 
data() {
  return {
    active: 2,
  };
},