阿里矢量图标库:https://www.iconfont.cn/ 一、效果 二、封装 三、总结 功能不多,更多的是样式的设计和颜色的搭配。 谦良恭卑,信诚实至;生活不易,共勉同求。 ...
随之做大屏的项目越来越多,echarts用得就越来越多,但是每一个项目都会有不同的挑战,因为并不是所有的需求都处理过,比如:ui小哥哥设计了一款日历组件,如下图: 看到这个设计图,我首先就找了echarts官网中的日历图进行修改,但是改了一个下午一点进展都没有,在网上搜索也并没有找到相似的,最后,我立了一个flag,怕啥,自己封装一个吧 于是,开启封装日历组件的进程 首先,看ui图: .图例有四种 ...
2020-09-27 16:41 0 716 推荐指数:
阿里矢量图标库:https://www.iconfont.cn/ 一、效果 二、封装 三、总结 功能不多,更多的是样式的设计和颜色的搭配。 谦良恭卑,信诚实至;生活不易,共勉同求。 ...
封装就是要具有灵活性,样式自适应,调用的时候传入props就可以变成自己想要的样式。 效果展示网址:https://1963331542.github.io/ 源代码: 日历组件源代码 ---------------------------------------------------------------------- ...
说明: 1.基于element-ui开发的vue日历组件。 地址 更新: 1.增加value-format指定返回值的格式2.增加头部插槽自定义头部 <ele-calendar > <template slot-scope="slotProps"> ...
日历组件 由于移动端项目中需要用到日历组件,网上找了下,没看到几个合适的,就尝试着自己写一个。然后发现也不是很复杂,目前只做了最基本的功能,大家也可以拿去做做二次开发。 如何写一个日历组件 基础效果如下图: 然后可以接受一个起始日期参数start-date,设置日历当前显示的年月 ...
前言 因项目的需要,而且当前组件库并不支持业务,所以,重新对日历组件进行封装。该篇博客就对实现日历的思路进行存档,方便以后的查阅。 先上图:UI小哥哥的原型图。接下来的思路都是根据该图进行解说 逻辑 1.组件的拆分,分出哪些是业务,哪些是基础组件。 整体来说,这就是在日历的基础上添加 ...
css ...
记录一下我前段时间封装的一个vue组件吧。技术需要积累,有时间我把我之前写的还不错的组件都开源出来。并尝试vue和react 两种方式的组件封装。今天简单写下鼠标框选div选中效果的封装吧。 div框选实现 div框选效果,其实没有什么好的方法,就是获取鼠标事件,根据鼠标的位置,动态创建一个 ...
第一步,编写你的组件ShopSelect/index.vue(此处模板内容省略) 第二步,在组件同级目录新建index.js,引入上面的组件,并暴露一个install方法 import ShopSelect from './index.vue' export default ...