薛乎乎~ 2024-10-27 14:33 采纳率: 81%
浏览 4
已结题

(关键词-当前日期)

利用vue实现日历效果，设置当前日期和鼠标移动，日期样式变化

img



```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>绑定class属性实现日历效果</title>
</head>

<style>
  body {
    text-align: center;
  }

  .date-wrap {
    width: 510px;
    border: 2px solid #4e6ef2;
    padding: 15px 0;
    border-radius: 16px;
    height: 100%;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin: auto;
    background-color: #BDBFC8;
  }

  .date-wrap > div {
    width: 60px;
    height: 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-radius: 6px;
    cursor: pointer;
    border: 2px solid transparent;
    margin: 2px;
  }

  .date-wrap > div:hover {
    border: 2px solid #BDBFC8;
  }

  .date-wrap > div.head {
    font-weight: bold;
    height: 40px;
  }

  .date-wrap > div span:first-child {
    font-size: 18px;
  }

  .date-wrap > div span:last-child {
    font-size: 12px;
  }

  /* 定义绑定的类样式 */
  .date-wrap > div.notCurMonth {
    opacity: 0.4;
  }

  .date-wrap > div.curDay {
    border: 2px solid #4E6EF2;
   
  }
</style>
<body>
  <div id="app">
    <h2>2024年10月</h2>
    <div class="date-wrap">
      <div class="head">一</div>
      <div class="head">二</div>
      <div class="head">三</div>
      <div class="head">四</div>
      <div class="head">五</div>
      <div class="head">六</div>
      <div class="head">日</div>
      <!-- 日期 -->
      <div date="2024-9-30" :class="[{'notCurMonth': !isCurrentMonth('2024-9-30')}, {'curDay': isCurrentDay('2024-9-30')}]"><span>30</span><span>廿八</span></div>
      <div date="2024-10-1" :class="[{'notCurMonth': !isCurrentMonth('2024-10-1')}, {'curDay': isCurrentDay('2024-10-1')}]"><span>1</span><span>廿九</span></div>
      <div date="2024-10-2" :class="[{'notCurMonth': !isCurrentMonth('2024-10-2')}, {'curDay': isCurrentDay('2024-10-2')}]"><span>2</span><span>三十</span></div>
      <div date="2024-10-3" :class="[{'notCurMonth': !isCurrentMonth('2024-10-3')}, {'curDay': isCurrentDay('2024-10-3')}]"><span>3</span><span>九月</span></div>
      <div date="2024-10-4" :class="[{'notCurMonth': !isCurrentMonth('2024-10-4')}, {'curDay': isCurrentDay('2024-10-4')}]"><span>4</span><span>初二</span></div>
      <div date="2024-10-5" :class="[{'notCurMonth': !isCurrentMonth('2024-10-5')}, {'curDay': isCurrentDay('2024-10-5')}]"><span>5</span><span>初三</span></div>
      <div date="2024-10-6" :class="[{'notCurMonth': !isCurrentMonth('2024-10-6')}, {'curDay': isCurrentDay('2024-10-6')}]"><span>6</span><span>初四</span></div>
      <div date="2024-10-7" :class="[{'notCurMonth': !isCurrentMonth('2024-10-7')}, {'curDay': isCurrentDay('2024-10-7')}]"><span>7</span><span>初五</span></div>
      <div date="2024-10-8" :class="[{'notCurMonth': !isCurrentMonth('2024-10-8')}, {'curDay': isCurrentDay('2024-10-8')}]"><span>8</span><span>寒露</span></div>
      <div date="2024-10-9" :class="[{'notCurMonth': !isCurrentMonth('2024-10-9')}, {'curDay': isCurrentDay('2024-10-9')}]"><span>9</span><span>初七</span></div>
      <div date="2024-10-10" :class="[{'notCurMonth': !isCurrentMonth('2024-10-10')}, {'curDay': isCurrentDay('2024-10-10')}]"><span>10</span><span>初八</span></div>
      <div date="2024-10-11" :class="[{'notCurMonth': !isCurrentMonth('2024-10-11')}, {'curDay': isCurrentDay('2024-10-11')}]"><span>11</span><span>初九</span></div>
      <div date="2024-10-12" :class="[{'notCurMonth': !isCurrentMonth('2024-10-12')}, {'curDay': isCurrentDay('2024-10-12')}]"><span>12</span><span>初十</span></div>
      <div date="2024-10-13" :class="[{'notCurMonth': !isCurrentMonth('2024-10-13')}, {'curDay': isCurrentDay('2024-10-13')}]"><span>13</span><span>十一</span></div>
      <div date="2024-10-14" :class="[{'notCurMonth': !isCurrentMonth('2024-10-14')}, {'curDay': isCurrentDay('2024-10-14')}]"><span>14</span><span>十二</span></div>
      <div date="2024-10-15" :class="[{'notCurMonth': !isCurrentMonth('2024-10-15')}, {'curDay': isCurrentDay('2024-10-15')}]"><span>15</span><span>十三</span></div>
      <div date="2024-10-16" :class="[{'notCurMonth': !isCurrentMonth('2024-10-16')}, {'curDay': isCurrentDay('2024-10-16')}]"><span>16</span><span>十四</span></div>
      <div date="2024-10-17" :class="[{'notCurMonth': !isCurrentMonth('2024-10-17')}, {'curDay': isCurrentDay('2024-10-17')}]"><span>17</span><span>十五</span></div>
      <div date="2024-10-18" :class="[{'notCurMonth': !isCurrentMonth('2024-10-18')}, {'curDay': isCurrentDay('2024-10-18')}]"><span>18</span><span>十六</span></div>
      <div date="2024-10-19" :class="[{'notCurMonth': !isCurrentMonth('2024-10-19')}, {'curDay': isCurrentDay('2024-10-19')}]"><span>19</span><span>十七</span></div>
      <div date="2024-10-20" :class="[{'notCurMonth': !isCurrentMonth('2024-10-20')}, {'curDay': isCurrentDay('2024-10-20')}]"><span>20</span><span>十八</span></div>
      <div date="2024-10-21" :class="[{'notCurMonth': !isCurrentMonth('2024-10-21')}, {'curDay': isCurrentDay('2024-10-21')}]"><span>21</span><span>十九</span></div>
      <div date="2024-10-22" :class="[{'notCurMonth': !isCurrentMonth('2024-10-22')}, {'curDay': isCurrentDay('2024-10-22')}]"><span>22</span><span>廿十</span></div>
      <div date="2024-10-23" :class="[{'notCurMonth': !isCurrentMonth('2024-10-23')}, {'curDay': isCurrentDay('2024-10-23')}]"><span>23</span><span>霜降</span></div>
      <div date="2024-10-24" :class="[{'notCurMonth': !isCurrentMonth('2024-10-24')}, {'curDay': isCurrentDay('2024-10-24')}]"><span>24</span><span>廿二</span></div>
      <div date="2024-10-25" :class="[{'notCurMonth': !isCurrentMonth('2024-10-25')}, {'curDay': isCurrentDay('2024-10-25')}]"><span>25</span><span>廿三</span></div>
      <div date="2024-10-26" :class="[{'notCurMonth': !isCurrentMonth('2024-10-26')}, {'curDay': isCurrentDay('2024-10-26')}]"><span>26</span><span>廿四</span></div>
      <div date="2024-10-27" :class="[{'notCurMonth': !isCurrentMonth('2024-10-27')}, {'curDay': isCurrentDay('2024-10-27')}]"><span>27</span><span>廿五</span></div>
      <div date="2024-10-28" :class="[{'notCurMonth': !isCurrentMonth('2024-10-28')}, {'curDay': isCurrentDay('2024-10-28')}]"><span>28</span><span>廿六</span></div>
      <div date="2024-10-29" :class="[{'notCurMonth': !isCurrentMonth('2024-10-29')}, {'curDay': isCurrentDay('2024-10-29')}]"><span>29</span><span>廿七</span></div>
      <div date="2024-10-30" :class="[{'notCurMonth': !isCurrentMonth('2024-10-30')}, {'curDay': isCurrentDay('2024-10-30')}]"><span>30</span><span>廿八</span></div>
      <div date="2024-10-31" :class="[{'notCurMonth': !isCurrentMonth('2024-10-31')}, {'curDay': isCurrentDay('2024-10-31')}]"><span>31</span><span>廿九</span></div>
      <div date="2024-11-1" :class="[{'notCurMonth': !isCurrentMonth('2024-11-1')}, {'curDay': isCurrentDay('2024-11-1')}]"><span>1</span><span>十月</span></div>
      <div date="2024-11-2" :class="[{'notCurMonth': !isCurrentMonth('2024-11-2')}, {'curDay': isCurrentDay('2024-11-2')}]"><span>2</span><span>初二</span></div>
      <div date="2024-11-3" :class="[{'notCurMonth': !isCurrentMonth('2024-11-3')}, {'curDay': isCurrentDay('2024-11-3')}]"><span>3</span><span>初三</span></div>
      <div date="2024-11-4" :class="[{'notCurMonth': !isCurrentMonth('2024-11-4')}, {'curDay': isCurrentDay('2024-11-4')}]"><span>4</span><span>初四</span></div>
      <div date="2024-11-5" :class="[{'notCurMonth': !isCurrentMonth('2024-11-5')}, {'curDay': isCurrentDay('2024-11-5')}]"><span>5</span><span>初五</span></div>
      <div date="2024-11-6" :class="[{'notCurMonth': !isCurrentMonth('2024-11-6')}, {'curDay': isCurrentDay('2024-11-6')}]"><span>6</span><span>初六</span></div>
      <div date="2024-11-7" :class="[{'notCurMonth': !isCurrentMonth('2024-11-7')}, {'curDay': isCurrentDay('2024-11-7')}]"><span>7</span><span>立冬</span></div>
      <div date="2024-11-8" :class="[{'notCurMonth': !isCurrentMonth('2024-11-8')}, {'curDay': isCurrentDay('2024-11-8')}]"><span>8</span><span>初八</span></div>
      <div date="2024-11-9" :class="[{'notCurMonth': !isCurrentMonth('2024-11-9')}, {'curDay': isCurrentDay('2024-11-9')}]"><span>9</span><span>初九</span></div>
      <div date="2024-11-10" :class="[{'notCurMonth': !isCurrentMonth('2024-11-10')}, {'curDay': isCurrentDay('2024-11-10')}]"><span>10</span><span>初十</span></div>
    </div>
  </div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
<script>
  
  let vm = new Vue({
    el: '#app',
    data: {
      currentDate: '2024-10-23',
      curDateObj: {},
    },
    mounted() {
      this.curDateObj = this.getDate(this.currentDate)
    },
    methods: {
      getDate(date) {
        let arr = date.split('-')
        return { year: arr[0], month: arr[1], day: arr[2] }
      },
      isCurrentMonth(date) {
        let dateObj = this.getDate(date)
        return dateObj.year == this.curDateObj.year && dateObj.month == this.curDateObj.month
      },
      isCurrentDay(date) {
        let dateObj = this.getDate(date)
        return dateObj.year == this.curDateObj.year && dateObj.month == this.curDateObj.month && dateObj.day == this.curDateObj.day
      },
    }
  })
</script>
</html>

```

  • 写回答

0条回答 默认 最新

    报告相同问题？

    问题事件

    • 系统已结题 11月4日
    • 创建了问题 10月27日