第二集: 从零开始实现一套pc端vue的ui组件库(icon组件)

第二集: 从零开始实现(icon组件)

本集定位:
这套ui组件我原本是先从button作的, 可是我发现每一个组件都要用到icon这个组件, 若是没有他, 不少组件无法扩展, 并且icon自己不依赖其余组件, 因此仍是先把它做为本篇文章的重点吧.
icon组件
读过element-ui源码的同窗都知道, 他们选择的是字体图标的方式来作icon组件的, 而个人这套ui在写法与用法上参考了他们的作法, 但组件自己是靠svg来书写的,其中的区别仍是简单阐述一下把.
icon font 与 svg

• 1.icon font作为字体没法支持多色图形，这就很尴尬了.
• 2.icon font主要在页面用Unicode符号调用对应的图标，这种方式不论是浏览器，搜索引擎和对无障碍方面的能力都没有SVG好.
• 3.icon font采用的是字体渲染，icon font在一倍屏幕下渲染效果并很差，在细节部分锯齿仍是很明显的，SVG上面我说过它是图形因此在浏览器中使用的是图形渲染，因此SVG却没有这种问题.
• 4.兼容性较差，支持 ie9+,及现代浏览器.
• 5.浏览器渲染svg的性能通常，还不如png。

行动起来
上一集基本环境已经搭建好了, 这里咱们采用'bem'的思想, 来构建组件的样式, 全部的样式抽离在一个文件夹里面, 作到组件自己没有样式代码,咱们来先书写组件的代码.结构以下:

index.js文件里面是导出这个组件:

import Icon from './main/icon.vue'
// 明白vue.use方法原理的同窗都能明白这段代码的意义
// 当被use的时候, 进行icon组件的渲染
Icon.install = function(Vue) {
  Vue.component(Icon.name, Icon);
};

export default Icon

这样单抽出来作一个文件的好处是,更好的工程化, 保证职能的单一性.

main文件夹
为何main文件夹里面只有一个文件还要单独抽成一个文件夹??, 缘由是有的组件可能要配合本身独有的容器组件一块儿使用, 好比一个button的包裹容器, 他可让内部的每一个button有相同的上下左右距离, 相同的圆角等等...

icon.vue文件

• 第一步: 使用svg, 固然要去下载svg图片了, 本篇推荐使用你们都在用的阿里巴巴矢量图标库,选择本身喜欢的图标放入购物车选项.

• 第二步: 放入工程,点击添加入项目, 若是没有项目要点击新建项目来完成此操做.

• 第三步: 复制连接到你的script标签里面引入, 在index.html里面就能够, 下面会讲遇到的问题与优化.

// 使用方法以下:
<svg class="icon">
// 把名字写在下面的'xxx'处,就能够正常显示图标了;
    <use xlink:href="#icon-xxx"></use>
</svg>

• 第四步: 开始正式书写组件.

  • 1:先定义一个最简单的组件模板, 他仅仅支持颜色的调整, 与icon的调整
  • 2:svg的颜色控制, 须要经过fill属性, 我常常面试遇到说本身用过svg图片, 可是没据说过fill属性的尴尬场面😅
  • 3:不传颜色的时候,svg默认是原色

<template>
  <div 
    class='cc-icon'
    }">
    <svg :style="{fill:color}">
      <use :xlink:href='`#icon-${name}`'></use>
    </svg>
  </div>
</template>
<script>
export default {
name: "ccIcon",
  props: {
    color: String,
    name: {
      type: String,
      required: true
    }
  }
};
</script>

• 第五步: 基本的结构已经有了, 如今要考虑的就是咱们的组件还须要什么功能? .
• 1:控制图标的大小, 这个仍是须要的

props: {// 接受一个size属性
    size: { // 由于用户可能传带单位的与不带单位的
      type: [Number, String],
      default: "1em"
    }
  },
computed: { // 计算属性里面对这个值进行操做, 类型若是是数字, 就咱们来给他加上单位吧,也就是默认单位是'px'
    iconSize() {
      if (typeof this.size === "number") return this.size + "px";
      else return this.size;
    }
  }

<template>
  <div 
    class='cc-icon'
    height: iconSize, // 在此使用
    width: iconSize,  // 在此使用
    }">
    <svg :style="{fill:color}">
      <use :xlink:href='`#icon-${name}`'></use>
    </svg>
  </div>
</template>

• 2:若是是加载的icon, 咱们须要让他旋转一下, 这里我是这么作的, 全部的加载图标, 个人命名都是load加数字, 因此检测字符串里面是否有这个关键词就行了

<svg :style="{fill:color}"
         :class="[
          'cc-icon-'+name,
          {  
          //icon-loading这个class名, 只有在icon的name属性里面有load字段的时候加上, 这个属性名里面的属性就是旋转.'~'位运算符是很高效的书写方式, 也就是对位求反，1变0,0变1，也就是求二进制的反码, 这里不懂的话, 先看犀牛书, 简单的说就是把-1转成0了, 变成了布尔中的false;
            'icon-loading':~name.indexOf('load')
          }
         ]">
      <use :xlink:href='`#icon-${name}`'></use>
    </svg>

• 3:实际使用的时候我发现, 不给div加上 display: 'inline-flex',属性, icon有时候对不整齐, 因此仍是加上为妙,这个地方之后应该还会弄一弄, 感受还会有一段故事.

<div 
    class='cc-icon'
    :style="{
    display: 'inline-flex',
    height: iconSize,
    width: iconSize,
    }">

• 4: 接下来就是为了配合其余组件的 disabled 状态 把图标自己也置为灰色, 这样写很方便

<svg :style="{fill:color}"
         :class="[
          'cc-icon-'+name,
          { 
            'icon-loading':~name.indexOf('load'),
            'is-disabled':disabled // 在这里进行了定义
          }
         ]">
      <use :xlink:href='`#icon-${name}`'></use>
    </svg>
     props: {
    disabled: Boolean // 固然是布尔类型
  },

小知识点: props里面定义了默认类型是布尔,则用户能够直接在标签上写属性名, 不给属性值也是能够表明true的, 可是默认不是布尔, 不给属性值的话, 组件里面获得的就是undefined;

• 第六步: 书写样式吧

icon.scss文件
1:disabled状态时禁止点击
2:icon-loading 时旋转
@import './common/mixin.scss';
@import "./common/animation.scss";

@include b(icon) {
    .#{$state-prefix}disabled {
        cursor: not-allowed;
        fill: $--color-disabled;
    }
    .icon-loading {
        animation: rotating 1s infinite linear;
    }
}

mixin.scss文件里面的b方法

抽象出$namespace方便管理
@mixin b($block) {
    $B: $namespace+'-'+$block !global;
    .#{$B} {
        @content;
    }
}

animation.scss文件

@keyframes rotating {
    0% {
      transform: rotateZ(0deg);
    }
    100% {
      transform: rotateZ(360deg);
    }
  }

var.scss文件

// lulu的美工很差, 只是想作出点不一样样子的东西玩玩
// 基本色
$--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

• 第六步: 上面说的svg文件引用的改良, 能够把svg文件下载到本地, 在别人由于这个ui组件的时候不会引用index.html文件, 并且大部分组件都引用了icon,咱们能够去阿里巴巴矢量图标库进行操做

点击下载到本地

取出js文件, 让在本地

用index.js文件引用这个js文件就完成了!!

结束
icon组件是最小的组件, 其余组件的代码量与难道都大的多, 详细code与用法能够访问下面的地址, npm同步更新!
下一期是关于button的,咱们一块儿交流吧

github:项目地址
我的博客:我的博客