引入ElementUI 日历组件报错Module parse failed: Unexpected token (65:6)

由于业务需求,需要一个小型日历,ElementUI 组件中有一个日历组件,不过太大了,功能没有日期选择器中的日历全,所以,就想到单独引入日历选择器中中的日历组件
在这里插入图片描述

打开源码包找到日历组件所在位置,并引入

import DatePanel from "element-ui/packages/date-picker/src/panel/date.vue";

果不其然,报错了

Module parse failed: Unexpected token (65:6)
You may need an appropriate loader to handle this file type.
|     }, this.$slots.default);
|     const wrap = (
|       <div
|         ref="wrap"
|         style={ style }

最后有人帮忙解决了

1、安装依赖
https://github.com/vuejs/babel-plugin-transform-vue-jsx

npm install\
  babel-plugin-syntax-jsx\
  babel-plugin-transform-vue-jsx\
  babel-helper-vue-jsx-merge-props\
  babel-preset-env\
  --save-dev

2、添加vue-cli3的 vue.config.js配置

const path = require('path')

function resolve(dir) {
  return path.join(__dirname, dir)
}

module.exports = {
  chainWebpack: config => {
    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()
  }
}

最后成功引入, 不过修改默认是隐藏的, 而且组件不接收参数,可以使用继承的方式将隐藏属性改为显示,业务页面再进行引入

<script>
import DatePanel from "element-ui/packages/date-picker/src/panel/date.vue";

export default {

  extends: DatePanel,

  data() {
    return {
      visible: true
    };
  }
};
</script>

修改样式之后的效果
在这里插入图片描述

参考
https://github.com/ElemeFE/element/issues/14379

发布了1416 篇原创文章 · 获赞 370 · 访问量 130万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 编程工作室 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览