由于业务需求，需要一个小型日历，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>
修改样式之后的效果
参考
