You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
43 lines
1001 B
43 lines
1001 B
1 year ago
|
<template>
|
||
|
|
<div>
|
||
|
|
<el-calendar>
|
||
|
|
<template #date-cell="{ data }">
|
||
|
|
<div
|
||
|
|
style="height: 100"
|
||
|
|
:class="data.isSelected ? 'is-selected' : ''"
|
||
|
|
@click="handleClick(data.day)">
|
||
|
|
<div>{{ data.day.split('-').slice(1).join('-') }}</div>
|
||
|
|
<div v-if="arr.find((v) => v.date === data.day)">{{ arr.find((v) => v.date === data.day).content }}
|
||
|
|
</div>
|
||
|
|
<!-- <div>{{ data.isSelected ? '打羽毛球' : '' }}</div> -->
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
</el-calendar>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
name: 'Calendar',
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
value: new Date(),
|
||
|
|
arr: [
|
||
|
|
{ date: '2024-04-01', content: '打球' },
|
||
|
|
{ date: '2024-04-02', content: '打台球' },
|
||
|
|
{ date: '2024-04-03', content: '打篮球' },
|
||
|
|
{ date: '2024-04-04', content: '踢足球' }
|
||
|
|
]
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
handleClick(date) {
|
||
|
|
alert(date)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
|
||
|
|
</style>
|