用element+vue制作季节选择器，可以选择开始时间和结束时间（组件）

原创

于 2021-12-14 11:55:45 发布 · 2k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #elementui #javascript #前端

借鉴了某篇文章的季节选择器组件写的

原博：第十一篇: 使用ElementUi 卡片封装一个季度选择器公共组件，可直接使用_Yzt_199626的博客-CSDN博客

效果图：

代码如下：

<template>
  <div>
    <mark
      style="
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(0, 0, 0, 0);
        z-index: 999;
      "
      v-show="showSeason"
      @click.stop="showSeason = false"
    ></mark>
    <el-input
      placeholder="请选择季度"
      v-model="showValue"
      style="width: 300px"
      @focus="focusClick"
      clearable
    >
      <i slot="prefix" class="el-input__icon el-icon-date"></i>
    </el-input>
    <el-card
      class="box-card"
      style="
        width: 500px;
        padding: 0 3px 20px;
        margin-top: 10px;
        position: fixed;
        z-index: 9999;
      "
      v-show="showSeason"
    >
      <el-row>
        <el-col :span="12">
          <!-- <div class="left"> -->
          <div style="text-align: center; font-size: 14px; color: #606266">
            开始时间
          </div>
          <div
            class="clearfix"
            style="text-align: center; padding: 0; margin-top: 10px"
          >
            <