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

(关键词-当前日期)

利用vue控制style实现日历效果，设置当前日期10.23及鼠标滑动经过日期效果

img

<!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>绑定style属性实现日历效果</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;
  }
</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" :style="[{'opacity': !isCurrentMonth('2024-9-30') ? '0.4' : ''}, {'border': isCurrentDay('2024-9-30') ? '2px solid #4E6EF2' : ''}]"><span>30</span><span>廿八</span></div>
      <div date="2024-10-1" :style="[{'opacity': !isCurrentMonth('2024-10-1') ? '0.4' : ''}, {'border': isCurrentDay('2024-10-1') ? '2px solid #4E6EF2' : ''}]"><span>1</span><span>廿九</span></div>
      <div date="2024-10-2" :style="[{'opacity': !isCurrentMonth('2024-10-2') ? '0.4' : ''}, {'border': isCurrentDay('2024-10-2') ? '2px solid #4E6EF2' : ''}]"><span>2</span><span>三十</span></div>
      <div date="2024-10-3" :style="[{'opacity': !isCurrentMonth('2024-10-3') ? '0.4' : ''}, {'border': isCurrentDay('2024-10-3') ? '2px solid #4E6EF2' : ''}]"><span>3</span><span>九月</span></div>
      <div date="2024-10-4" :style="[{'opacity': !isCurrentMonth('2024-10-4') ? '0.4' : ''}, {'border': isCurrentDay('2024-10-4') ? '2px solid #4E6EF2' : ''}]"><span>4</span><span>初二</span></div>
      <div date="2024-10-5" :style="[{'opacity': !isCurrentMonth('2024-10-5') ? '0.4' : ''}, {'border': isCurrentDay('2024-10-5') ? '2px solid #4E6EF2' : ''}]"><span>5</span><span>初三</span></div>
      <div date="2024-10-6" :style="[{'opacity': !isCurrentMonth('2024-10-6') ? '0.4' : ''}, {'border': isCurrentDay('2024-10-6') ? '2px solid #4E6EF2' : ''}]"><span>6</span><span>初四</span></div>
      <div date="2024-10-7" :style="[{'opacity': !isCurrentMonth('2024-10-7') ? '0.4' : ''}, {'border': isCurrentDay('2024-10-7') ? '2px solid #4E6EF2' : ''}]"><span>7</span><span>初五</span></div>
      <div date="2024-10-8" :style="[{'opacity': !isCurrentMonth('2024-10-8') ? '0.4' : ''}, {'border': isCurrentDay('2024-10-8') ? '2px solid #4E6EF2' : ''}]"><span>8</span><span>寒露</span></div>
      <div date="2024-10-9" :style="[{'opacity': !isCurrentMonth('2024-10-9') ? '0.4' : ''}, {'border': isCurrentDay('2024-10-9') ? '2px solid #4E6EF2' : ''}]"><span>9</span><span>初七</span></div>
      <div date="2024-10-10" :style="[{'opacity': !isCurrentMonth('2024-10-10') ? '0.4' : ''}, {'border': isCurrentDay('2024-10-10') ? '2px solid #4E6EF2' : ''}]"><span>10</span><span>初八</span></div>
      <div date="2024-10-11" :style="[{'opacity': !isCurrentMonth('2024-10-11') ? '0.4' : ''}, {'border': isCurrentDay('2024-10-11') ? '2px solid #4E6EF2' : ''}]"><span>11</span><span>初九</span></div>
      <div date="2024-10-12" :style="[{'opacity': !isCurrentMonth('2024-10-12') ? '0.4' : ''}, {'border': isCurrentDay('2024-10-12') ? '2px solid #4E6EF2' : ''}]"><span>12</span><span>初十</span></div>
      <div date="2024-10-13" :style="[{'opacity': !isCurrentMonth('2024-10-13') ? '0.4' : ''}, {'border': isCurrentDay('2024-10-13') ? '2px solid #4E6EF2' : ''}]"><span>13</span><span>十一</span></div>
      <div date="2024-10-14" :style="[{'opacity': !isCurrentMonth('2024-10-14') ? '0.4' : ''}, {'border': isCurrentDay('2024-10-14') ? '2px solid #4E6EF2' : ''}]"><span>14</span><span>十二</span></div>
      <div date="2024-10-15" :style="[{'opacity': !isCurrentMonth('2024-10-15') ? '0.4' : ''}, {'border': isCurrentDay('2024-10-15') ? '2px solid #4E6EF2' : ''}]"><span>15</span><span>十三</span></div>
      <div date="2024-10-16" :style="[{'opacity': !isCurrentMonth('2024-10-16') ? '0.4' : ''}, {'border': isCurrentDay('2024-10-16') ? '2px solid #4E6EF2' : ''}]"><span>16</span><span>十四</span></div>
      <div date="2024-10-17" :style="[{'opacity': !isCurrentMonth('2024-10-17') ? '0.4' : ''}, {'border': isCurrentDay('2024-10-17') ? '2px solid #4E6EF2' : ''}]"><span>17</span><span>十五</span></div>
      <div date="2024-10-18" :style="[{'opacity': !isCurrentMonth('2024-10-18') ? '0.4' : ''}, {'border': isCurrentDay('2024-10-18') ? '2px solid #4E6EF2' : ''}]"><span>18</span><span>十六</span></div>
      <div date="2024-10-19" :style="[{'opacity': !isCurrentMonth('2024-10-19') ? '0.4' : ''}, {'border': isCurrentDay('2024-10-19') ? '2px solid #4E6EF2' : ''}]"><span>19</span><span>十七</span></div>
      <div date="2024-10-20" :style="[{'opacity': !isCurrentMonth('2024-10-20') ? '0.4' : ''}, {'border': isCurrentDay('2024-10-20') ? '2px solid #4E6EF2' : ''}]"><span>20</span><span>十八</span></div>
      <div date="2024-10-21" :style="[{'opacity': !isCurrentMonth('2024-10-21') ? '0.4' : ''}, {'border': isCurrentDay('2024-10-21') ? '2px solid #4E6EF2' : ''}]"><span>21</span><span>十九</span></div>
      <div date="2024-10-22" :style="[{'opacity': !isCurrentMonth('2024-10-22') ? '0.4' : ''}, {'border': isCurrentDay('2024-10-22') ? '2px solid #4E6EF2' : ''}]"><span>22</span><span>廿十</span></div>
      <div date="2024-10-23" :style="[{'opacity': !isCurrentMonth('2024-10-23') ? '0.4' : ''}, {'border': isCurrentDay('2024-10-23') ? '2px solid #4E6EF2' : ''},div1]"><span>23</span><span>霜降</span></div>
      <div  date="2024-10-24" :style="[{'opacity': !isCurrentMonth('2024-10-24') ? '0.4' : ''}, {'border': isCurrentDay('2024-10-24') ? '2px solid #4E6EF2' : ''}]"><span>24</span><span>廿二</span></div>
      <div date="2024-10-25" :style="[{'opacity': !isCurrentMonth('2024-10-25') ? '0.4' : ''}, {'border': isCurrentDay('2024-10-25') ? '2px solid #4E6EF2' : ''}]"><span>25</span><span>廿三</span></div>
      <div date="2024-10-26" :style="[{'opacity': !isCurrentMonth('2024-10-26') ? '0.4' : ''}, {'border': isCurrentDay('2024-10-26') ? '2px solid #4E6EF2' : ''}]"><span>26</span><span>廿四</span></div>
      <div date="2024-10-27" :style="[{'opacity': !isCurrentMonth('2024-10-27') ? '0.4' : ''}, {'border': isCurrentDay('2024-10-27') ? '2px solid #4E6EF2' : ''}]"><span>27</span><span>廿五</span></div>
      <div date="2024-10-28" :style="[{'opacity': !isCurrentMonth('2024-10-28') ? '0.4' : ''}, {'border': isCurrentDay('2024-10-28') ? '2px solid #4E6EF2' : ''}]"><span>28</span><span>廿六</span></div>
      <div date="2024-10-29" :style="[{'opacity': !isCurrentMonth('2024-10-29') ? '0.4' : ''}, {'border': isCurrentDay('2024-10-29') ? '2px solid #4E6EF2' : ''}]"><span>29</span><span>廿七</span></div>
      <div date="2024-10-30" :style="[{'opacity': !isCurrentMonth('2024-10-30') ? '0.4' : ''}, {'border': isCurrentDay('2024-10-30') ? '2px solid #4E6EF2' : ''}]"><span>30</span><span>廿八</span></div>
      <div date="2024-10-31" :style="[{'opacity': !isCurrentMonth('2024-10-31') ? '0.4' : ''}, {'border': isCurrentDay('2024-10-31') ? '2px solid #4E6EF2' : ''}]"><span>31</span><span>廿九</span></div>
      <div date="2024-11-1" :style="[{'opacity': !isCurrentMonth('2024-11-1') ? '0.4' : ''}, {'border': isCurrentDay('2024-11-1') ? '2px solid #4E6EF2' : ''}]"><span>1</span><span>十月</span></div>
      <div date="2024-11-2" :style="[{'opacity': !isCurrentMonth('2024-11-2') ? '0.4' : ''}, {'border': isCurrentDay('2024-11-2') ? '2px solid #4E6EF2' : ''}]"><span>2</span><span>初二</span></div>
      <div date="2024-11-3" :style="[{'opacity': !isCurrentMonth('2024-11-3') ? '0.4' : ''}, {'border': isCurrentDay('2024-11-3') ? '2px solid #4E6EF2' : ''}]"><span>3</span><span>初三</span></div>
      <div date="2024-11-4" :style="[{'opacity': !isCurrentMonth('2024-11-4') ? '0.4' : ''}, {'border': isCurrentDay('2024-11-4') ? '2px solid #4E6EF2' : ''}]"><span>4</span><span>初四</span></div>
      <div date="2024-11-5" :style="[{'opacity': !isCurrentMonth('2024-11-5') ? '0.4' : ''}, {'border': isCurrentDay('2024-11-5') ? '2px solid #4E6EF2' : ''}]"><span>5</span><span>初五</span></div>
      <div date="2024-11-6" :style="[{'opacity': !isCurrentMonth('2024-11-6') ? '0.4' : ''}, {'border': isCurrentDay('2024-11-6') ? '2px solid #4E6EF2' : ''}]"><span>6</span><span>初六</span></div>
      <div date="2024-11-7" :style="[{'opacity': !isCurrentMonth('2024-11-7') ? '0.4' : ''}, {'border': isCurrentDay('2024-11-7') ? '2px solid #4E6EF2' : ''}]"><span>7</span><span>立冬</span></div>
      <div date="2024-11-8" :style="[{'opacity': !isCurrentMonth('2024-11-8') ? '0.4' : ''}, {'border': isCurrentDay('2024-11-8') ? '2px solid #4E6EF2' : ''}]"><span>8</span><span>初八</span></div>
      <div date="2024-11-9" :style="[{'opacity': !isCurrentMonth('2024-11-9') ? '0.4' : ''}, {'border': isCurrentDay('2024-11-9') ? '2px solid #4E6EF2' : ''}]"><span>9</span><span>初九</span></div>
      <div date="2024-11-10" :style="[{'opacity': !isCurrentMonth('2024-11-10') ? '0.4' : ''}, {'border': isCurrentDay('2024-11-10') ? '2px solid #4E6EF2' : ''}]"><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: {},
      div1:{background:'#4e6ef2'}
    },
    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>
  • 写回答

