pc vue的ui组件库(计数器组件)

时间：2021-08-21 来源：互联网编辑：宝哥软件园浏览：次

当我听到名字计数器时，很多人一瞬间没有任何印象。毕竟这个分量用的比较少，就是左边的那个'-'右边的那个'，只有控制一定量的时候才会用到。比如我之前做的商城小程序，在‘订单’页面的规格弹出框里只有他的身影。如果涉及到产品数量非常频繁的业务场景，应该很常见，但是不要看这个组件，因为它很小，写的时候还是有很多坑的。

1:需求分析

一次1 -1是正常的，但如果你从事的活动，一次至少有-2或3个，所以你需要兼容。(为了给出一个实际的坑，我们限制用户每次活动只能买2个，但未能采取预防措施，导致用户这次可能只买一个。下次再买的时候会提示一次只能买两个，但显示只点击买一个。因为他已经买了一个，为了兼容这个问题，他不得不添加一个莫名其妙的补救代码。)应输入中间显示区域。如果用户想买1000件，他不可能做1 1 1件.有些组件平时采用div，点击后变成输入。个人认为完全没有必要。一个元素就够了。为什么需要制作两个元素？在输入状态下去掉他的默认风格就好了。左右两边要有限制，很多情况下会有限量购买。比如我店里只有10家店，或者单个用户最多可以买3家店，至少两家店等。小数位数的显示.其实我其实也遇到过这种情况。有一个要求，只要涉及到数字，就必须精确到最后两个地方。这种需求会导致背景学生对数据库做出一定的限制，这样我们就可以

首先，展示一张普通状态的图片，这样我们可以更直观地完成它。独特的形状是这组组件的一个特征。哈哈，和别人做同样的事情会导致思想的禁锢。自己写代码，尝试新事物，但工作一定要相当有规律，以公司的条款为准则。

vue-cc-ui/src/components/input number/index . js

从“”导入输入号码。/main/input-number . Vue ' input number . install=function(Vue){ Vue.component(input number . name，input number)；};导出默认的inputNumbervue-cc-ui/src/components/InputNumber/main/input-number . vue

模板div class=' cc-input-number '//左侧' :heavy _ minus _ sign: '符号div class=' cc-input-number _ _ reduce '//自封装图标组件。出场率相当高。s mirk _ cat : cc-icon name=' cc-reduce 2 '/div//中间显示和输入部分。让人又爱又恨的数字属性//以下属性可以杀死凡人的上下按钮//input 33603360-WebKit-外旋按钮//input 33603360-WebKit-内旋按钮{//-WebKit-外观3360 None//} input ref=' input ' type=' number ' class=' cc-input-number _ _ input ' div class=' cc-input-number _ _ add ' cc-icon name=' cc-add 2 '//div/div/Template在这里，我们选择将input和button放在一个div中，同一个级别不同于其他级别，因为它更直观，也足够实现我想要的功能。

3:事件的绑定

//reduce div class=' cc-Input-number _ _ reduce ' @ click=' reduce '//reduce div class=' cc-Input-number _ _ add ' @ click=' add '//Input ref=' Input ' type=' number ' class=' cc-Input-number _ _ Input ' @ Input=' Input change($ event ')这里我们有一个问题，就是这个组件是用v-model的形式写的，有一些缺点。在测试过程中，我发现，比如用户将同一个v-model绑定到多个组件，就会导致无限渲染的bug。下面的代码将被解释来解决这种错误。

prpos

