标签：picker el 自定义 refs date panel datePanel

一、将 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 本身组件。

标签：picker,el,自定义,refs,date,panel,datePanel
来源： https://www.cnblogs.com/hq2020/p/15224952.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。