526互联

关于引用elementui中的el-date-picker组件

发布时间 2023-08-07 14:58:30作者: Harryrui

最近有一个需求要用到elementui中的日期选择器组件，但是elementui中的不太满足，在网上找到一个引用里面的组件的教程https://blog.csdn.net/mouday/article/details/103932261

但是引用完成后报错Module parse failed: Unexpected token (65:6) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

应该是解析器问题，接着百度找到一个复制上好用

  config.module
      .rule('thejs')
      .test(/\.js$/)
      .include
      .add(path.resolve('src'))
      .add(path.resolve('node_modules/element-ui/packages'))
      .end()
      .use('babel-loader')
      .loader('babel-loader')
      .end()

这是组件里的完整代码

<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: ()=>{
        return new Date()
      },
      type: Date
    },
    dateV: {
      default: ()=>{
        return 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) {
      console.log(date,123)
      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>