【封装UI组件库系列】封装Button图标组件

封装UI组件库系列第四篇·封装Button按钮组件

🌟前言

🌟封装Button组件

1.分析封装组件所需支持的属性与事件

支持的属性：

支持的事件：

2.创建Button组件

🌟封装功能属性

type主题颜色

plain是否朴素

loading等待状态

其他属性

🌟总结

🌟前言

在前端开发中，大家可能已经用过各种各样的UI组件库了，现在市面上热门的有Element-ui、Ant Design等等，这些即插即用的组件库确实大大提升了开发效率，避免了很多的重复劳动，但这些组件库再怎么完善，又怎么能满足得了我们可爱的产品经理呢？所以工作中难免会需要开发公司内部的UI组件库，或者基于已有组件库进行二开。

【封装UI组件库系列】文章，将从0开始--》搭建项目--》封装八大经典功能组件--》打包组件库--》将组件库发布至npm--》使用自己封装的组件库。技术方面使用的是Vue3 + Vite + Sass 来完成一个模仿Element Plus的组件库。最终完成效果如下：

【封装UI组件库系列】建议从开篇开始阅读！！！https://blog.csdn.net/g_ing/category_12503768.html?spm=1001.2014.3001.5482

🌟封装Button组件

上一篇我们已经封装了第一个Icon组件，接下来我们就开始封装Button组件

1.分析封装组件所需支持的属性与事件

在开始敲代码前，我们需要先有个思路，要开发什么，需要什么功能，先定好，再动手：

支持的属性：

属性名	作用	类型	是否必须	默认值
type	主题颜色	String	否	default
size	大小	String	否	无
plain	是否朴素	Boolean	否	false
round	是否圆角	Boolean	否	false
circle	是否圆形	Boolean	否	false
disabled	是否禁用	Boolean	否	false
loading	是否加载中	Boolean	否	false
icon	图标	String	否	无

支持的事件：

事件名	作用
click	点击事件

确定好要做的事情，就可以开干喽。

2.创建Button组件

创建组件Button.vue:

在main.js中引入注册：

在views/Button.vue中使用：

🌟封装功能属性

老规矩，新建src/components/Button/props.js 文件义属性：

type主题颜色

在props.js：

export default {
  type: {
    type: String,
    default: 'default'
  },
}

新建style/components/icon.scss

完善基本样式，其实这里很多用到的就是第二篇文章中定义的样式（具体代码文末）：

接下来就是实现主题颜色：

前面文章也将过的，这里还是使用scss语法：

然后在组件中去判断有没有type，有的话就挂上对应样式类：

效果如下：

plain是否朴素

同理，定义样式：

定义props：

判断条件：

loading等待状态

这里需要用到上节课封装的Icon组件：

使用：

效果：

其他属性

讲过上面几种后其他的大差不差，直接上代码

/components/Button/Button.vue：

<template>
    <button ref="_ref" class="visual-button" :class="{
        [`visual-button--${type}`]: type,
        [`visual-button--${size}`]: size,
        'is-plain': plain,
        'is-round': round,
        'is-circle': circle,
        'is-disabled': disabled || loading
    }">
    <Visual-Icon icon="spinner" spin v-if="loading" />
    <Visual-Icon :icon="icon" v-if="icon" />
    <span v-if="$slots.default">
      <slot />
    </span>
    </button>
</template>

<script setup>
    import propObj from './props'
    defineOptions({
        name: 'visual-Button'
    })
    defineProps(propObj)
</script>
<style lang="scss" scoped></style>

/components/Button/props.js：

export default {
  type: {
    type: String,
    default: 'default'
  },
  plain: {
    type: Boolean,
    default: false
  },
  round: {
    type: Boolean,
    default: false
  },
  disabled: {
    type: Boolean,
    default: false
  },
  loading: {
    type: Boolean,
    default: false
  },
  icon: {
    type: String
  },
  size: {
    type: String
  },
  circle: {
    type: Boolean,
    default: false
  }
}

styles/components/button.scss：

// 首先针对这个样式类里面，定义了一系列的样式变量
.visual-button {
  --visual-button-font-weight: var(--visual-font-weight-primary);
  --visual-button-border-color: var(--visual-border-color);
  --visual-button-bg-color: var(--visual-fill-color-blank);
  --visual-button-text-color: var(--visual-text-color-regular);
  --visual-button-disabled-text-color: var(--visual-disabled-text-color);
  --visual-button-disabled-bg-color: var(--visual-fill-color-blank);
  --visual-button-disabled-border-color: var(--visual-border-color-light);
  --visual-button-hover-text-color: var(--visual-color-primary);
  --visual-button-hover-bg-color: var(--visual-color-primary-light-9);
  --visual-button-hover-border-color: var(--visual-color-primary-light-7);
  --visual-button-active-text-color: var(--visual-button-hover-text-color);
  --visual-button-active-border-color: var(--visual-color-primary);
  --visual-button-active-bg-color: var(--visual-button-hover-bg-color);
  --visual-button-outline-color: var(--visual-color-primary-light-5);
  --visual-button-active-color: var(--visual-text-color-primary);
}

