经过今天一整天的努力,终于发布了第一个属于我自己的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.说明
我也是第一次发布,还有很多东西可能说的不明白,小组件肯定也有不足的地方,希望大家多多指教。一起加油,一起努力!