基于vue的选择月日组件
经过今天一整天的努力,终于发布了第一个属于我自己的vue组件。灵感来源于写一个那年今日的小demo,在网上找只选择月份,日期的组件一直没有找到。于是打算自己写一个,写完之后想着既然网上没有,何不发在网上和大家一起分享呢,于是花了一天的时间将我的组件发布到了npm上。由于这个组件是基于elementUI的,所以用这个组件同时也需要下载element的依赖。下面我简单的给大家介绍一下用法:
1.安装依赖
命令:npm install monthes-daysnpm 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.说明
我也是第一次发布,还有很多东西可能说的不明白,小组件肯定也有不足的地方,希望大家多多指教。一起加油,一起努力!
基于vue的选择月日组件相关推荐
- Mint UI —— 基于 Vue.js 的移动端组件库
写文章登录 Mint UI -- 基于 Vue.js 的移动端组件库 杨奕 8 个月前 Mint UI GitHub:https://github.com/ElemeFE/mint-ui 项目主页:h ...
- 移动端cube界面设计html,滴滴开源基于 Vue.js 的移动端组件库 cube-ui
原标题:滴滴开源基于 Vue.js 的移动端组件库 cube-ui 开源最前线(ID:OpenSourceTop) 猿妹 整编 综合自:https://didi.github.io/cube-ui/ ...
- iView 3.3.0 发布,基于 Vue.js 的企业级 UI 组件库
iView 3.3.0 发布了,代号 Transistor ,iView 是一套基于 Vue.js 的企业级 UI 组件库,主要服务于 PC 界面的中后台产品. 本次更新如下: https://www ...
- 基于Vue.js的表格分页组件
转载自 基于Vue.js的表格分页组件 有一段时间没更新文章了,主要是因为自己一直在忙着学习新的东西而忘记分享了,实在惭愧. 这不,大半夜发文更一篇文章,分享一个自己编写的一个Vue的小组件,名叫Bo ...
- 基于vue的组织架构树组件_Vue组件基于D3.js布局显示树
基于vue的组织架构树组件 Vue.D3.tree (Vue.D3.tree) Update documentationVue components to display graphics based ...
- 移动端vue实现部门结构功能_基于Vue制作组织架构树组件
编程之家收集整理的这篇文章主要介绍了基于Vue制作组织架构树组件,编程之家小编觉得挺不错的,现在分享给大家,也给大家做个参考. 由于公司业务需求,需要开发一个展示组织架构的树组件(公司的项目是基于Vu ...
- iView 3.4.0 发布,基于 Vue.js 的企业级 UI 组件库
百度智能云 云生态狂欢季 热门云产品1折起>>> iView 3.4.0 发布了,iView 是一套基于 Vue.js 的企业级 UI 组件库,主要服务于 PC 界面的中后台产品 ...
- 基于vue的老虎机活动抽奖组件
slot-machine slot-machine 是一个基于vue框架的老虎机抽奖组件,安装即用! 看下demo效果图: 老虎机 组件相关地址 老虎机demo 关于自定义样式 考虑到不同项目的自 ...
- 基于vue element 封装上传组件
基于vue element封装的上传组件 使用方法: 1.首先引入该组件 2.注册组件 3.页面使用 4.回调函数(如需其他回调自行封装 因为我暂时没用到其他的 哈哈哈) <template& ...
最新文章
- oracle 截取字符串和查找字符
- GC详解及Minor GC和Full GC触发条件总结
- DevOps:软件架构师行动指南(文摘)
- python取当前时间前后一定间隔的时间点
- flink scala shell命令行使用示例
- S4HANA事务码MM01创建物料的调试
- union distinct_当面试官问你UNION 和UNION ALL之间的区别时该怎么答?
- umask:默认权限分配的命令
- 最课程阶段大作业之01:使用SVN实现版本控制
- html最大化和最小化,电脑上最大化最小化图标变了怎么办
- QImage 图像处理
- 环保材料“接棒”汽车电子成主业?路畅科技“等到”金主
- 基于simulink的有源功率因数校正(APFC) 系统的性能仿真
- html生成一维码,JS条形码(一维码)插件JsBarcode用法详解【编码类型、参数、属性】...
- QT 多显示屏获取屏幕分辨率
- CYUSB3014 USB3.0与FPGA设计
- 40家全球知名MCU生产厂商及其详细介绍
- 名帖232 张雨 行书《行书帖选》
- 证照之星2022个人版证件照编辑排版换背景软件
- config配置中文解释
热门文章
- 剑指Offe 50:数组中重复的数字
- Office2016 Excel 快捷键备忘录
- Mockplus: 让小白产品经理上手就用的原型图设计工具
- C++编程FFMpeg实时美颜直播推流实战-基于ffmpeg,qt5,opencv视频课程-夏曹俊-专题视频课程...
- 武汉坚守第二十二天——谣言与辟谣与慌乱
- 使用基于ThinkPHP3.2.3的ThinkAdmin创建手机电脑通用的表白墙(七)优化:访问控制
- 动环监控系统中B接口的实现
- 转载:分布式Session共享:tomcat+memcached实现session共享
- python 给word动态添加水印
- 开发APP的java工具_app傻瓜式开发工具_app开发工具