Message 消息提示——坑

今天调调用消息提示组件时报错提示：
"TypeError: this.$message is not a function"

然后打印了下 this.$message 发现是个对象，将代码改为：

this.$message.warning("结束时间不能小于开始时间！");

但是这种写法有个弊端，就是如果你当前页面有弹框的时候，这个提示信息会在遮罩层下面，导致提示信息的明显都不高，甚至可能会被弹框遮住，于是又问了下度娘，给的解决办法是：

方法一：

先在你要用的页面去引入

import { Message } from "element-ui";

然后再调用

        Message({
          type: "warning",
          message: "结束时间不能小于开始时间！"
        });

或者：

Message.warning("结束时间不能小于开始时间！");

方法二：

适合于你负责的项目，之后肯定会经常用到，首先在utils文件目录下新建plugin.js文件，这个文件一般都是负责整个项目的全局配置属性
然后同样的先引入

import { Message } from "element-ui";

然后导出 Message

export default { // 全局注册message Vue.prototype.$message = Message; }

引入后就可以直接调用啦：

this.$message({ type: "warning", message: "结束时间不能小于开始时间！" });

或：

this.$message.warning("结束时间不能小于开始时间！");

DatePicker 日期选择器

选择周

按周选择时展示具体日期范围

HTML代码：

<el-date-picker v-model="queryParams.times" type="week" format="yyyy 第 WW 周" placeholder="选择周" :picker-options="{'firstDayOfWeek': 1}"></el-date-picker>

使用 :picker-options="{firstDayOfWeek: 1}"改变周起始日，默认是7
js：
首先引入 dayjs库

import dayjs from "dayjs"

然后调用就好啦：

   // 查询
    handleQuery() {
      if (this.queryParams.times) {
        this.queryParams.startTime = dayjs(this.queryParams.times).startOf('week').add(1, 'day').format('YYYY.MM.DD');
        this.queryParams.endTime = dayjs(this.queryParams.times).endOf('week').add(1, 'day').format('YYYY.MM.DD');
        this.getNationwideData();
      }
    },

type="week" value-format="yyyy 第 WW 周"报错

解决：
第一步
去掉 value-format="yyyy 第 WW 周" 第二步：
引入：

import moment from 'moment';

调用：

moment(this.queryParams.times).format("YYYY第 WW 周")

选择月份范围

从开始时间后，限制可选范围为6个月（最多只能选择连续6个月）

HTML：

<el-date-picker v-model="value3" :picker-options="pickerOptions_month" format="yyyy 年 M 月" value-format="yyyy年M月" type="monthrange"
            range-separator="-" start-placeholder="开始月份" end-placeholder="结束月份">

JS：

      value3: [],
      selectData: '',
      pickerOptions_month: {
        onPick: ({ maxDate, minDate }) => {
          this.selectData = minDate.getTime();
          if (maxDate) {
            // 解除限制
            this.selectData = '';
          }
        },
        disabledDate: (time) => {
          if (this.selectData) {
            const curDate = this.selectData;
            const three = 180 * 24 * 3600 * 1000;// 6个月
            const threeMonths = curDate + three; // 开始时间+6个月
            return time.getTime() < curDate || time.getTime() > threeMonths;
          }
        }
      },

效果：动画3.gif

只能选择前后一个月的时间段

将 disabledDate 改为：

        disabledDate: (time) => {
          if (this.selectData) {
            const one = 30 * 24 * 3600 * 1000;
            const minTime = curDate - one;
            const maxTime = curDate + one;
            return time.getTime() < minTime || time.getTime() > maxTime
          }
        }

当前时间到前六个月

将 disabledDate 改为：

        disabledDate(time) {
          //最近6个月
          const now = new Date();
          const sixMonthsAgo = new Date(now.getFullYear(), now.getMonth() - 5, 1);
          return time.getTime() < sixMonthsAgo.getTime() || time.getTime() > now.getTime();
        }

在日期集合范围内的日期可选，不在的则禁止

HTML:

<el-date-picker v-model="timesValue" type="date" placeholder="请选择日期" value-format="yyyy-MM-dd" format="yyyy 年 MM 月 dd 日" :picker-options="pickerOptions"
      @change="changeDate"></el-date-picker>

JS:

<script>
import moment from 'moment';
export default {
  name: 'datePickerY',
  data() {
    return {
      pickerMaxDates: [
        "2023-06-01",
        "2023-07-01",
        "2023-08-01",
        "2023-08-05",
        "2023-08-07",
        "2023-08-10",
        "2023-08-14",
        "2023-08-17",
        "2023-08-21",
        "2023-08-22",
        "2023-08-28",
        "2023-08-30",
        "2023-08-31",
        "2023-09-14",
        "2023-09-21",
      ],
      timesValue: '',
      pickerOptions: {
        disabledDate: (time) => {
          let dateTime = moment(time).format("YYYY-MM-DD");
          if (this.pickerMaxDates.indexOf(dateTime) == -1) {
            //disabledDate属性：true为禁用，false为可用  如果面板里的时间戳不包含在可选时间戳里面则禁用
            return true;
          }
        },
      }
    }
  },
}
</script>

效果:

日期.gif

element-ui踩坑系列