![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
开发自定义组件
使用Vue开发前端组件
唯心主义蠢货
这个作者很懒,什么都没留下…
展开
-
唯心主义蠢货的[UI组件_5]时间选择器
实现一个简易版的时间选择器原创 2019-11-25 19:52:03 · 139 阅读 · 0 评论 -
唯心主义蠢货的[UI组件_4]走马灯
实现可选卡片化的走马灯组件 卡片化效果 非卡片化效果 逻辑分析与代码实现 整体结构 整体分为carousel和carousel_item,通过$parent 和 $children 进行父子间组件的选择,类似发布订阅模式 carousel:包含slot插槽,显示窗口和indicator指示器,控制走马灯的整体效果,包括item的显示方式,如何进行切换,切换速度,以及一些相关事件操作 caro...原创 2019-11-25 17:15:54 · 527 阅读 · 0 评论 -
唯心主义蠢货的[UI组件_3]Loading加载(css练习)
实现效果 line型 point型 解决的问题 vue.directive的相关使用 练习css制作loading动画 position踩到的部分坑 代码实现 Vue部分 vue部分的结构很简单 整体用visible控制是否显示 用if else判断loadingStyle分别渲染point型和line型的loading动画 对于point型,通过for渲染9个点,然后在css中对点进...原创 2019-10-28 21:06:28 · 127 阅读 · 0 评论 -
唯心主义蠢货的[UI组件_2]如何写一个全局通过函数调用的弹窗
实现效果 解决的问题 vue.use的使用/ vue.extend+mount 和 vue.component的区别 如何使用prototype实现全局通过函数调用 弹窗效果的实现,以及对应弹窗的排版和回调函数的执行 如何实现弹窗的拖拽效果 (v-directive 拖拽指令) 问题相关知识 vue.use vue.install源码分析 /* istanbul ignore if ...原创 2019-10-24 15:09:45 · 129 阅读 · 0 评论 -
唯心主义蠢货的[UI组件_1]如何写一个侧边栏
最终效果 基本功能 判断是否有二级菜单 代码结构如下: 点击显示/隐藏二级菜单 代码结构如下: 根据是否存在submenu控制二级菜单的显示 关于route部分 (可看代码位置) 添加伸长收缩动画 原思路(获取dom) 获取dom,设置element.style.height这样的方法,以下是踩到的坑: element.style.height不能获取clas...原创 2019-10-16 15:48:30 · 212 阅读 · 1 评论