仿真elementUI的时间选择的季度选择

这篇具有很好参考价值的文章主要介绍了仿真elementUI的时间选择的季度选择。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

仿真elementUI的时间选择的季度选择,elementui,前端,javascript文章来源地址https://www.toymoban.com/news/detail-612699.html

<template>
  <div class="quarter">
    <div class="input-wrap" id="closeId" @mouseover="handler" @click.stop="btn" :style="{color:colorItem}"><i class="el-icon-date"></i>{{seasonValue}}<i class="el-icon-circle-close" :style="{display:displayShow}" @click.stop="close"></i></div>
    <div v-show="showSeason" ref="shows" class="pop">
      <template>
        <div class="card-header">
          <div class="el-icon-d-arrow-left" @click="prev" style="width: 16px;cursor: pointer;"></div>
          <span class="text-year" style="text-align:center">{{year}}</span>
          <div class="el-icon-d-arrow-right" @click="next" style="width: 16px;cursor: pointer;"></div>
        </div>
      </template>
      <div class="text-item" style="text-align:center;">
        <el-button type="text" size="medium" style="cursor: pointer;width:40%;color: #606266;float:left;" @click="selectSeason('第一季度')">第一季度</el-button>
        <el-button type="text" size="medium" style="cursor: pointer;float:right;width:40%;color: #606266;" @click="selectSeason('第二季度')">第二季度</el-button>
      </div>
      <div class="text-item" style="text-align:center;">
        <el-button type="text" size="medium" style="cursor: pointer;width:40%;color: #606266;float:left;" @click="selectSeason('第三季度')">第三季度</el-button>
        <el-button type="text" size="medium" style="cursor: pointer;float:right;width:40%;color: #606266;" @click="selectSeason('第四季度')">第四季度</el-button>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      showSeason: false, //是否显示选择季度面板
      year: new Date().getFullYear(), //默认当前年
      seasonValue: "请选择", //input中显示的内容
      time: {
        stTime: "",
        edTime: "",
      },
      colorItem: "#c0c4cc",
      displayShow: "none",
    };
  },
  created() {
    // 点击页面的任何一个地方,都隐藏提示
    this.text();
  },
  watch: {
    //方法1
    seasonValue(newVal, oldVal) {
      console.log(`新值:${newVal}`);
      console.log(`旧值:${oldVal}`);
      //  color: #606266;
      if (newVal == "请选择") {
        this.colorItem = "#c0c4cc";
      } else {
        this.colorItem = "#606266";
      }
    },
  },
  methods: {
    handler() {
      if (this.seasonValue == "请选择") {
        this.displayShow = "none";
      } else {
        this.displayShow = "block";
      }
    },
    text() {
      document.addEventListener("click", (e) => {
        if (this.$refs.shows) {
          let self = this.$refs.shows.contains(e.target);
          if (!self) {
            this.showSeason = false;
          }
        }
      });
    },
    btn() {
      this.showSeason = !this.showSeason;
    },
    close() {
      this.seasonValue = "请选择";
      this.showSeason = false;
    },
    prev() {
      this.year = +this.year - 1;
    },
    next() {
      this.year = +this.year + 1;
    },
    selectSeason(quarter) {
      this.seasonValue = this.year.toString() + "-" + quarter.toString();
      this.showSeason = false;
      switch (quarter) {
        case "第一季度":
          this.time.stTime = this.year.toString() + "-01-01" + " " + "00:00:00";
          this.time.edTime = this.year.toString() + "-03-31" + " " + "23:59:59";
          break;
        case "第二季度":
          this.time.stTime = this.year.toString() + "-04-01" + " " + "00:00:00";
          this.time.edTime = this.year.toString() + "-06-30" + " " + "23:59:59";
          break;
        case "第三季度":
          this.time.stTime = this.year.toString() + "-07-01" + " " + "00:00:00";
          this.time.edTime = this.year.toString() + "-09-30" + " " + "23:59:59";
          break;
        case "第四季度":
          this.time.stTime = this.year.toString() + "-10-01" + " " + "00:00:00";
          this.time.edTime = this.year.toString() + "-12-31" + " " + "23:59:59";
          break;
      }
      this.$emit("getQuarter", this.time); //传值给父组件
    },
  },
};
</script>
<style lang="scss">
.quarter {
  position: relative;
  .input-wrap {
    width: 220px;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    color: #606266;
    position: relative;
    .el-icon-date {
      color: #c0c4cc;
      margin-left: 10px;
      margin-right: 8px;
    }
    .el-icon-circle-close {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      right: 10px;
      color: #c0c4cc;
      display: none;
      cursor: pointer;
    }
  }
  .pop {
    width: 300px;
    position: absolute;
    background: #fff;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    border: 1px solid #dfe4ed;
    border-radius: 4px;
    color: #606266;
    padding: 8px 15px 15px 15px;
    top: 52px;
    z-index: 10;
    .card-header {
      height: 40px;
      border-bottom: 1px solid #e6ebf5;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 10px;
      .text-year {
        font-size: 16px;
      }
    }
    &::before {
      content: "";
      border-bottom: 10px solid #dfe4ed;
      border-left: 8px solid transparent;
      border-right: 8px solid transparent;
      position: absolute;
      left: 13%;
      -webkit-transform: translateX(-50%);
      transform: translateX(-50%);
      top: -8px;
      border-radius: 5px;
    }
    &::after {
      content: "";
      border-bottom: 8px solid #fff;
      border-left: 8px solid transparent;
      border-right: 8px solid transparent;
      position: absolute;
      left: 13%;
      -webkit-transform: translateX(-50%);
      transform: translateX(-50%);
      top: -6px;
      border-radius: 5px;
    }
  }
}
</style>

