基于vue的选择月日组件

经过今天一整天的努力，终于发布了第一个属于我自己的vue组件。灵感来源于写一个那年今日的小demo，在网上找只选择月份，日期的组件一直没有找到。于是打算自己写一个，写完之后想着既然网上没有，何不发在网上和大家一起分享呢，于是花了一天的时间将我的组件发布到了npm上。由于这个组件是基于elementUI的，所以用这个组件同时也需要下载element的依赖。下面我简单的给大家介绍一下用法：

1.安装依赖

命令：npm install monthes-days
      npm i element-ui -S

开始想叫month-dayes的名字，发现已经发布了，毕竟先到先得嘛，就取了个这个名字。忽略我的英语，难受。

2.配置main.js

在main.js里面添加下面的内容：

import ElementUI from 'element-ui';
import monthesDays from 'monthes-days'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI);
Vue.use(monthesDays);

'monthes-days’也可以自己想在哪个文件使用就在那个文件import，可以不用全局引入。

3.在vue中使用

我们在需要组件的地方引用即可：

<monthes-days></monthes-days>

接下来我们看看效果：

咦，这个边框我记得写的时候去掉了，总感觉有点丑。这里我们先办法去掉一下。

在组件的style中加入如下代码：

 <style>
 .el-popover{
    padding:0;
  }
</style>

然后我们再来看下：

当然这是配置的全局的样式，肯定是不好的。

那么我们就需要scoped穿透：关于这个知识点，大家应该知道，我就不废话了，网上也可以找到相应的教程。

4.得到选中的值

由于技术水平有限，所以这个组件完全相当于一个子组件使用，所以我们在父组件中得到子组件的值即可，具体代码如下：

<template>
    <monthes-days v-on:getValue="getValue">
    </monthes-days>
</template>


<script>
export default {
  methods:{
    getValue(val){
      console.log(val)
    }
  }
}
</script>

这样就可以得到我们选中的值啦！

5.说明

我也是第一次发布，还有很多东西可能说的不明白，小组件肯定也有不足的地方，希望大家多多指教。一起加油，一起努力！