vue 如何从 0 实现自己的 UI 组件库之 Button 组件

一、vue实现ui组件库之Button组件

通过 vue create jiu-color-ui 命令创建自己的 vue 项目工程，jiu-color-ui 是项目名称。
通过 cd jiu-color-ui 命令切换到 jiu-color-ui 项目中
通过 npm run serve 命令让项目运行起来
在项目的 components 文件夹中，建立 button.vue 文件，在 template 中，使用 button 按钮，添加类名为 jc-button。由于不同的按钮之间有不同的类型，可以通过动态样式绑定控制按钮的形状，通过 jc-button--${type} 进行控制 type，后面通过不同的值进行控制，plain 是朴素，round 是圆角，circle 是圆形，disabled 是禁止。通过 @click 绑定按钮的点击事件 handleClick。对于按钮上的文字，可以使用 slot 插槽，而对于文字的显示通过 v-if 命令判断 $slots.default ，不传入任何文字内容时不显示，代码如下所示：

<template>
    <button class="jc-button" :class="[`jc-button--${type}`, {
       'is-plain': plain,
       'is-round': round,
       'is-circle': circle,
       'is-disabled': disabled
    }]"
    @click="handleClick">
        <i v-if="icon" :class="icon"></i>
        <span v-if="$slots.default">
            <slot></slot>
        </span>
    </button>
</template>

在 script 中，定义 name 的值为 JcButton。对于使用不同的按钮会有不同的样式，可以使用父子组件传值。在子组件中，定义 props，可以进行约束和校验。定义 type 为 String 类型；定义 plain 为 Boolean 类型，默认为 false；定义 round 为 Boolean 类型，默认为 false；定义 circle 为 Boolean 类型，默认为 false；定义 icon 为 String 类型，默认为空；定义 disabled 为 Boolean 类型，默认为 false。在 methods 中，定义按钮的点击事件 handleClick，传入事件对象 event，通过 this.$emit 向父组件传入 click 事件，代码如下所示：

