提交日历视图

CD配唱片

2025-04-24 2f7a713ecffb7b3a00f1f08bad7488c8f79442ad

提交日历视图

 src/views/basicData/calendarView/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,48 @@
<template>
  <el-calendar ref="calendar">
    <template #header="{ date }">
      <span>日历视图</span>
      <span>{{ date }}</span>
      <el-button-group>
        <el-button size="small" @click="selectDate('prev-year')">
          Previous Year1
        </el-button>
        <el-button size="small" @click="selectDate('prev-month')">
          Previous Month1
        </el-button>
        <el-button size="small" @click="selectDate('today')">Today</el-button>
        <el-button size="small" @click="selectDate('next-month')">
          Next Month1
        </el-button>
        <el-button size="small" @click="selectDate('next-year')">
          Next Year
        </el-button>
      </el-button-group>
    </template>
    <template #date-cell="{ data }">
      <p :class="data.isSelected ? 'is-selected' : ''">
        {{ data.day.split('-').slice(1).join('-') }} <br/>
        &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; å·¥ä½œæ—¥
        {{ data.isSelected ? '✔️' : '' }}
      </p>
    </template>
  </el-calendar>
</template>
<script setup>
const calendar = ref()
const selectDate = (val) => {
  if (!calendar.value) return
  calendar.value.selectDate(val)
}
const isToday = (date) => {
  const today = new Date();
  return date.getDate() === today.getDate() && 
         date.getMonth() === today.getMonth() && 
         date.getFullYear() === today.getFullYear();
};
</script>
<style lang="scss" scoped>
.is-selected {
  color: #1989fa;
}
</style>