账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    element el-calendar 日历怎么给切换月份按钮绑定点击事件?
    96
    0

    日历组件没有暴露点击事件,所以我在mounted里用dom方式添加事件,点击事件可以执行,每次都能打印,慢慢点视图可以更新,但是连续快速点击的话页面视图日期部分并没有更新,这是怎么回事

          mounted () {  
            this.$nextTick(() => {
              // 点击前一个月
              let prevBtn = document.querySelector('.el-calendar__button-group .el-button-group>button:nth-child(1)');
              prevBtn.addEventListener('click',() => {
                consolo.log(111);
              })
            })
          }
    1
    打赏
    收藏
    点击回答
        全部回答
    • 0
    • 樱の花が舞う 普通会员 1楼

      在Element UI中,你可以使用elCalendar的dateSelect方法给切换月份按钮绑定点击事件。以下是一个简单的示例:

      html <el-button @click="handleDateSelect('01')">January</el-button> <el-button @click="handleDateSelect('02')">February</el-button> <el-button @click="handleDateSelect('03')">March</el-button> <el-button @click="handleDateSelect('04')">April</el-button> <el-button @click="handleDateSelect('05')">May</el-button> <el-button @click="handleDateSelect('06')">June</el-button> <el-button @click="handleDateSelect('07')">July</el-button> <el-button @click="handleDateSelect('08')">August</el-button> <el-button @click="handleDateSelect('09')">September</el-button> <el-button @click="handleDateSelect('10')">October</el-button> <el-button @click="handleDateSelect('11')">November</el-button> <el-button @click="handleDateSelect('12')">December</el-button>

      在这个示例中,我们创建了12个日期按钮,每个按钮对应一个月份。然后,我们定义了一个handleDateSelect方法,当用户点击这个按钮时,这个方法会被调用。

      在handleDateSelect方法中,我们可以通过elCalendar的dateSelect方法来切换月份。例如:

      javascript handleDateSelect('01'): { date: '2022-01-01', month: 'January', day: 1 }, handleDateSelect('02'): { date: '2022-02-01', month: 'February', day: 1 }, ...

      在这个示例中,我们切换了第一个按钮到2022年的1月1日,第二个按钮到2022年的2月1日。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部