el-date-picker 直接显示日期面板

1. el-date-picker 组件介绍

• 在 ElementUI，组件的源码都放在了 /packages/ 里对应组件名的文件夹，比如 el-date-picker 组件是 /packages/date-picker ， el-input 组件是 /packages/input
• 然后文件夹里面一般是一个 index.js 供注册和一个 src 目录存放组件实现相关的代码。
• 然后 css 的文件代码则是放在了 /packages/theme-chalk/src 文件夹里对应的 [组件名].scss

el-date-picker 组件，和源码对应,主要分为三个部分

• picker——类似输入框的东西，点击它会触发日期面板的显示。
• panel——日期面板的载体，主要跟表格的数据变化有关，并且承接 picker 和 basic 的数据交换。
• basic——显示在日期面板里的日期表格或者其他年，月，时间表格，并且负责时间表格的交互功能。

2. 自定义el-date-picker 组件

2.1 复制一份组件源码

将 node_modules/element-ui/date-picker 直接复制出来放到项目中的一个文件夹中，例如 components

2.2 解决编译报错

date-picker\src\basic\time-spinner.vue文件中注释ElScrollbar的引入

2.3 封装自定义组件

可以自定义 el-date-picker 插件,并且不会影响到 element-ui 本身组件

<!--date.vue -->
<template>
  <div class="date-panel">
    <date-panel ref="datePanel" :dateV="dateV" @pick="pick"></date-panel>
  </div>
</template>
<script>
import DatePanel from "@/components/date-picker/src/panel/date.vue";

export default {
  props: {
    date: {
      default: new Date(),
      type: Date
    },
    dateV: {
      default: new Date(),
      type: Date
    },
    showTime: {
      default: false,
      type: Boolean
    }
  },
  components: {
    DatePanel
  },
  model: {
    // 作为组件，v-model 接收的字段
    prop: "date",
    event: "change"
  },
  mounted() {
    // 日期
    this.$refs.datePanel.value = this.date;
    // 是否包含时间
    this.$refs.datePanel.showTime = this.showTime;
    // visible控制是否显示日期面板
    this.$refs.datePanel.visible = true;
  },
  methods: {
    pick(date) {
      this.$refs.datePanel.value = date;
      this.$refs.datePanel.resetView && this.$refs.datePanel.resetView();
      this.$emit("change", date);
    }
  }
};
</script>
<style scoped>
/* 原生CSS的深度选择器<<< */
.date-panel >>> .el-picker-panel__footer {
  /* 隐藏.el-picker-panel的底部确定按钮 */
  display: none !important;
}
.date-panel >>> .el-picker-panel {
  box-shadow: none;
  /* border: 0; */
}
</style>

2.4 使用自定义组件

<template>
  <div class="HomePage">
    <el-button type="primary" @click="handleClick">Open</el-button>
    <el-dialog title="日期" :visible.sync="dialogVisible">
      <div>
        <dateComponent ref="dateComponent" v-model="time" :showTime="true" />
      </div>
      <div slot="footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import dateComponent from "./date.vue";
export default {
  name: "HomePage",
  data() {
    return {
      dialogVisible: false,
      time: new Date()
    };
  },
  components: { dateComponent },
  watch: {
    time(val) {
      console.log(val);
    }
  },
  mounted() {},
  methods: {
    handleClick() {
      this.dialogVisible = true;
    }
  }
};
</script>