![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue造轮子
使用vue的特性一个一个造轮子
A-Tione
前端工作人员
展开
-
用vue写轮子的一些心得(十三)——scroll滚动组件
需求分析可模拟原生滚动条。 在滚动区域滚动滚轮内容可进行滚动。 鼠标点击滚动条拖拽可滚动内容。 内容区域滚动条关系为等比关系,内容滑动多少滚动条就滚动多少。 当有图片或视频资源延迟加载的资源,滚动条会在资源加载完成后更新最新位置。方法实现一、思路:1、主要的日期面板通过数值展示通过计算得出,首先通过new Date() 找到当天,并推理出面板的第一项为几月几号,因为面板固定为六行七列一共42项(为啥是42项?我们后面再说),因此我们找到了面板的第一项就能往后推41项,从而将面...原创 2020-08-20 11:19:51 · 686 阅读 · 0 评论 -
用vue写轮子的一些心得(十二)——datePicker日期选择器组件
需求分析可查看日期,可选择上一月或者下一月,上一年或者下一年。 高亮当前选择月(黑色),高亮今天样式(背景灰色),高亮选择的日期(蓝色边框)。 input框与日期面板选择值双向绑定,修改input值日期面板值同步修改,反之同理。 可清除input中的值,并关闭popover。 可选择年月,年月界面与日期可来回跳转。 可控制时间选择范围,超出时间范围时弹出提示。方法实现一、思路:1、主要的日期面板通过数值展示通过计算得出,首先通过new Date() 找到当天,并推理出面板的...原创 2020-08-11 15:32:12 · 1530 阅读 · 0 评论 -
用vue写轮子的一些心得(十一)——sticky粘滞组件
需求分析支持页面向下滚动时组件会自动粘滞在窗口顶部; 可配置粘滞在窗口顶部的间距;方法实现一、思路:1、通过窗口顶部到文档顶部的距离(window.scrollY)和sticky组件到窗口顶部的距离(top + window.scrollY)加上窗口顶部到文档顶部的距离(window.scrollY)来比较,前面大于后面则吸顶,后面大于前面则不吸顶。window.scrollY > top + window.scrollY二、方法实现1、sticky外...原创 2020-06-24 10:14:00 · 826 阅读 · 0 评论 -
用vue写轮子的一些心得(十)——upload图片上传组件
需求分析支持正常的图片上传功能; 支持图片多选上传; 支持图片预览; 支持配置长传图片大小校验,格式校验; 支持图片上传时提示不同的状态,成功、失败、上传中; 支持可X掉某一张图片;方法实现一、思路:1、首先图片上传是需要有服务器支持的,这里我们用node在本地起一个服务,模拟服务器接收上传图片并保存,再通过img标签的url链接拿到服务器的图片地址。2、多文件上传在前端只需要在类型为file的input的属性中增加multiple属性即可多选,文件格式同理在input...原创 2020-06-18 21:18:14 · 754 阅读 · 3 评论 -
用vue写轮子的一些心得(九)——table表单组件
需求分析支持斑马纹,默认斑马纹样式; 支持表格边框线,默认没有边框线; 支持table内容padding间距配置(是否为紧凑型); 支持给table设置高度; 支持全选与全选取消,默认不展示; 支持给任意选项排序; 支持请求数据时,展示loading状态; 支持可展开,当表格内容较多不能一次性完全展示时; 支持在table最后一列传自定义内容,比如按钮; 默认固定表头;方法实现一、table组件传参定义:一共可传12个参数和1个事件:striped:是否展...原创 2020-06-08 22:14:56 · 1230 阅读 · 0 评论 -
用vue写轮子的一些心得(八)——pager分页器组件
需求分析支持传入当前页码参数并展示; 支持页数过多的部分用省略号显示,并会动态变化; 支持支持点击左右方向键切换页码; 支持在只有一页的时候隐藏pager;方法实现1、pager外部组件传参定义:一共可传4个参数:total,页码条数 current,当前页码 current.sync,点击页码的current参数回调 hide-one-page, 默认不填一页时显示,false则隐藏<T-pager :total="10" :current="1" :cu...原创 2020-06-01 23:03:59 · 494 阅读 · 0 评论 -
用vue写轮子的一些心得(七)——validator表单校验组件
需求分析支持内置校验器,比如:邮箱校验、手机号校验等等; 支持自定义校验器; 支持自定义校验器,并不会造成全局污染,每次new一个新实例;方法实现1、表单校验基础搭建:校验器组件逻辑,首先校验必填项,required: true 是否必填,若无填写则直接return报错「必填」。接着再校验其它内置规则,email、手机号等等。export default function validate (data, rules) { let errors = {} ...原创 2020-05-23 19:07:54 · 822 阅读 · 0 评论 -
用vue写轮子的一些心得(六)——nav导航栏组件
需求分析支持横向导航竖向导航; 支持导航click展开下拉列表; 支持下拉列表click展开二级下拉列表,可任意层级; 配有展开动画;方法实现1、定义组件:在html中定义t-nav组件定义为最外层导航栏包裹器,nav-item组件包裹每一项导航名字,并且每个nav-item组件都声明一个name,用以标识每一项导航。sub-nav组件包裹含有下拉列表的导航项。<t-nav class="box" :selected.sync="selected" vertical.原创 2020-05-18 12:58:01 · 3348 阅读 · 0 评论 -
用vue写轮子的一些心得(五)——Slides轮播组件
需求分析Slides组件通常包括一下功能: 可支持自动播放 可设置自动播放时间 轮播图片高宽可自适应 支持触屏滑动轮播 可无缝轮播方法实现1、定义组件:在html中定义t-slides组件定义为最外层轮播图包裹器,t-slides-item组件包裹每张轮播图片,并且每个t-slides-item组件都声明一个name,用以标识每张图片。<t-slides class="wrapper" :autoPlay="autoPlay" .原创 2020-05-11 21:34:18 · 834 阅读 · 0 评论 -
用vue写轮子的一些心得(四)——Popover组件
需求分析Poppver组件通常包括一下功能:点击按钮根据按钮位置弹出弹出层,弹出层始终保持在最上方 可以定义弹出位置,支持上下左右弹出 支持可点击弹出内容,弹出层不会消失 弹出内容支持插入纯文字或者html结构 支持鼠标移入弹出,移出消失 支持鼠标点击按住不动弹出,松开消失方法实现1、定义组件:在html中定义弹出层内容与按钮样式统一规定写在popover...原创 2020-02-10 16:35:15 · 2138 阅读 · 2 评论 -
用vue写轮子的一些心得(三)——tab组件
需求分析tab组件通常包括一下功能:点击头部导航美女弹出美女相关内容,点击财经头部导航,弹出财经相关内容。 初次进入当前页面,默认初选状态可配置。 选中头部导航时出现active状态,文字加粗变色。 来回切换导航时,文字下方active横线有滑动效果。 可配置禁止点击tab。当然相比较element-ui,我们tab组件还有很多需求可以实现,但tab组件主要功能差不多就是以上...原创 2020-01-27 21:25:35 · 591 阅读 · 0 评论 -
用vue写轮子的一些心得(二)——toast组件
注册一个插件我们知道在vue中,如果需要在全局增加一个自己使用的对象,在vue的原型中:vue.prototype.xxx 后面接自己的对象通常是没有问题的,但是在项目中vue的原型是不能乱去修改的,因为一旦原型中有两个同名的对象,极有可能会出现灾难性的后果。因此我们需要使用vue中提到的一种方法Vue.use( plugin ),注册一个插件,集中性地管理这些将被添加到Vue.protot...原创 2020-01-04 18:13:04 · 511 阅读 · 0 评论 -
用vue写轮子的一些心得(一)——button组件、input组件、栅格布局组件
组件传值校验通过validator属性检查器检测父组件向子组件传值,可进行初步初步筛选,只允许规定的值传入,倘若传错则提示报错。 props:{ icon:{}, iconPosition:{ type: String, default: 'left', ...原创 2019-12-30 16:59:52 · 618 阅读 · 0 评论