1条回答 默认 最新

  • 小ᶻ☡꙳ᵃⁱᵍᶜ꙳ 优质创作者: 人工智能技术领域 2024-10-28 01:03
    关注

    回答引用自GPT-4o，由博主小ᶻZ࿆编写，若还有疑问可评论或留言：

    利用Vue控制Style实现日历效果

    示例代码

    以下是通过Vue的v-bind:style绑定来实现日历效果的代码，设置了当前日期的样式以及鼠标滑动时的效果。

    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>绑定style属性实现日历效果</title>
<style>
 body {
 text-align: center;
 }
 .date-wrap {
 width: 510px;
 border: 2px solid #4e6ef2;
 padding: 15px 0;
 border-radius: 16px;
 display: flex;
 justify-content: center;
 flex-wrap: wrap;
 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;
 }
</style>
</head>
<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>
</div>
<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'
 },
 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>
</body>
</html>

    代码说明

    • HTML部分：创建一个div用于显示每个月的日期。日期会根据样式绑定显示不同的颜色和边框。
    • Vue方法：
      • getDate：解析日期字符串，并返回包含年月日的对象。
      • isCurrentMonth和isCurrentDay：用于判断当前日期的月份和天。

    效果

    • 当前日期将显示为特定的边框颜色，鼠标悬浮时也会有不同的样式效果。

    如有帮助，题主可以帮忙采纳一下嘛，谢谢~

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题？

问题事件

  • 系统已结题 11月28日
  • 已采纳回答 11月20日
  • 创建了问题 10月27日