到了这里,关于仿真elementUI的时间选择的季度选择的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • elementUI时间选择器el-time-picker的坑

        这里有一个转换的坑需要注意 如果后端给的为默认为 Date 对象 值:\\\"2023-07-31T16:00:00.000Z\\\"或者是2023-07-31 16:00:00 这种格式拿到需要进行转换为你设定的HH:mm:ss格式,不然时间选择器会直接报错,无法识别时间类型 需要和后端协商好给什么类型格式 不然需要做一些列的时间转

    2024年02月13日
    浏览(37)
  • elementUI 时间段快捷选择及禁用(包含d2-crud-plus中使用)

    vue项目elementUI,需求为时间范围搜索,带快捷键并且只能选择今天之前,90天内的时间。搜索今天为实时数据,不能使用时间段,只能单独搜索。 ※注 需求是今天不可选,只有时间为空时才查询今天,所有下面代码中时间段快捷选择时,结束时间都是昨天。具体可根据自己需

    2024年01月25日
    浏览(34)
  • ElementUI日期选择器DatePicker限制所选时间范围(例如限制前后时长不超一个月)的实现

    未选择时间时,最初选择时间不能超过今天 选择初始时间后,第二个选择的时间前后不能超过初始时间的一个月。且此时下拉框变成禁用状态。 例如:点击7月15日后,在8月14日往后的日期全部禁止选中 7月15日前一个月的6月15日之前的日期也全部禁止选中 选好起始时间和结束

    2024年02月14日
    浏览(37)
  • ElementUI —— Cascader 级联选择器

    前言:         项目中使用Cascader级联选择器,通过递归处理后端接口返回的数据。    

    2024年02月13日
    浏览(40)
  • Layui时间范围选择器,添加【本周、本月、本季度、本年等常用时间快捷键】

    2.1 第一种实现 2.2 第二种实现

    2024年02月11日
    浏览(74)
  • 实现ElementUI中两个Select选择联动效果

    先上图 通过赋值的方式实现 即子级下拉选项循环数组为空 将所需的值对空数组 重新赋值 代码如下 第一个循环数组为 procedureType 第二个是 causeGroup 暂且称之为父级与子级 须注意的是父级下拉绑定的change事件 要对子级作出滞空操作 也就是 清空子选项的值 不然会出现切换选

    2024年02月15日
    浏览(44)
  • ElementUI Form:Cascader 级联选择器

    ElementUI安装与使用指南 Cascader 级联选择器 点击下载learnelementuispringboot项目源码 效果图 el-cascader.vue(Cascader 级联选择器)页面效果图 项目里el-cascader.vue代码 Cascader Attributes Cascader Events Cascader Methods Cascader Slots CascaderPanel Attributes CascaderPanel Events CascaderPanel Methods CascaderPanel Slo

    2024年02月21日
    浏览(41)
  • elementUI moment 年月日转时间戳 时间限制

       

    2024年02月11日
    浏览(57)
  • elementui时间日期组件右边自定义图标

    改为 首先是将左边的清除图标关闭 然后是将右边的图标设置为display:none,设置宽度,左右内边距 最后是

    2024年02月08日
    浏览(50)
  • Vue+ElementUI实现选择指定行导出Excel

    这里记录一下,今天写项目时 的一个需求,就是通过复选框选中指定行然后导出表格中选中行的Excel表格 然后这里介绍一个工具箱(模板): vue-element-admin 将它拉取后,运行就可以看到如下界面: 这里面的很多功能都已经实现了,比如上图我标记的导出Excel、Zip、PDF等。。。

    2024年02月13日
    浏览(35)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包