prop : { max : { type : Number }。//默认值为undefined min 3360 { type: number }，step : {//每次计算的单位为type : number。Default: 1 }，value: {//绑定值，其中允许两种类型。为了方便用户书写，我们特别判断应该写type3360 [string，number]，required: true}。Precision: {//显示小数位数type: number，validator(value){ if(value 1 | | value==undefined){ return 1；} else { return parseInt(值)；}}}}，add方法的实现

Add() {//很可能是用户输入了字符串属性。//1:例如，后台返回一个字符串；//2:输入框为字符串类型；//3:与v-model绑定同一个值的其他组件已经给这个值赋予了字符串类型；让num=Number(this . value)this . step；//增加固定长度//这里我们抽象出一个函数this.emitVal(num)，它负责数值的变化；}，的实现}，reduce方法

reduce(){ let num=Number(this . value)-this . step；this . emit val(num)；}，收听输入框的输入事件

InputChange(e) {//This。此处可能出现字符串类型的emit val(number(e . target . value))；}，键赋值函数

emitVal

emitVal(newVal) { let { max，min }=this//未传递参数时，默认值未定义。//此值的限制在最大值以内，高于最小值if (max！==未定义的NewVal max)NewVal=max；if (min！==未定义的NewVal min)NewVal=min；//这里兼容下面的数字控件：let value=number (newval)。tofixed(这个。精度)；//这个oldVal将解释： point _ down : if(value===this。oldval)返回；this.oldVal=ls//发出两个事件，一个负责改变值，一个负责返回给用户。//毕竟用户不可能先听输入事件再附加值，太麻烦了。$ emit ('input '，值)；这个。$emit('change '，值)；//这一步非常重要。//这个。$refs.input.value=value将在下面详细描述。}以上遗留问题在此说明。

OldVal:可以防止许多冗余更改。比如用户复制粘贴了一组数字，大于max，但当时显示的值是max，所以不需要渲染，或者v-model不仅绑定了这个组件，还绑定了其他各种组件，导致值超出范围。这里会施加相应的限制，这个oldVal是最后一个合法值，所以测试结束后，应该把通过的值赋给他。

这个。$ refs . input . value=value；这一步看起来没什么用，因为当值改变时输入框中的值自然会改变，但实际测试并非如此。这个问题也出现在v型上。绑定多的时候值不会变，可能是vue的机制问题，他应该放在这。$emit(.);下面的操作，如果放在上面，会导致多次执行，因为它的执行会循环触发输入的监听事件。经过多次试验，这里还是没有bug。以上两个问题和v型有关，下面还有一个类似的问题，我们来看看。

价值监控

因为价值的变化不一定是通过-输入的三种方式，也可以通过第三方v-model的方式和用户手工填充的方式。

watch : { value : { handler(){//为了解决这个问题，多组件通用v-model采用的这种方法可以看作是另一种方式。让{value，time }=thisclearTimeout(时间)；//毕竟放入Macrotasks可以避免很多无限循环。time=setTimeout(()={if (value！==undefined) this.emitVal(值)；});}，//这意味着在打开页面时启动一次，非常有用，但是如果数据稍微多一点，就会消耗性能，所以要谨慎使用。//手表还有一个深度属性，可以把性能吃坏，可以深度监控里面的数据。immediate: true}}以上问题都是基于v-model，所以早就有人消除了双向绑定的弊端，封装的组件越多，感觉就会越明显。

4:风格判断

在计算属性中，我们团队监控当前值，返回灰色，对于用户自定义意义不大，所以直接写了。

computed : { value MIn(){ if(this . value===this . MIn)返回' # bbbbbb '；返回“”；}，value max(){ if(this . value===this . max)返回' # bbbbbb '；返回“”；} }，dom，如果你点击到最大值，它将灰显。我们已经阻止了继续点击上面的渲染

cc-icon size=' 25px ' name=' cc-add2 ' : color=' value max '/做一些有趣的事情

插槽是一个自由度很高的标签

包装左右按钮，以便用户可以定义显示的标签是什么样子

div class=' cc-input-number _ _ reduce ' @ click=' reduce ' slot name=' left ' cc-icon size=' 25px ' name=' cc-reduce 2 ' : color=' value min '/slot/div vue-cc-ui/src/style/input number . SCS @ import。/common/var . scss '；@import。/common/extend . SCS '；@import。/common/mixin . SCS '；@import。/config/index . scss '；@include b(input-number) {//友好的小手光标：指针；//有放大的动画。看过我文章的人都知道，我喜欢对操作类的组件有一个悬挂和停放的效果。transition:all .1salign-items:居中；display : inline-flex；背景-颜色：白色；hover {//如果放大被其他组件阻挡，就不值得了。z-index : 6；transform:标度(1.2)；}//招牌阴影@包含普通阴影($-color-black)；@ include e(add){ @ include FlexCenter()；padding: 4px 6px} @ include e(reduce){ @ include flexCenter()；padding: 4px 6px} @include e(input) {//删除输入框的默认样式border: noneoutline:nonedisplay:块；文本对齐：中心；宽度：60 px；height: 20px}}效果显示