Vant(Vue2)使用
前言
官网 https://vant-contrib.gitee.io/vant/v2/#/zh-CN/
Moment.js
Moment.js 是我用过的最好用的操作时间的工具库。它使得操作时间变得很简单。
npm install moment --save引用
import moment from 'moment'创建
moment() // 当前时间
moment("1995-12-25") // 1995-12-25
moment("12-25-1995", "MM-DD-YYYY") // 1995-12-25
moment({ year :2010, month :3, day :5, hour :15, minute :10, second :3, millisecond :123})
moment(Date.now() - 24 * 60 * 60 * 1000) // 昨天
moment(new Date(2011, 9, 16)) // 2011-10-16格式化
moment(date).format('YYYY-MM-DD HH:mm:ss')
moment().format('YYYY年MM月DD日 HH:mm:ss') // 2016年11月11日 22:05:19
moment().format('hh:m:ss') // 10:5:19
moment().format('[YYYY]') // "YYYY"。[] 里的会原样输出。转化成 Date 对象
moment().toDate()获取/设置时间信息
moment().second() //获得 秒
moment().second(Number) //设置 秒。0 到 59
moment().minute() //获得 分
moment().minute(Number) //设置 分。0 到 59
// 类似的用法
moment().hour() // 小时
moment().date() // 一个月里的第几天
moment().day() // 星期几
moment().dayOfYear() // 一年里的第几天
moment().week() // 一年里的第几周
moment().month() // 第几个月
moment().quarter() // 一年里的第几个季度
moment().year() // 年
moment().daysInMonth() // 当前月有多少天操作
moment().add(7, 'days') // 之后的第7天。第2个参数还可以是 'months', 'years' 等。注意是复数。
moment().add(7, 'd'）// 与上面一行代码的运行结果一样。
moment().subtract(1, 'months') // 上个月
moment().startOf('week') // 这周的第一天
moment().startOf('hour') // 等效与 moment().minutes(0).seconds(0).milliseconds(0)。
// 还支持 'year'，'month' 等
moment().endOf('week')查询
// 早于
moment('2010-10-20').isBefore('2010-10-21') // true
moment('2010-10-20').isBefore('2010-12-31', 'year') // false
moment('2010-10-20').isBefore('2011-01-01', 'year') // true
// 是否相等
moment('2010-10-20').isSame('2010-10-20') // true
moment('2010-10-20').isSame('2009-12-31', 'year') // false
moment('2010-10-20').isSame('2010-01-01', 'year') // true
// 晚于
moment('2010-10-20').isAfter('2010-10-19') // true
moment('2010-10-20').isAfter('2010-01-01', 'year') // false
moment('2010-10-20').isAfter('2009-12-31', 'year') // true
// 是否在时间范围内
moment('2010-10-20').isBetween('2010-10-19', '2010-10-25') // true
moment('2010-10-20').isBetween('2010-01-01', '2012-01-01', 'year') // false
moment('2010-10-20').isBetween('2009-12-31', '2012-01-01', 'year') // true
moment().isLeapYear() // 是否是闰年日历
<van-cell title="选择单个日期" :value="calendar_date" @click="calendar_show = true"/>
<van-icon class="icon-time" name="notes-o" @click="calendar_show = true"/>
<van-calendar v-model="calendar_show" @confirm="onCalendarConfirm"/>
<script>
import moment from 'moment'
export default {
data () {
return {
calendar_date: '',
calendar_show: false
}
},
mounted () {
this.calendar_date = moment().format('YYYY-MM-DD')
},
methods: {
onCalendarConfirm (date) {
this.calendar_show = false
this.calendar_date = moment(date).format('YYYY-MM-DD')
}
}
}
</script>注意
默认日历组件的最小日期是当天，这就导致了我们不能选择之前的日期，所以我们可以设置最小日期，让之前的日期能够选择 但是一定要注意最小日期设置的越小，组件打开的就越慢，一定要根据实际情况设置。
代码
<van-calendar v-model="calendar_show" :min-date="new Date(2000,1,1)" @confirm="onCalendarConfirm"/>顶部导航
<van-nav-bar
title=""
left-arrow
:border="false"
@click-left="onClickLeft"
>
<template #left>
<van-icon name="arrow-left"/>
<span style="padding-left: 6px">账户数量统计(按成员单位)</span>
</template>
<template #right>
<div class="titleRight">
<van-icon class="icon-time" name="notes-o" style="font-size: 26px" @click="calendar_show = true"/>
<span @click="calendar_show = true">{{ calendar_date }}</span>
<van-calendar v-model="calendar_show" :min-date="new Date(2000,1,1)" @confirm="onCalendarConfirm"/>
</div>
</template>
</van-nav-bar>下拉刷新
<van-pull-refresh v-model="is_refresh" @refresh="onRefresh">
<van-cell v-for="item in mlist" :key="item" :title="item"/>
</van-pull-refresh>
<script>
export default {
data () {
return {
is_refresh: false,
mlist: [
1, 2, 3, 4, 5, 6, 7, 8, 9, 10
]
}
},
mounted () {
},
methods: {
onRefresh () {
this.is_refresh = true
console.info('onRefresh')
setTimeout(() => {
this.is_refresh = false
}, 2000)
},
}
}
</script>
<style lang='less' scoped>
.van-pull-refresh {
flex: auto;
overflow-y: auto;
}
</style>下拉刷新与加载更多
<van-pull-refresh v-model="is_refresh" @refresh="onRefresh">
<van-list
v-model="is_loadmore"
:finished="is_finished"
finished-text="没有更多了"
:immediate-check="true"
@load="onLoadMore"
>
<van-cell v-for="item in mlist" :key="item" :title="item"/>
</van-list>
</van-pull-refresh>
<script>
export default {
data () {
return {
is_refresh: false,
is_loadmore: false,
is_finished: false,
mlist: [
1, 2, 3, 4, 5, 6, 7, 8, 9, 10
]
}
},
mounted () {
},
methods: {
onRefresh () {
this.is_finished = false
this.is_refresh = true
console.info('onRefresh')
setTimeout(() => {
this.is_refresh = false
}, 2000)
},
onLoadMore () {
console.info('onLoadMore')
setTimeout(() => {
for (let i = 0; i < 10; i++) {
this.mlist.push(this.mlist.length + 1)
}
// 加载状态结束
this.is_loadmore = false
// 数据全部加载完成
if (this.mlist.length >= 40) {
this.is_finished = true
}
}, 2000)
}
}
}
</script>
<style lang='less' scoped>
.van-pull-refresh {
flex: auto;
.van-list {
height: 100%;
overflow-y: auto;
}
}
</style>List
List 组件通过 loading 和 finished 两个变量控制加载状态，当组件滚动到底部时，会触发 load 事件并将 loading 设置成 true。此时可以发起异步操作并更新数据，数据更新完毕后，将 loading 设置成 false 即可。若数据已全部加载完毕，则直接将 finished 设置成 true 即可。
注意：
- 组件初始化时默认会自动调用
onLoadMore方法，如果我们设置:immediate-check="false"则初始化时不再自动调用onLoadMore。 - 如果我们设置
:immediate-check="false"，当数据的条数较少，显示的数据比List的高度要低的时候，并不会触发onLoadMore,因为没有出现滚动条，即使上拉也不会触发。 :immediate-check="true"这是默认的值，不建议改为false,因为true的时候组件会根据渲染数据的高度，自动调用0到多次onLoadMore，不会因为数据太少而导致无法触发onLoadMore的问题。is_finished一定要在没有更多数据的时候再设置为true,否则不再触发onLoadMore，下拉刷新时一定要把is_finished再设置为false。- 注意添加
.van-list的样式，否则没有滚动条。
折叠面板
<van-collapse v-model="activeNames">
<van-collapse-item name="1">
<template #title>
<div>标题1 <van-icon name="question-o" /></div>
</template>
内容
</van-collapse-item>
<van-collapse-item title="标题2" name="2">内容</van-collapse-item>
<van-collapse-item title="标题3" name="3">内容</van-collapse-item>
</van-collapse>
<script>
export default {
data() {
return {
activeNames: ['1'],
};
},
};
</script>本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2022-03-08，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录