第三集：从零开始实现（按钮组件1）本集定位：为什么叫1？因为感觉这个组件细节比较多，应该讲的内容很多，所以这一集先实现基本功能，然后再跟着Set展开。按钮组件是基本上每个项目都会用到的组件。传统的纽扣也是一样的款式，好像纽扣不做就没有用。我想添加一些其他人没有添加的内容。把玩ui组件库的样式，做过项目的小伙伴都会遇到一个问题，防抖和节流，而这么一个主要的功能并没有集成ui组件库的按钮。这次我将这两个功能整合到按钮Let'sgetstarted中。创建组件的基本结构，继续坚持bem的思想。按钮的整体结构如下：index.js文件还是老套路，组件的name属性很重要。从'./main/button.importButton.vue'Button.install=function(Vue){Vue.component(Button.name,Button);};导出默认的Buttonbutton.vue载体使用button的native标签代替div标签来模拟，因为button本身有很多native属性，语义比div好。当然，slot标签是在按钮中间接收用户输入的信息。button的第一个，当然是type先开胃了1:Vue的class属性很强大，可以是数组，字符串，也可以是对象，我用的数组覆盖了所有形式，然后对象类型也会在这个类数组中使用。2：native类型也是接受的，因为用户会有这样的需求，我命名为nativeType，和element一样。3：定义几个对应的字体样式。type属性没有校验，因为即使用户没有按照我给的范围传值，也代表样式没有改变，没有其他影响。下一步是定义按钮的类型样式。Button.scss@import'./common/var.scss';//导入所有定义的变量@import'./common/mixin.scss';//导入所有函数@import'./common/extend.scss';//引入公共样式@includeb(button){cursor:pointer;//鼠标变小align-items:center;//轴对齐显示：inline-flex;//开启flex模式，因为需要保持线条特征，所以是inline-flexvertical-align:middle;//居中对齐，justify-content:centerforfutureiconpreparation;//居中背景颜色：白色；//白色轮廓:0;//聚焦时去除轮廓border-radius:6px;//感觉圆角6还是比较友好的，没有做成可配置transition:all0.1s;//当然需要动画，交互体验很重要&:active{//点击时box-shadow:none;//嘿，这是我的ui组件的独特风格opacity:0.7;//稍微变暗，表明点击已经到达transform:translateX(2px)translateY(2px)scale(0.9);//会有一个小位移}&:hover{//悬停改变颜色background-color:rgba(0,0,0,0.06)}@includecommonShadow($--color-black);//下面会说什么？@at-root{@includecommonType(cc-button--)//下面会说什么？};}var.scss文件，本项目使用的基本配色方案，毕竟不是专业人士请见谅？//基本颜色$--color-black:#000000!default;$--color-white:#FFFFFF!default;//基本颜色明亮$--color-nomal:#409EFF!default;$--color-success:#7CCD7C!default;$--color-warning:#FFB90F!default;$--color-danger:#FF0000!default;$--color-disabled:#bbbbbb!default;$--color-difference:#F5F7FA!default;//字体$--size-big:16px;$--size-nomal:15px;$--size-small:14px;//输入框$--color-input-placeholder:#aaa!default;这个东西意味着最低优先级，可以被其他人放在首位。mixin.scss@mixincommonShadow($color){@if$color=='success'{$color:$--color-success;}@if$color=='warning'{$color:$--color-warning;}@if$color=='danger'{$color:$--color-danger;}@if$color=='disabled'{cursor:not-allowed;$color:$--颜色禁用；颜色：$颜色；边框：1px实心$color；盒子阴影：2px2px$颜色；}@mixincommonType($name){@each$typein(success,warning,danger){.#{$name}#{$type}{@includecommonShadow($type);}}}1：先说commonShadow这个函数，这是这套ui框架的特色风格（惨不忍睹），就是想做点不一样的，这个函数很简单，会根据不同返回风格传入的$color值，只要使用这个函数就会给元素加上阴影效果。注意不要习惯性的在@if后面协商括号2:既然样式不止一种，commonType函数就应运而生了。它以数组的形式循环我定义的几种样式类型，@Each后面是每次循环出的项目，in后面的()是要循环的数量3：.#{$name}#{$type}是传入金额和item的拼接，#{}在sass中可以拼接，不是id的意思，我传入了'cc-button--'所以这个函数定义了'cc-button--success','cc-button--warning','cc-button--danger'三种样式添加对应颜色的阴影效果，如图，点击等更多效果可以来我的博客要看哈哈？没用过@at-root关键字的朋友注意1：这个关键字的作用是让样式跳出{}花括号，比如我写在类名cc-button下的样式，然后我使用如下写法：.cc-button{.cc-button--success{}}上面的意思是在.cc-button中有一个class为.cc-button--success的元素，并给这个赋予相应的属性元素，这显然不是我想要的，.cc-button{@at-root{.cc-button--success{}}}相当于.cc-button{}.cc-button--success{}所以我说他相当于跳出{}大括号。点击disabled属性我把这个属性写在行的第二位，因为有点击没有点击，这是最基本的功能。<莫名出现/button>touchstart是不是很奇怪，因为我发现如果苹果手机不加这个属性，按钮是无法点击的。保险起见最好加上。万一操作员在家里改变了什么，结果是用户点击了不，这是一道坏菜。也可以将对象添加到类属性数组中。Vue强大的解析能力，如果用户通过disabled，使用is-disabled的类名@click事件返回给用户，因为This是一个组件。如果用户要触发点击事件，需要自己写.native修饰符，避免给用户带来冗余代码。这里我会主动处理。接下来会重构点击事件，因为需要配合节流和反提示：disabled属性是我的，默认是布尔值，所以如果用户只是传一个disabled值，就是true，不需要write:disabled='true',如果我不写，默认是boolean类型，是undefined，方便用户写提示.is-disabled){&:active{box-shadow:none;不透明度：0.7;变换：translateX(2px)translateY(2px)scale(0.9);}&:hover{background-color:rgba(0,0,0,0.06)}}@includewhen(disabled){@includecommonShadow(disabled);}1：只有非disabled状态时，才有点击效果，hover效果2：disabled时，显示disabled的专属皮肤，当function@mixinwhen($state){@at-root{&.#{$state-prefix+$state}{@content;}}}1：见名知义，有事的时候，用@at-root属性，忘记了，去上面看，@content；代表了班级里的风格内容，厉害了！.box{color:red;}1:上面的color:red;is@content;2:所以这个函数是一个命名函数，可以对前缀进行抽象，在{}之外是同级风格。3：禁用状态有光标：not-allowed；属性，使鼠标出现在禁用状态。左中右按钮（文章字数太卡了）按钮经常组合使用，比如Aneatrow，所以我第一个想到的是给他一个圆角。从用户体验的角度来看，这应该和disabled属性处于同一级别。在标签中写入关键字即可生效，也是布尔类型名称。和element一样，采用is-的形式，分为is-leftis-rightis-centre为什么要单独写，因为如果是用变量控制，用户会写：xxx='xxx'，我是用户，不能接受这样的样式：@includewhen(left){border-radius:16px0016px;};@includewhen(right){border-radius:016px16px0;};@includewhen(centre){border-radius:0;}无非就是调整圆角，但是效果特别有意思如下??的buttonsize有很多ui库有时间，我也来实现一下，感觉一般吧。:class="[sizeType,//增加一个新的属性类型?'cc-button--'+type:'',{'is-left':left,'is-right':right,'is-centre':centre,'is-disabled':disabled,}]"道具:{size:{typr:String,default:"normal"}}computed:{sizeType(){letsizeList=["big","small"];if(sizeList.includes(this.size))return"size-"+this.size;return"size-normal";}}size分为bigsmallnormal,验证用户的输入，如果失败则返回正常大小：$--size-nomal;填充：4px8px；}&.size-small{字体大小：$--size-small;填充：2px6px；给按钮加个图标，防抖节流，文章字数偏多，电脑没问题。github：项目地址个人博客：个人博客
