vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > ElementUI年份范围选择器

ElementUI年份范围选择器功能实现

作者:Iswayzw

elementUI中有日期范围组件,月份范围选择的,就是没有年份范围选择的,需要加一个类似风格的,下面这篇文章主要给大家介绍了关于ElementUI年份范围选择器功能实现的相关资料,需要的朋友可以参考下

ElementUI 年份范围选择器

Element的日期选择器组件没有提供选择年份范围的功能。由于项目需要,决定用两个年份选择器封装一个,贴下代码供大家参考。

代码实现了年份范围选择组件的基本功能,以及父子组件间的双向通信。

实现效果

依赖

组件代码

<template>
  <div class="year-range-picker">
    <el-date-picker
      v-model="startYear"
      type="year"
      placeholder="选择开始年"
      size="mini"
      class="year-picker"
      @change="changeStartYear"
      format="yyyy 年"
      value-format="yyyy"
    >
    </el-date-picker>
    <span class="range-word"> 至 </span>
    <el-date-picker
      v-model="endYear"
      type="year"
      placeholder="选择结束年"
      size="mini"
      class="year-picker"
      @change="changeEndYear"
      format="yyyy 年"
      value-format="yyyy"
    >
    </el-date-picker>
  </div>
</template>


<script>
export default {
  name: "YearRangePicker",
  // 接收父组件传入的数据
  props: {
    yearRange: {
      type: Array,
      required: true,
    },
  },
  data() {
    return {
      startYear: "",
      endYear: "",
    };
  },
  mounted() {
    // 初始化自身变量
    this.startYear = String(this.yearRange[0]);
    this.endYear = String(this.yearRange[1]);
  },
  methods: {
    changeStartYear(val) {
      // 开始年份大于结束年份,调换
      if (Number(this.startYear) > Number(this.endYear)) {
        this.startYear = this.endYear;
        this.endYear = val;
      }
      // 将改动传回父组件
      this.$emit("yearChanged", [Number(this.startYear), Number(this.endYear)]);
    },
    changeEndYear(val) {
      if (Number(this.startYear) > Number(this.endYear)) {
        this.endYear = this.startYear;
        this.startYear = val;
      }
      this.$emit("yearChanged", [Number(this.startYear), Number(this.endYear)])
    },
  },
};
</script>


<style scoped>
.year-range-picker {
  color: black;
  text-align: center;
  font-size: 18px;
}

.range-word {
  margin-left: 10px;
  margin-right: 10px;
}

.year-range-picker .year-picker {
  max-width: 160px;
}
</style>

调用组件代码

<template>
  <div class="test-body">
    <!-- :yearRange 为父组件向子组件传参 -->
    <!-- :key 保证父组件的数据更新后,重新渲染子组件,使子组件也同步更新 -->
    <!-- @yearChanged 监听子组件向父组件传参 -->
    <year-range
      :yearRange="yearRange"
      :key="`${yearRange[0]}_${yearRange[1]}`"
      @yearChanged="handleYearChanged"
    >
    </year-range>
  </div>
</template>

<script>
// 引入组件
import YearRangePicker from "@/components/YearRangePicker/index.vue";

export default {
  name: "Test",
  data() {
    return {
      yearRange: [2021, 2022],
    };
  },
  components: {
    // 自定义组件标签名称
    "year-range": YearRangePicker,
  },
  methods: {
    handleYearChanged(val) {
      this.yearRange = val;
    },
  },
};
</script>


<style scoped>
.test-body {
  width: 100%;
  height: 400px;
  padding-top: 100px;
}
</style>

总结

本文实现的年份范围选择组件具有基本的年份范围选择功能。

但是也存在不足,用户调整一次年份范围,需要分别点击起始年份和结束年份,无法做到像官方的日期范围选择组件那样,点击一次,直接进行区间调整。

到此这篇关于ElementUI年份范围选择器功能实现的文章就介绍到这了,更多相关ElementUI年份范围选择器内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:
阅读全文