第三集: 从零最先完成(button组件1)

本集定位:
为何要叫1那, 因为我觉得这个组件细节比较多, 应当会讲许多内容, 所以先把基础功用在这一集完成, 下集去做拓展.
button组件
这是一个基础上每一个工程都邑用到的组件, 传统的button一模一样的款式, 似乎按钮不做的一样就没法用似的, 我偏要加一些他人没加过的款式来玩, 做过项目的小伙伴都邑碰到一个题目, 防抖与撙节, 而这么主要的功用居然没有ui组件库的按钮来集成, 此次我就把这两个功用集成到按钮式搞一搞, 😁最先行为吧.
建立组件基础构造
继承秉持bem的头脑, button整体构造以下:

index.js文件 照样老套路, 组件的name属性很主要.

import Button from './main/button.vue'

Button.install = function(Vue) {
  Vue.component(Button.name, Button);
};

export default Button

button.vue

<template>
  <button class="cc-button">
    <slot />
  </button>
</template>

载体选用button原生标签, 不挑选div标签去模仿, 因为button自身有许多原生属性, 而且语义化也要好过div. slot标签固然是为了接到用户在button中心输入的信息.

按钮第一条, 固然是先分个范例开开胃

<template>
  <button class="cc-button"
          :class="[
            type ? 'cc-button--' + type : ''
          ]"
          :type="nativeType"
    <slot />
  </button>
</template>
<script>
export default {
  name: "ccButton",
  props: {
    type: String, // 范例
    nativeType: String, // 原生的范例照样要给的
  }
};
</script>

1: vue的class属性很壮大的, 他能够数组的情势, 字符串的情势, 对象的情势, 而我采纳的是 数组套一切的情势, 接下来对象范例也会在这个class数组内里运用.
2: 原生的type也要接收, 因为用户会有如许的需求的, 我把它定名为nativeType,跟element一样.
3: 定义几种响应的type款式, 这个type属性没做校验, 因为就算用户不根据我给出的局限传值, 不过就是款式没变化, 没有其他影响的, 接下来就是定义按钮的type款式了.

Button.scss

@import './common/var.scss';   // 引入定义的一切变量
@import './common/mixin.scss'; // 引入一切的函数
@import './common/extend.scss'; // 引入大众款式
@include b(button) {
    cursor: pointer;           // 鼠标变小手
    align-items: center;       // 轴对齐
    display: inline-flex;    // 开启flex形式, 因为还要坚持行的特征, 所以是inline-flex
    vertical-align: middle;    // 中对齐, 为了今后的icon预备的
    justify-content: center;   // 居中
    background-color: white;   // 白色
    outline: 0;                 // 去掉聚焦时的表面
    border-radius: 6px;         // 觉得圆角6照样挺友爱的, 没有做成可设置
    transition: all 0.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)
    }
    @include commonShadow($--color-black); // 这个下面会说👇
    @at-root { 
        @include commonType(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

@mixin commonShadow($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: $--color-disabled;
  }

  color: $color;
  border: 1px solid $color;
  box-shadow: 2px 2px $color;
}


@mixin commonType($name) {
  @each $type in (success, warning, danger) {
    .#{$name}#{$type} {
      @include commonShadow($type);
    }
  }
}

1: 先说commonShadow这个函数吧, 这个是本套ui框架的特征款式(惨绝人寰) , 就是想做点模样不一样的, 这个函数很简单, 会根据传进来的差别$color值来举行款式的返回, 只需运用这个函数就会为元素加上暗影效果, 注重@if背面不要习惯性的协商小括号
2: 因为款式不止一个, commonType函数应运而生, 他把我定义的几种款式范例以数组的情势举行轮回,@each背面接的是每次轮回出来的item, in 背面的()内里的是要被轮回的量
3: .#{$name}#{$type}就是传进来的量与item的拼接, #{}就可以够在sass内里举行拼接, 并非id的意义, 我传入的是 ‘cc-button–‘ 所以这个函数定义了 ‘cc-button–success’, ‘cc-button–warning’,’cc-button–danger’ 三种款式加上了对应色彩的暗影效果, 如图

点击等更多效果能够来我的博客检察 哈哈😁;

@at-root
这个关键词没有运用过的小伙伴注重了
1: 这个关键词作用是, 使款式跳出{}大括号局限, 比方我在 cc-button这个class名下写的款式, 然后我用以下写法:

.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 class="cc-button"
          @touchstart='touchstart($event)'
          :class="[
          type ? 'cc-button--' + type : '',
    {
      'is-disabled':disabled,
    }]"
          :type="nativeType"
          @click="$emit("click")">
    <slot />
  </button>

