element日历calendar组件上月、今天、下月、日历块点击事件及模板源码


Posted in Javascript onJuly 27, 2020

  辰小白小白最近在写日历模板,项目已经用了element组件,奈何element日历组件官方文档提供的资料实在太少了。所以这里希望有相关开发需要的朋友能够少走一些辰小白踩过的坑。

首先展示一些模板效果图:

element日历calendar组件上月、今天、下月、日历块点击事件及模板源码

 这个项目的详细介绍可以下辰小白的这篇文章:后端开发的福音,vue+element实现的vue-element-admin前台框架,开箱即用

下面是日历模板首页源码

<template>
 <div>
  <el-card class="_calendar">
   <el-container>
    <el-main>
     <el-card>
      <el-calendar v-model="value" :first-day-of-week="7">
       <!-- 这里使用的是 2.5 slot 语法,对于新项目请使用 2.6 slot 语法-->
       <template slot="dateCell" slot-scope="{date, data}">
        <div slot="reference" class="div-Calendar" @click="calendarOnClick(data)">
         <p :class="data.isSelected ? 'is-selected' : ''">
          {{ data.day.split('-').slice(1).join('-') }}
          <i
           :class="[data.isSelected ?'el-icon-check':'']"
          ></i>
          <i v-if="_.indexOf(isArrange, data.day)>0" class="el-icon-s-claim"></i>
          <!-- <i class="el-icon-coffee-cup"></i> -->
         </p>
        </div>
       </template>
      </el-calendar>
     </el-card>
    </el-main>
 
    <el-aside width="40%" style="overflow: hidden;">
     <el-card>
      <div class="el-calendar__header">
       <div class="el-calendar__title">排班详情</div>
       <div class="el-calendar__button-group">
        <div class="el-button-group">
         <button
          type="button"
          class="el-button el-button--plain el-button--mini"
          @click="saveOnClick"
         >
          <span>新增</span>
         </button>
        </div>
       </div>
      </div>
      <div class="calendar-info">
       <div style="padding: 15px;">
        <div role="alert" class="el-alert el-alert--success is-dark" @click="infoOnClick">
         <i class="el-alert__icon el-icon-success is-big"></i>
         <div class="el-alert__content">
          <span class="el-alert__title is-bold">2020-06-19 9:00~11:00</span>
          <p class="el-alert__description">值班人员:张三、李四、王五</p>
          <p class="el-alert__description">携带设备:123547、985431、745481</p>
          <i class="el-alert__closebtn el-icon-close" @click.stop="infoDel"></i>
         </div>
        </div>
        <div role="alert" class="el-alert el-alert--info is-dark" @click="infoOnClick">
         <i class="el-alert__icon el-icon-info is-big"></i>
         <div class="el-alert__content">
          <span class="el-alert__title is-bold">2020-06-19 9:00~11:00(待审核)</span>
          <p class="el-alert__description">值班人员:张三、李四、王五</p>
          <p class="el-alert__description">携带设备:123547、985431、745481</p>
          <i class="el-alert__closebtn el-icon-close"></i>
         </div>
        </div>
        <div role="alert" class="el-alert el-alert--warning is-dark" @click="infoOnClick">
         <i class="el-alert__icon el-icon-warning is-big"></i>
         <div class="el-alert__content">
          <span class="el-alert__title is-bold">警告提示的文案</span>
          <p class="el-alert__description">文字说明文字说明文字说明文字说明文字说明文字说明</p>
          <i class="el-alert__closebtn el-icon-close"></i>
         </div>
        </div>
        <div role="alert" class="el-alert el-alert--error is-dark" @click="infoOnClick">
         <i class="el-alert__icon el-icon-error is-big"></i>
         <div class="el-alert__content">
          <span class="el-alert__title is-bold">错误提示的文案</span>
          <p class="el-alert__description">文字说明文字说明文字说明文字说明文字说明文字说明</p>
          <i class="el-alert__closebtn el-icon-close"></i>
         </div>
        </div>
       </div>
      </div>
     </el-card>
    </el-aside>
   </el-container>
  </el-card>
  <calendarDrawer ref="calendarDrawer"></calendarDrawer>
  <calendarForm ref="calendarForm"></calendarForm>
 </div>
