一、将 node_modules/element-ui/date-picker 直接复制出来放到项目中的一个文件夹中,例如 components
二、配置vue.config.js
三、新建 DatePanel.vue
<template> <div class="date-panel"> <date-panel ref="datePanel" :dateV="dateV" @pick="pick"></date-panel> </div> </template> <script> import DatePanel from "./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: { prop: "date", event: "change" }, mounted() { this.$refs.datePanel.value = this.date; this.$refs.datePanel.showTime = this.showTime; 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> .date-panel >>> .el-picker-panel__footer { display: none !important; } .date-panel >>> .el-picker-panel { box-shadow: none; border: 0; } </style>
最后:可以在 date-picker 中去自定义 el-date-picker 插件,并且不会影响到 element-ui 本身组件。