vue价格日历demo 实例

最新推荐文章于 2024-08-22 10:04:56 发布

bugeCsdn

最新推荐文章于 2024-08-22 10:04:56 发布

阅读量2.8k

点赞数

本文链接：https://blog.csdn.net/weixin_42048805/article/details/81115542

版权

<template>
  <div class="">
    <div class="datePickerContainer">
      <el-input  prefix-icon="el-icon-date" v-model="chooseedDay" size="mini" v-popover:dateList placeholder="请选择日期">
      <!--<i @click.native=" chooseedDay = ''" slot="suffix" class="el-input__icon el-icon-circle-close-outline"></i> -->
      </el-input>
      <el-popover v-loading="loadingPopDataList" popper-class="popover" width="546" ref="dateList" placement="bottom-start" trigger="click" :open-delay="300" @show="whenPopoverShow" v-model="showPop">
        <el-container class="container">
          <el-header class="header">
            <el-row>
              <el-col @click.native="returnToday" class="returnToday" style="width: 100px;cursor:pointer;">回到今天</el-col>
              <el-col style="width: 60px;">日</el-col>
              <el-col style="width: 60px;">一</el-col>
              <el-col style="width: 60px;">二</el-col>
              <el-col style="width: 60px;">三</el-col>
              <el-col style="width: 60px;">四</el-col>
              <el-col style="width: 60px;">五</el-col>
              <el-col style="width: 60px;">六</el-col>
            </el-row>
          </el-header>

          <el-container>
            <el-aside class="aside" width="100px">
              <el-row class="flex-align-center">
                <el-col :span="24"><img @click="getLastMonth" src="../../../../assets/images/top_arrow.svg" alt=""></el-col>
              </el-row>
              <el-row class="flex-align-center">
                <el-col :span="24"><span>{
 {dateObj.thisYear + '年' + dateObj.thisMonth + '月'}}</span></el-col>
              </el-row>
              <el-row class="flex-align-center">
                <el-col :span="24"><img  @click="getNextMonth" src="../../../../assets/images/bottom-arrow.svg" alt=""></el-col>
              </el-row>
            </el-aside>

            <el-main class="main">
              <el-row>
                <el-col v-if="pioneerDateSequenceInWeek > 0&