.visual-button {
  // 接下来再来书写基本的样式
  display: inline-block;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  height: 40px;
  background-color: var(--visual-button-bg-color);
  border: var(--visual-border);
  border-color: var(--visual-button-border-color);
  color: var(--visual-button-text-color);
  appearance: none;
  text-align: center;
  box-sizing: border-box;
  outline: none;
  margin: 0;
  transition: 0.1s;
  font-weight: var(--visual-button-font-weight);
  user-select: none;
  vertical-align: middle;
  padding: 12px 20px;
  font-size: var(--visual-font-size-base);
  border-radius: var(--visual-border-radius-base);
  &:hover,
  &:focus {
    color: var(--visual-button-hover-text-color);
    border-color: var(--visual-button-hover-border-color);
    background-color: var(--visual-button-hover-bg-color);
    outline: none;
  }
  &:active {
    color: var(--visual-button-active-text-color);
    border-color: var(--visual-button-active-border-color);
    background-color: var(--visual-button-active-bg-color);
    outline: none;
  }
  &.is-round {
    border-radius: var(--visual-border-radius-round);
  }
  &.is-circle {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    padding: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  // 禁用相关的样式
  &.is-disabled,
  &.is-disabled:hover,
  &.is-disabled:focus,
  &[disabled],
  &[disabled]:hover,
  &[disabled]:focus {
    color: var(--visual-button-disabled-text-color);
    cursor: not-allowed;
    background-image: none;
    background-color: var(--visual-button-disabled-bg-color);
    border-color: var(--visual-button-disabled-border-color);
  }
  [class*='visual-icon'] + span {
    margin-left: 6px;
    position: relative;
    bottom: 2px;
  }
}

@each $val in primary, success, warning, info, danger {
  // 这是一种非常灵活的方式，通过挂上去一些类，改变 CSS 变量所对应的值
  .visual-button--#{$val} {
    --visual-button-text-color: var(--visual-color-white);
    --visual-button-bg-color: var(--visual-color-#{$val});
    --visual-button-border-color: var(--visual-color-#{$val});
    --visual-button-outline-color: var(--visual-color-#{$val}-light-5);
    --visual-button-active-color: var(--visual-color-#{$val}-dark-2);
    --visual-button-hover-text-color: var(--visual-color-white);
    --visual-button-hover-bg-color: var(--visual-color-#{$val}-light-3);
    --visual-button-hover-border-color: var(--visual-color-#{$val}-light-3);
    --visual-button-active-bg-color: var(--visual-color-#{$val}-dark-2);
    --visual-button-active-border-color: var(--visual-color-#{$val}-dark-2);
    --visual-button-disabled-text-color: var(--visual-color-white);
    --visual-button-disabled-bg-color: var(--visual-color-#{$val}-light-5);
    --visual-button-disabled-border-color: var(--visual-color-#{$val}-light-5);
  }
  // 如果挂了 is-plain 这个，那么同样是改变一些 CSS 变量的值
  .visual-button--#{$val}.is-plain {
    --visual-button-text-color: var(--visual-color-#{$val});
    --visual-button-bg-color: var(--visual-color-#{$val}-light-9);
    --visual-button-border-color: var(--visual-color-#{$val}-light-5);
    --visual-button-hover-text-color: var(--visual-color-white);
    --visual-button-hover-bg-color: var(--visual-color-#{$val});
    --visual-button-hover-border-color: var(--visual-color-#{$val});
    --visual-button-active-text-color: var(--visual-color-white);
  }
}

// 针对 visual-button-large 以及 visual-button-small 书写相应的样式即可
.visual-button--large {
  --visual-button-size: 50px;
  height: var(--visual-button-size);
  padding: 12px 19px;
  font-size: var(--visual-font-size-base);
  border-radius: var(--visual-border-radius-base);
}
.visual-button--small {
  --visual-button-size: 24px;
  height: var(--visual-button-size);
  padding: 5px 11px;
  font-size: 12px;
  border-radius: calc(var(--visual-border-radius-base) - 1px);
}

🌟总结

【封装UI组件库系列】文章会持续更新，将带着大家从0开始--》搭建项目--》封装八大经典功能组件--》打包组件库--》将组件库发布至npm--》最后使用自己封装的组件库。如果文中出现有瑕疵的地方各位通过评论或者私信联系我，我们一起进步！该系列文章建议从第一篇开始看，系列专栏地址：从零开始封装UI组件库完整篇