使用js添加按钮,vue页面 el-calendar 添加自定义按钮
html代码:
<div class="schedule"> <div class="title"> 今 日 日 程 </div> <div class="allSchedule"> <el-row class="addSchedule" type="flex" align="middle"> <el-button class="but1" type="text" @click="intoShedule">添加日程</el-button> </el-row> <el-row class="todaySchedule" v-for="item in unRead" :key="item.index"> <p class="unReadSchedule" type="text" @click="editShedule"> {{ item.content }} </p> </el-row> <el-row class="show"> <span>已显示全部日程</span> </el-row> </div> </div>
js代码:
// 默认渲染完成后 mounted(){ // 获取demo元素 let parent = document.querySelector( ".el-calendar__header" ) // 创建一个button元素 let button = document.createElement("button") button.type = 'button' // 类型 button.className = 'el-button el-button--plain el-button--mini' // Calendar默认按钮样式 button.textContent = '全部日程' // 文本 button.style.cssText = "background-color: #ff6a00;color:white;margin-left:auto" // 样式 button.onclick = function(){ // 触发事件 queryExistDataDays() } parent.appendChild(button) //添加 var that = this function queryExistDataDays(){ // 事件内容 const { href } = that.$router.resolve({ path: "/scheduleManagementHome", // query: { // id: row.id, // }, }); window.open(href, '_blank'); return Promise.resolve(false); // 不刷新表格 } },
效果: