摘要:第十集从零开始实现计数器组件本集定位听到计数器这个名字很多人是不是一瞬间没有什么印象毕竟这个组件用的比较少就是那种左边一个右边一个控制某些数量的时候才会用到比如我之前做的商城小程序只有下单页面的规格弹出框里面才有他的身影如果是涉及到处理商
第十集: 从零开始实现( 计数器组件 )
本集定位:
听到计数器这个名字很多人是不是一瞬间没有什么印象, 毕竟这个组件用的比较少,就是那种左边一个"-"右边一个"+", 控制某些数量的时候才会用到, 比如我之前做的商城小程序只有"下单"页面的规格弹出框里面才有他的身影, 如果是涉及到处理商品数量很频繁的业务场景应该会很常见吧, 但是不要看这个组件小, 编写它的时候坑还不少, 本次我们就来做一个计数器, 目标就是尽可能小, 尽可能的省性能.
每次+1 -1是常态, 但是如果搞活动, 每次最少为+-2个或三个, 就要兼容一下了,( 举一个实际遇到的坑, 我们之前把用户限制为每次活动, 每个用户只能买2个, 但是没有做好防备, 导致用户可能这次只买一个, 而下次他再次购买的时候会提示每次只能买两个, 但显示他只点击了买一个, 因为他已经买过一个, 为了兼容这个问题, 搞得还要加莫名其妙的补救代码 )
中间的显示区应该可输入的, 用户想买1000个不可能让他+1+1+1..., 某些组件采用的是, 平时其为div, 点击之后变为input, 个人感觉完全没必要, 一个元素就够了, 何必搞两个元素, input状态下把他的默认样式去掉就好了.
左右两边要有限制, 很多时候会有限购一说, 比如我做的商城, 库存只有10个 或者单个用户最多购买3个, 最少买两个等等限制.
小数位数的显示一说... 这个其实我还真遇到过, 有一种需求叫做, 只要涉及数字就必须精确到后两位, 这种需求会导致后台同学对数据库做一定的限制, 从而我们传给后台的数据也就存在限制了.
2: 基本结构:先展示一章普通状态的图, 让我们更直观的去完成它, 造型比较别致, 是本套组件的一个特点, 哈哈做的与别人一样会导致思想的禁锢, 自己写代码多尝试新的东西, 但是工作中一定要中规中矩, 以公司条款为准则.
vue-cc-ui/src/components/InputNumber/index.js
import inputNumber from "./main/input-number.vue" inputNumber.install = function(Vue) { Vue.component(inputNumber.name, inputNumber); }; export default inputNumber
vue-cc-ui/src/components/InputNumber/main/input-number.vue
// 左侧的"➖"符号// 自己封装的icon组件, 出镜率还挺高文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/106522.html
相关文章
第十集: 从零开始实现一套pc端vue的ui组件库( 计数器组件 )
摘要:第十集从零开始实现计数器组件本集定位听到计数器这个名字很多人是不是一瞬间没有什么印象毕竟这个组件用的比较少就是那种左边一个右边一个控制某些数量的时候才会用到比如我之前做的商城小程序只有下单页面的规格弹出框里面才有他的身影如果是涉及到处理商 第十集: 从零开始实现( 计数器组件 ) 本集定位: 听到计数器这个名字很多人是不是一瞬间没有什么印象, 毕竟这个组件用的比较少,就是那种左边...
第十三集: 从零开始实现一套pc端vue的ui组件库( 评分组件 小星星 )
摘要:第十三集从零开始实现一套端的组件库评分组件小星星本集定位说起评分的话最早看到这种形式是电影网站每部电影得到几颗星这种方式后来就出现了用户来手动选星星打分的玩法这些方式更直观更吸引用户参与进去这个组件其实还有很多玩法比加载动画我可以把星星不断 第十三集: 从零开始实现一套pc端vue的ui组件库( 评分组件 小星星 ) 1. 本集定位 说起评分的话, 最早看到这种形式是电影网站...
第十二集: 从零开始实现一套pc端vue的ui组件库( jest单元测试 )
摘要:第十二集从零开始实现单元测试聊聊测试本次我会与大家分享一下我学测试时候记的笔记知识以及本次项目里面做的几个测试前端代码的单元测试与集成测试属于雷声大雨点小很多人一提到它都说是个好东西试问又有几个公司的项目是严格要求跑单元测试与集成测试的那测 第十二集: 从零开始实现( jest单元测试 ) 1.聊聊测试 本次我会与大家分享一下我学测试时候记的笔记知识以及本次项目里面做的几个测试...
第十一集: 从零开始实现一套pc端vue的ui组件库( tab切换组件 )
摘要:第十一集从零开始实现切换组件本集定位我们先来聊聊切换的意义不管是手机还是屏幕的大小是有限的人眼睛看到的范围也是有限的人们看信息的时候并不喜欢跳转这种操作或是我们要查某个知识点进入网站之后看了几眼没有需要的相关信息也就理所当然的退出去继续搜索 第十一集: 从零开始实现( tab切换组件 ) 本集定位: 我们先来聊聊 tab 切换的意义, 不管是手机还是pc, 屏幕的大小是有限的,...
第一集: 从零开始实现一套pc端vue的ui组件库(环境的搭建)
摘要:第一集从零开始实现环境的搭建工程定位本套工程定位在端针对的组件库名字的由来是我从年养到现在的一直大金毛是我的吉祥物原因本人上一份工作参与了大型的保险公司后台管理系统的搭建对的端框架有过一定的了解感受到了他们真的很强大同时也存在少许的不足其实 第一集: 从零开始实现(环境的搭建) 工程定位: 本套工程, 定位在pc端针对vue的ui组件库 名字的由来 cc是我从2015年养到现在的...
发表评论
0条评论
阅读 2956·2021-09-10 10:50
阅读 3136·2019-08-30 14:19
阅读 3474·2019-08-29 17:31
阅读 3199·2019-08-29 16:43
阅读 2155·2019-08-29 14:05
阅读 2061·2019-08-29 13:17
阅读 2015·2019-08-26 13:25
阅读 1715·2019-08-26 12:20