</template>
<script>
import calendarDrawer from "./calendar-drawer.vue";
import calendarForm from "./calendar-form.vue";
export default {
 components: { calendarDrawer, calendarForm },
 data: function() {
  return {
   value: new Date(),
   isArrange: [
    "2020-06-08",
    "2020-06-09",
    "2020-06-10",
    "2020-06-11",
    "2020-06-17",
    "2020-06-18"
   ]
  };
 },
 created: function() {
  this.$nextTick(() => {
   // 点击前一个月
   let prevBtn = document.querySelector(
    ".el-calendar__button-group .el-button-group>button:nth-child(1)"
   );
   prevBtn.addEventListener("click", e => {
    console.log(this.data);
    this.$notify({
     title: "上一月",
     message: "上个月头天:" + this.value,
     type: "success",
     position: "top-left"
    });
   });
 
   //点击下一个月
   let nextBtn = document.querySelector(
    ".el-calendar__button-group .el-button-group>button:nth-child(3)"
   );
   nextBtn.addEventListener("click", () => {
    console.log(this.value);
    this.$notify({
     title: "下一月",
     message: "下个月头天:" + this.value,
     type: "warning",
     position: "top-left"
    });
   });
 
   //点击今天
   let todayBtn = document.querySelector(
    ".el-calendar__button-group .el-button-group>button:nth-child(2)"
   );
   todayBtn.addEventListener("click", () => {
    this.$notify.info({
     title: "今天",
     message: "今天:" + this.value,
     position: "top-left"
    });
   });
  });
 },
 mounted: function() {},
 methods: {
  //点击日期块
  calendarOnClick(e) {
   console.log(e);
   // this.isArrange.push("2020-06-19");
   this.$notify.error({
    title: "日历块点击",
    message: e,
    position: "top-left"
   });
  },
  //点击信息块
  infoOnClick() {
   this.$refs.calendarDrawer.drawer = true;
  },
  //新增排班
  saveOnClick() {
   this.$refs.calendarForm.dialogFormVisible = true;
  },
  //删除排班
  infoDel() {
   this.$confirm("此操作将永久删除该排班, 是否继续?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning"
   })
    .then(() => {
     this.$message({
      type: "success",
      message: "删除成功!"
     });
    })
    .catch(() => {
     this.$message({
      type: "info",
      message: "已取消删除"
     });
    });
  }
 }
};
</script>
<style scoped>
.is-selected {
 color: #1989fa;
}
.p-popover {
 text-align: center;
}
._calendar {
 height: 99.5%;
 width: 100%;
}
.el-main {
 padding: 0px;
 overflow: hidden;
}
.calendar-info {
 height: 94%;
 overflow: auto;
}
.el-alert {
 margin: 15px 0px;
}
.el-alert:hover {
 transform: scale(1.02);
}
.el-alert:active {
 transform: scale(1.01);
}
</style>
<style >
._calendar .div-Calendar {
 height: 125px;
 box-sizing: border-box;
 padding: 8px;
}
._calendar .el-calendar-table .el-calendar-day {
 padding: 0px;
 height: 125px;
}
._calendar .el-container,
._calendar .el-calendar {
 height: 100%;
}
._calendar .el-card__body {
 padding: 0px;
}
</style>

 具体的几个点击事件都有备注,这里不细说了

