可以根据所获得时间进行标注el-calendar
时间: 2023-12-23 20:05:34 浏览: 34
是的,你可以使用`el-calendar`组件来标注时间。`el-calendar`是一个基于Element UI的日历组件,它提供了许多方便的功能,包括标注日期、选择日期、显示日期范围等等。
首先,在你的Vue组件中导入`el-calendar`组件:
```
<template>
<div>
<el-calendar v-model="date" :range="range" :selectable="selectable" :disabled-date="disabledDate" @change="handleChange"></el-calendar>
</div>
</template>
<script>
import 'element-ui/lib/theme-chalk/calendar.css';
import { Calendar } from 'element-ui';
export default {
components: {
'el-calendar': Calendar
},
data() {
return {
date: '',
range: [],
selectable: [],
disabledDate: ''
}
},
methods: {
handleChange(val) {
console.log(val);
}
}
}
</script>
```
然后,你可以使用`mark`属性来标注日期。`mark`是一个对象,其中的键是日期字符串(例如`'2021-08-01'`),值是标注该日期的内容。
```
data() {
return {
date: '',
range: [],
selectable: [],
disabledDate: '',
mark: {
'2021-08-01': '标注1',
'2021-08-02': '标注2',
'2021-08-03': '标注3'
}
}
}
```
最后,将`mark`属性绑定到`el-calendar`组件的`mark`属性上即可。
```
<el-calendar v-model="date" :range="range" :selectable="selectable" :disabled-date="disabledDate" :mark="mark" @change="handleChange"></el-calendar>
```
这样,你就可以在日历上标注日期了。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)