1. touchstart稀里糊涂涌现个是否是很惊讶, 因为我发明苹果手机不加这个属性的话, 按钮是没法点击的, 保险起见照样加上吧, 万一运营职员在家改点东西, 效果发明手机上点不了, 就坏菜了.
2. 在class属性的数组内里到场一个对象也是能够运用的, vue的壮大剖析才能, 假如用户传了disabled, 就运用is-disabled这个class名
3. @click事宜要给用户返回,因为这个是组件, 假如用户想要触发点击事宜, 须要本身写.native修饰符, 防止用户的过剩代码, 这里我来主动处置惩罚, 这个click事宜接下来还要举行重构, 因为要合营撙节与防抖
4. 小技能: disabled属性我, 默许是布尔值, 如许用户假如只是传了个disabled 就是true了, 不必写:disabled=’true’, 假如我不写默许是布尔范例的话, 是undefined, 为了用户轻易誊写的小技能.

disabled: Boolean

禁用款式的属性Button.scss改装

    &:not(.is-disabled) {
        &:active {
            box-shadow: none;
            opacity: 0.7;
            transform: translateX(2px) translateY(2px) scale(0.9);
        }
        &:hover {
            background-color:rgba(0,0,0,0.06)
        }
    }
    @include when(disabled) {
        @include commonShadow(disabled);
    }

1: 只要在不是禁用状况的时刻, 才有点击效果, 悬停效果
2: 当disabled时, 才显现disabled的专属皮肤

when函数

@mixin when($state) {
  @at-root {
    &.#{$state-prefix + $state} {
      @content;
    }
  }
}

1: 见名知意, 当什么什么的时刻, 用到了@at-root 属性, 忘了的去上面看下, @content;示意的是类内里的款式内容,很奇异吧!

.box{
   color:red;
}

1: 上面的color:red; 就是@content;
2: 所以说这个函数就是一个定名函数, 能够笼统出前缀, 而且是在{}外的平级款式.
3: 禁用状况有cursor: not-allowed;属性, 让鼠标显现禁用状况

左中右按钮 (文章字数写多了好卡)

1. 按钮经常被拿来组合著用, 比方整洁的一排 , 那末我就第一主意就是给他个圆角
2. 从用户体验的角度来讲, 这个跟disabled属性应当是平级的, 把关键词写在标签内里就可以见效,也是布尔范例
3. 定名与element一样采纳is-的情势, 分为is-left is-right is-centre

<template>
  <button class="cc-button"
          @touchstart='touchstart($event)'
          :class="[
          type ? 'cc-button--' + type : '',
    {
      'is-left':left,
      'is-right':right,
      'is-centre':centre,
      'is-disabled':disabled,
    }]"
          :type="nativeType"
          @click="click">
    <slot />
  </button>
</template>

1. 为何要分着写 ,因为假如靠一个变量来掌握的话又会涌现用户 要写 :xxx=’xxx’这类写法, 我是用户我没法接收

款式:

 @include when(left) {
        border-radius: 16px 0 0 16px;
    }
    ;
    @include when(right) {
        border-radius: 0 16px 16px 0;
    }
    ;
    @include when(centre) {
        border-radius: 0;
    }

不过是调了一下圆角, 然则迥殊好玩

效果以下⬇️

按钮大小

这个许多ui库都有时候, 那我也完成一下吧, 觉得一般般.

:class="[ 
          sizeType, // 新加一个属性
          type ? 'cc-button--' + type : '',
    {
      'is-left':left,
      'is-right':right,
      'is-centre':centre,
      'is-disabled':disabled,
    }]"
    
    props: {
         size: {
          typr: String,
          default: "normal"
        }
    }
   computed: {
    sizeType() {
      let sizeList = ["big", "small"];
      if (sizeList.includes(this.size)) return "size-" + this.size;
      return "size-normal";
    }
  }

1. size分为 big small normal ,对用户的输入举行考证, 不通过就返回一般大小
2. 这个没啥技术含量

&.size-big {
        font-size: $--size-big;
        padding: 6px 11px;
    }
    &.size-normal {
        font-size: $--size-nomal;
        padding: 4px 8px;
    }
    &.size-small {
        font-size: $--size-small;
        padding: 2px 6px;
    }

未完待续

1. 下一篇继承玩按钮组件, 主要有为按钮增加icon, 防抖与撙节
2. 文章字数多了, 电脑好卡

github:项目地点
个人博客:个人博客