<script>
export default {
  name: 'JcButton',
  props: {
    type: {
      type: String,
      default: 'default'
    },
    plain: {
      type: Boolean,
      default: false
    },
    round: {
      type: Boolean,
      default: false
    },
    circle: {
      type: Boolean,
      default: false
    },
    icon: {
      type: String,
      default: ''
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  created () {
    console.log(this.type)
  },
  methods: {
    handleClick (e) {
      this.$emit('click', e)
    }
  }
}
</script>

这个 Button 按钮组件的参数支持，如下所示：

参数名	参数描述	参数类型	默认值
type	按钮类型(primary / success / warning / danger / info)	string	default
plain	是否是朴素按钮	boolean	false
round	是否是圆角按钮	boolean	false
circle	是否是圆形按钮	boolean	false
disabled	是否禁用按钮	boolean	false
icon	图标类名	string	无

7 . 在 style 中，使用 scss，写入按钮的一些样式，代码如下所示：

<style lang="scss" scoped>
// 按钮基本样式
.jc-button {
  display: inline-block;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  background: #fff;
  border: 1px solid #dcdfe6;
  color: #606266;
  -webkit-appearance: none;
  text-align: center;
  box-sizing: border-box;
  outline: none;
  margin: 0;
  transition: 0.1s;
  font-weight: 500;
  // 禁止元素的文字被选中
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  padding: 12px 20px;
  font-size: 14px;
  border-radius: 4px;
  &:hover,
  &:focus {
    color: #409eff;
    border-color: #c6e2ff;
    background-color: #ecf5ff;
  }
}

// 不同type类型按钮样式
.jc-button--primary {
  color: #fff;
  background-color: #409eff;
  border-color: #409eff;

  &:hover,
  &:focus {
    background: #66b1ff;
    border-color: #66b1ff;
    color: #fff;
  }
}
.jc-button--success {
  color: #fff;
  background-color: #67c23a;
  border-color: #67c23a;
  &:hover,
  &:focus {
    background: #85ce61;
    border-color: #85ce61;
    color: #fff;
  }
}
.jc-button--info {
  color: #fff;
  background-color: #909399;
  border-color: #909399;
  &:hover,
  &:focus {
    background: #a6a9ad;
    border-color: #a6a9ad;
    color: #fff;
  }
}
.jc-button--warning {
  color: #fff;
  background-color: #e6a23c;
  border-color: #e6a23c;
  &:hover,
  &:focus {
    background: #ebb563;
    border-color: #ebb563;
    color: #fff;
  }
}
.jc-button--danger {
  color: #fff;
  background-color: #f56c6c;
  border-color: #f56c6c;
  &:hover,
  &:focus {
    background: #f78989;
    border-color: #f78989;
    color: #fff;
  }
}

// 朴素的按钮
.jc-button.is-plain {
  &:hover,
  &:focus {
    background: #fff;
    border-color: #409eff;
    color: #409eff;
  }
}
.jc-button--primary.is-plain {
  color: #409eff;
  background: #ecf5ff;
  border-color: #b3d8ff;
  &:hover,
  &:focus {
    background: #409eff;
    border-color: #409eff;
    color: #fff;
  }
}
.jc-button--success.is-plain {
  color: #67c23a;
  background: #f0f9eb;
  border-color: #c2e7b0;
  &:hover,
  &:focus {
    background: #67c23a;
    border-color: #67c23a;
    color: #fff;
  }
}

.jc-button--info.is-plain {
  color: #909399;
  background: #f4f4f5;
  border-color: #d3d4d6;
  &:hover,
  &:focus {
    background: #909399;
    border-color: #909399;
    color: #fff;
  }
}
.jc-button--warning.is-plain {
  color: #e6a23c;
  background: #fdf6ec;
  border-color: #f5dab1;
  &:hover,
  &:focus {
    background: #e6a23c;
    border-color: #e6a23c;
    color: #fff;
  }
}
.jc-button--danger.is-plain {
  color: #f56c6c;
  background: #fef0f0;
  border-color: #fbc4c4;
  &:hover,
  &:focus {
    background: #f56c6c;
    border-color: #f56c6c;
    color: #fff;
  }
}

// 圆角按钮
.jc-button.is-round {
  border-radius: 20px;
  padding: 12px 23px;
}

// 圆形按钮
.jc-button.is-circle {
  border-radius: 50%;
  padding: 12px;
}

// 按钮后的文本
.jc-button [class*=jc-icon-]+span {
    margin-left: 5px;
}

// 禁用
.jc-button.is-disabled,
.jc-button.is-disabled:focus,
.jc-button.is-disabled:hover {
    color: #c0c4cc;
    cursor: not-allowed;
    background-image: none;
    background-color: #fff;
    border-color: #ebeef5;
}
.jc-button.is-disabled,
.jc-button.is-disabled:focus,
.jc-button.is-disabled:hover {
    color: #c0c4cc;
    cursor: not-allowed;
    background-image: none;
    background-color: #fff;
    border-color: #ebeef5;
}
.jc-button--primary.is-disabled,
.jc-button--primary.is-disabled:active,
.jc-button--primary.is-disabled:focus,
.jc-button--primary.is-disabled:hover {
    color: #fff;
    background-color: #a0cfff;
    border-color: #a0cfff;
}
.jc-button--success.is-disabled,
.jc-button--success.is-disabled:active,
.jc-button--success.is-disabled:focus,
.jc-button--success.is-disabled:hover {
    color: #fff;
    background-color: #b3e19d;
    border-color: #b3e19d;
}
.jc-button--info.is-disabled,
.jc-button--info.is-disabled:active,
.jc-button--info.is-disabled:focus,
.jc-button--info.is-disabled:hover {
    color: #fff;
    background-color: #c8c9cc;
    border-color: #c8c9cc;
}
.jc-button--warning.is-disabled,
.jc-button--warning.is-disabled:active,
.jc-button--warning.is-disabled:focus,
.jc-button--warning.is-disabled:hover {
    color: #fff;
    background-color: #f3d19e;
    border-color: #f3d19e;
}
.jc-button--danger.is-disabled,
.jc-button--danger.is-disabled:active,
.jc-button--danger.is-disabled:focus,
.jc-button--danger.is-disabled:hover {
    color: #fff;
    background-color: #fab6b6;
    border-color: #fab6b6;
}
</style>

在 main.js 文件中，引入图标样式和按钮组件，注册为全局组件，代码如下所示：

import './assets/fonts/font.scss'
import JcButton from './components/button.vue'

Vue.component(JcButton.name, JcButton)

在 App.vue 中，使用 Button 组件，通过定义不同的 type 类型和属性，展示不同样式的按钮，代码如下所示：

<template>
  <div id="app">
    <!-- 实心按钮 -->
    <div class="row">
      <jc-button @click="fn">按钮</jc-button>
      <jc-button type="primary">按钮</jc-button>
      <jc-button type="success">按钮</jc-button>
      <jc-button type="info">按钮</jc-button>
      <jc-button type="warning">按钮</jc-button>
      <jc-button type="danger">按钮</jc-button>
    </div>
    <!-- 朴素按钮 -->
    <div class="row">
      <jc-button plain  icon="jc-icon-check">按钮</jc-button>
      <jc-button plain  icon="jc-icon-check" type="primary">按钮</jc-button>
      <jc-button plain  icon="jc-icon-check" type="success">按钮</jc-button>
      <jc-button plain  icon="jc-icon-check" type="info">按钮</jc-button>
      <jc-button plain  icon="jc-icon-check" type="warning">按钮</jc-button>
      <jc-button plain  icon="jc-icon-check" type="danger">按钮</jc-button>
    </div>
    <!-- 圆角按钮 -->
    <div class="row">
      <jc-button plain round>按钮</jc-button>
      <jc-button plain round type="primary">按钮</jc-button>
      <jc-button plain round type="success">按钮</jc-button>
      <jc-button plain round type="info">按钮</jc-button>
      <jc-button plain round type="warning">按钮</jc-button>
      <jc-button plain round type="danger">按钮</jc-button>
    </div>
    <!-- 禁用按钮 -->
    <div class="row">
      <jc-button plain round disabled>按钮</jc-button>
      <jc-button plain round disabled type="primary">按钮</jc-button>
      <jc-button plain round disabled type="success">按钮</jc-button>
      <jc-button plain round disabled type="info">按钮</jc-button>
      <jc-button plain round disabled type="warning">按钮</jc-button>
      <jc-button plain round disabled type="danger">按钮</jc-button>
    </div>
    <!-- 圆形按钮 -->
    <div class="row">
      <jc-button plain circle>按钮</jc-button>
      <jc-button plain circle type="primary">按钮</jc-button>
      <jc-button plain circle type="success">按钮</jc-button>
      <jc-button plain circle type="info">按钮</jc-button>
      <jc-button plain circle type="warning">按钮</jc-button>
      <jc-button plain circle type="danger">按钮</jc-button>
    </div>
    <!-- 图标按钮 -->
    <div class="row">
      <jc-button></jc-button>
      <jc-button palin icon="jc-icon-delete" type="primary"></jc-button>
      <jc-button palin icon="jc-icon-delete" type="success"></jc-button>
      <jc-button palin icon="jc-icon-delete" type="info"></jc-button>
      <jc-button palin icon="jc-icon-delete" type="warning"></jc-button>
      <jc-button palin icon="jc-icon-delete" type="danger"></jc-button>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    fn () {
      console.log(123)
    }
  }
}
</script>

<style lang="scss">
.row {
  margin-bottom: 20px;
  .jc-button {
    margin-right: 20px !important;
  }
}
</style>

在浏览器中输入 http://localhost:8080/，按钮显示如下：

在这里插入图片描述

vue 如何从 0 实现自己的 UI 组件库之 Button 组件

一、vue实现ui组件库之Button组件

悦读