Vue基于Element-UI二次封装日期选择器和分页组件

封装日期组件 （在MyDate.vue 文件中）

<template>
  <div class="my-date">
    <el-date-picker
      @change="handleChangeDate"
      v-model="selectDateValue"
      :value-format="formatDate"
      type="daterange"
      :align="align"
      unlink-panels
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      :picker-options="pickerOptions"
    >
    </el-date-picker>
  </div>
</template>

<script>
export default {
      
      
  data() {
      
      
    return {
      
      
      selectDateValue: [],  // 选择日期存放的值
      pickerOptions: {
      
            // 配置快捷日期选择
        shortcuts: [
          {
      
      
            text: "今天",
            onClick(picker) {
      
      
              const end = new Date();
              const start = new Date();
              picker.$emit("pick", [start,end]);
            },
          },
          {
      
      
            text: "昨天",
            onClick(picker) {
      
      
              const end = new Date();
              const start = new Date();
              end.setTime(end.getTime() - 3600 * 1000 * 24);
              start.setTime(start.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", [start,end]);
            },
          },
          {
      
      
            text: "最近一周",
            onClick(picker) {
      
      
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
      
      
            text: "最近一个月",
            onClick(picker) {
      
      
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
      
      
            text: "最近三个月",
            onClick(picker) {
      
      
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
    };
  },
  props: {
      
      
    // 日期格式  默认 yyyy-MM-dd
    formatDate: {
      
      
      type: String,
      required: false,
      default: "yyyy-MM-dd",
    },
    // 日期选择界面的 对齐方式 默认 居中(center)
    align: {
      
      
      type: String,
      required: false,
      default: "center",
    },
  },
  methods: {
      
      
    // 选择日期触发的事件
    handleChangeDate(val) {
      
      
      this.selectDateValue = val;
      this.$emit("changeDate", this.selectDateValue);
    }
  },
};
</script>

封装分页组件 （在Paging.vue 文件中）

<template>
  <div>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="1"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="10"
      layout="total, sizes, prev, pager, next, jumper"
      :total="totalData"
    ></el-pagination>
  </div>
</template>
<script>
export default {
      
      
  data() {
      
      
    return {
      
      
      pageParams: {
      
      
        pageCurrent: 1,  // 当前页
        pageSize: 10     // 每页的条数
      },
    };
  },
  props: ["totalData"],
  methods: {
      
      
    // 改变每页展示的数据大小
    handleSizeChange(val) {
      
      
      /**
       * 当触发事件改变了值 修改 pageParams 中的值 = val 然后触发绑在子组件上的父组件的事件
       *  将值传过去
       * 在父组件的事件里面 将得到的值修改到 pageParams 中 然后调用接口函数重新获取数据
       * pageBar 自定义的 方法 
       */
      this.pageParams.pageSize = val;
      this.$emit("pageBar", this.pageParams);   
    },
    // 改变当前页的页码
    handleCurrentChange(val) {
      
      
      this.pageParams.pageCurrent = val;
      this.$emit("pageBar", this.pageParams);
    }
  },
};
</script>
<style lang="scss" scoped>
.el-pagination button,
.el-pagination span:not([class*="suffix"]) {
      
      
  font-size: 12px;
}
.el-pagination {
      
      
  float: right;
  margin-top: 15px;
}
.el-icon-refresh-right {
      
      
  float: right;
  margin-top: 4.2%;
  font-size: 23px;
  font-weight: lighter;
  margin-right: 1%;
  color: #606266;
  cursor: pointer;
}
</style>

父组件中使用 （在test.vue 文件中）

<template>
  <div>
    <el-card>
      <el-row>
      	<my-date formatDate="yy-MM-dd" @changeDate="handleChangeDate"></my-date>    // 使用
      </el-row>
      <el-row>
        <div class="paging">
        <paging :totalData="totalData" @pageBar="handleChangePage"></paging>   // 使用
      </div>
      </el-row>
    </el-card>
  </div>
</template>
<script>
import myDate from "../../components/datePlugin/myDate.vue";  // 引入 组件的位置
import Paging from '../../components/pagebar/Paging.vue';  // 引入 组件的位置
export default {
      
      
  components: {
      
       myDate, Paging },    // 注册组件
  data() {
      
      
    return {
      
      
      totalData: 20
    };
  },
  methods: {
      
      
    // 日期
    handleChangeDate(val) {
      
      
      // ·········  (此处写一些业务逻辑)
      console.log(val);
    },
    // 时间
    handleChangePage(val) {
      
      
      // ·········  (此处写一些业务逻辑)
      console.log(val)
    }
  },
};
</script>
<style lang="scss">
</style>