按需引用element - datapicker且自定义下拉框样

需求背景

因为我们是自己写的h5，没有使用element或者ivew等架子，但是这次要写一个日历，但是直接引用element的话就有些浪费资源，所以我们按官网所说的按需引用。

• 先官网所说的安装babel-plugin-component

yarn add babel-plugin-component

• 然后修改 .babelrc 或者 babel.config.js 文件

module.exports = {
  presets: [
    '@vue/app'
  ],
  plugins: [
    [
      'component',
      {
        libraryName: 'element-ui',
        styleLibraryName: 'theme-chalk'
      }
    ]
  ]
}
// 添加plugins信息

• 当然，还是安装element

yarn add element-ui

• 然后在main.js中去引入就可以了

import { DatePicker } from 'element-ui'
Vue.use(DatePicker)

• 在vue中去使用就ok啦

<el-date-picker
   v-model="month"
   type="month"
   format="yyyy年MM月"
   value-format="yyyy年MM月"
   popper-class="select_date"
   class="title"
   :clearable="false"
   :picker-options="pickerOptions"
   @change="getMonthBill"
>
</el-date-picker>
// 需要注意的是format和value-format必须保持一致

我当时时需要把日期下拉框改的大一点，一定要重新写一个style,因为不可以加scoped不然是不生效的

<style lang="stylus">
.select_date{
  width 400px
  margin-left -10%
  .popper__arrow{
    margin-left 10%
  }
  .el-picker-panel__body-wrapper{
    .el-picker-panel__body{
      .el-picker-panel__content{
        width 100%
        margin 0
        .el-month-table{
            td{
              .cell{
                width 1.2rem
              }
            }
        }
      }
    }
  }
}
</style>

需求是我需要通过选择月份来查看此月份的用户充电信息，所以 对于当月之后的月份是没有的，需要设置为不可选

data () {
    return {
      month: moment().format('YYYY年MM月'),
      pickerOptions: {
        disabledDate: time => {
          return time.getMonth() > moment().month()
        }
      }
    }
  },