基本用法
1. 安装 Vant4 和 Calendar 组件：
确保你已经安装了 Vant4 和相关的样式：
npm install vant@next
2. 引入 Calendar 组件：
在需要使用 Calendar 的组件中，引入 Calendar 组件：
<template>
<van-calendar v-model="selectedDate" />
</template>
<script>
import { ref } from 'vue';
import { Calendar } from 'vant';
export default {
components: {
[Calendar.name]: Calendar
},
setup() {
const selectedDate = ref(new Date());
return {
selectedDate
};
}
};
</script>
常见配置选项
以下是一些常见的 Calendar 配置选项：
- v-model： 选择的日期，可以是单个日期或日期数组。
<template>
<van-calendar v-model="selectedDate" />
</template>
<script>
import { ref } from 'vue';
import { Calendar } from 'vant';
export default {
components: {
[Calendar.name]: Calendar
},
setup() {
const selectedDate = ref(new Date());
return {
selectedDate
};
}
};
</script>
- type： 日历类型，可选值为 'single'（单选）或 'multiple'（多选）或 'range'（范围选择），默认为 'single'。
<template>
<van-calendar v-model="selectedDate" :type="'range'" />
</template>
<script>
import { ref } from 'vue';
import { Calendar } from 'vant';
export default {
components: {
[Calendar.name]: Calendar
},
setup() {
const selectedDate = ref([]);
return {
selectedDate
};
}
};
</script>
- color： 选中日期的颜色。
<template>
<van-calendar v-model="selectedDate" :color="'#1989fa'" />
</template>
<script>
import { ref } from 'vue';
import { Calendar } from 'vant';
export default {
components: {
[Calendar.name]: Calendar
},
setup() {
const selectedDate = ref(new Date());
return {
selectedDate
};
}
};
</script>
- min-date 和 max-date： 可选的最小和最大日期。
<template>
<van-calendar v-model="selectedDate" :min-date="minDate" :max-date="maxDate" />
</template>
<script>
import { ref } from 'vue';
import { Calendar } from 'vant';
export default {
components: {
[Calendar.name]: Calendar
},
setup() {
const selectedDate = ref(new Date());
const minDate = ref(new Date('2022-01-01'));
const maxDate = ref(new Date('2022-12-31'));
return {
selectedDate,
minDate,
maxDate
};
}
};
</script>
- formatter： 自定义日期的展示文本。
<template>
<van-calendar v-model="selectedDate" :formatter="customFormatter" />
</template>
<script>
import { ref } from 'vue';
import { Calendar } from 'vant';
export default {
components: {
[Calendar.name]: Calendar
},
setup() {
const selectedDate = ref(new Date());
const customFormatter = (day) => {
const month = day.date.getMonth() + 1;
const date = day.date.getDate();
return `${month}月${date}日`;
};
return {
selectedDate,
customFormatter
};
}
};
</script>
这只是 Vant4 中 Calendar 组件的一些基本用法和配置选项。你可以根据项目需要，查阅 Vant4 官方文档以获取更多详细信息和高级用法。
转载请注明出处：http://www.pingtaimeng.com/article/detail/5800/Vant