到此这篇关于element日历calendar组件上月、今天、下月、日历块点击事件及模板源码的文章就介绍到这了,更多相关element calendar组件内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
用jscript启动sqlserver
Jun 21 Javascript
jqeury eval将字符串转换json的方法
Jan 20 Javascript
setInterval与clearInterval的使用示例代码
Jan 28 Javascript
javascript封装的sqlite操作类实例
Jul 17 Javascript
jQuery+ajax实现实用的点赞插件代码
Jul 06 Javascript
js注入 黑客之路必备!
Sep 14 Javascript
JS高级运动实例分析
Dec 20 Javascript
基于Vue开发数字输入框组件
Dec 19 Javascript
Vue组件库发布到npm详解
Feb 17 Javascript
Vue.js获取被选择的option的value和text值方法
Aug 24 Javascript
Vue 动态组件与 v-once 指令的实现
Feb 12 Javascript
Vue.js实现可编辑的表格
Dec 11 Javascript
JS图片懒加载技术实现过程解析
Jul 27 #Javascript
Element Notification通知的实现示例
Jul 27 #Javascript
Vue中watch、computed、updated三者的区别及用法
Jul 27 #Javascript
Element Backtop回到顶部的具体使用
Jul 27 #Javascript
解决vue中的无限循环问题
Jul 27 #Javascript
Element MessageBox弹框的具体使用
Jul 27 #Javascript
Vue 组件复用多次自定义参数操作
Jul 27 #Javascript
You might like
phpfans留言版用到的数据操作类和分页类
2007/01/04 PHP
php curl模拟post请求小实例
2013/11/13 PHP
PHP连接MySQL的2种方法小结以及防止乱码
2014/03/11 PHP
简单实用的PHP防注入类实例
2014/12/05 PHP
PHP编程求最大公约数与最小公倍数的方法示例
2017/05/29 PHP
PHP设计模式之工厂模式详解
2017/10/24 PHP
传智播客学习之java 反射
2009/11/22 Javascript
关于Ext中form移除textfield方法:hide(),setVisible(false),remove()
2010/12/02 Javascript
javascript中的undefined和not defined区别示例介绍
2014/02/26 Javascript
JS、jquery实现几分钟前、几小时前、几天前等时间差显示效果的代码实例分享
2014/04/11 Javascript
Bootstrap表单组件教程详解
2016/04/26 Javascript
JS封装的选项卡TAB切换效果示例
2016/09/20 Javascript
深入理解JavaScript中的块级作用域、私有变量与模块模式
2016/10/31 Javascript
微信小程序(六):列表上拉加载下拉刷新示例
2017/01/13 Javascript
bootstrap组件之按钮式下拉菜单小结
2017/01/19 Javascript
bootstrap模态框关闭后清除模态框的数据方法
2018/08/10 Javascript
Node.js中package.json中库的版本号(~和^)
2019/04/02 Javascript
浅入深出Vue之组件使用
2019/07/11 Javascript
JavaScript生成一个不重复的ID的方法示例
2019/09/16 Javascript
vue源码中的检测方法的实现
2019/09/26 Javascript
微信小程序实现侧边栏分类
2019/10/21 Javascript
jQuery 隐藏/显示效果函数用法实例分析
2020/05/20 jQuery
vue全局使用axios的操作
2020/09/08 Javascript
[44:04]OG vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
使用PyCharm配合部署Python的Django框架的配置纪实
2015/11/19 Python
python在文本开头插入一行的实例
2018/05/02 Python
python实现监控某个服务 服务崩溃即发送邮件报告
2018/06/21 Python
Python pandas.DataFrame 找出有空值的行
2019/09/09 Python
Python实现线性插值和三次样条插值的示例代码
2019/11/13 Python
python numpy库np.percentile用法说明
2020/06/08 Python
Perricone MD裴礼康美国官网:抗衰老护肤品
2016/09/26 全球购物
JINS眼镜官方网站:日本最大的眼镜邮购
2016/10/14 全球购物
日本最大化妆品和美容产品的综合口碑网站:cosme shopping
2019/08/28 全球购物
出国英文推荐信
2014/05/10 职场文书
幼儿园亲子活动通知
2015/04/24 职场文书
如何用 Python 子进程关闭 Excel 自动化中的弹窗
2021/05/07 Python