After working hard all day today, I finally released the first VUE component of my own. The inspiration comes from writing a small demo of today that year. I have not found the component that only selects month and date on the Internet. So I decided to write one by myself. After writing it, I thought why not post it on the Internet and share it with others. So I spent a day to publish my component on NPM. Because this component is based on elementUI, using this component also requires downloading Element’s dependencies. Here I give you a simple introduction to use:

1. Install dependencies

NPM install monthes-days NPM I element-ui-sCopy the code

I started thinking about the name month-Dayes, but when I realized it was already available, it was a first-come, first-served thing. It’s hard to ignore my English.

2. The main configuration. Js

Add the following content to 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);
Copy the code

‘monthes-days’ can also be used in whatever file you want, without importing it globally.

3. Use it in vUE

We just reference the component where we need it:

<monthes-days></monthes-days>
Copy the code

Let’s look at the effect:

Oh, I remember when I wrote this border removed, always feel a little ugly. So let’s get rid of this.

Add the following code to the component’s style:

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

Then let’s take a look:

Of course, this is the global style of configuration, which is definitely not good.

So we need to scoped: I’m going to go ahead and do some scoped tutorials online.

4. Get the selected value

Due to the limited technical level, this component is completely equivalent to a child component, so we can get the value of the child component in the parent component, the specific code is as follows:

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


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

So we get the selected value!

5. Show

I am also the first time to release, there are still many things that may not be clear, there must be deficiencies in the team, I hope you can give me more advice. Come on, work hard together!