element-ui 的el-button组件中添加自定义颜色和图标的实现方法

  在vue+elememt-ui 的项目开发过程中,由于element-ui 的图标样式局限,可能和我们项目中需要的图标不一致;此时我们想要自已的图标样式,如何解决这一问题呢?

  解决方案是：添加一个自定义全局指令，同时在element-ui源码中，加入对应的组件。开发人员在开发时只要在type中添加不同的类的值，就能添加上颜色和图标 ;

  1. 在node-modules 找到element-ui 文件:

 

2. button 组件更改的地方:

代码如下:

<template>
  <button
    class="el-button"
    v-otherRender
    @click="handleClick"
    :disabled="buttonDisabled || loading"
    :autofocus="autofocus"
    :type="nativeType"
    :class="[
      type ? 'el-button--' + type : '',
      buttonSize ? 'el-button--' + buttonSize : '',
      {
        'is-disabled': buttonDisabled,
        'is-loading': loading,
        'is-plain': plain,
        'is-round': round,
        'is-circle': circle
      }
    ]"
  >
    <i class="el-icon-loading" v-if="loading">i>
    <i :class="icon" v-if="icon && !loading">i>
     <v-render v-if="otherRender && !scicon && !icon" :render="otherRender">v-render>
    <span v-if="$slots.default"