Vue3组件库实现 - Button组件篇

---

theme: healer-readable

这是我参与8月更文挑战的第3天，活动详情查看：8月更文挑战

Button组件实现

• 实现一款vue3组件库 simple组件库正在开发中~~~

• button作为组件库基础组件,逻辑比较简单，主要是样式的编写。

simple button功能点一览

• 主题色按钮
• 文字按钮
• 禁用状态
• 按钮尺寸
• 块级按钮
• 自定义颜色
• 圆形

• 加载

  主题色按钮

• 效果预览

  

• 新建一个Button.vue文件，并在App.vue中引入

• Button组件中写个button标签，并给一个初始class，中间使用一个插槽用来放内容

   <button class="simple-button"><span><slot></slot></span></button>

  .simple-button {    /* 设置宽度自适应 */  width: auto;  height: 35px;     /* 将按钮左右边距调大一些显得美观 */  padding: 0 10px;      /* 居中 */  text-align: center;  justify-content: center;  align-items: center;      /* 边框不显示 */  border: none;      /* 圆角框 */  border-radius: 3px;      /* 盒子阴影 */  box-shadow: 0px 0px 3px gray;  font-family: inherit;  /* 鼠标变为小手标识 */  cursor: pointer;  font-size: 14px; }

• App.vue调用组件

  ```   默认按钮    

  ​ ```

• 初始化效果

- 添加各类样式

-   根据父组件传入的type值添加类，覆盖初始样式

    -   type: primary || info || success || warning || danger

        ```
          <simplesbutton type="primary">主要按钮</simplesbutton>
          <simplesbutton type="info">信息按钮</simplesbutton>
          <simplesbutton type="success">成功按钮</simplesbutton>
          <simplesbutton type="warning">警告按钮</simplesbutton>
          <simplesbutton type="danger">危险按钮</simplesbutton>
        ```

-   Button.vue逻辑

    -   setup语法糖里接收props必须引入defineProps

    -   接收type的类型为String

        -   使用三目运算 type值有的话直接使用ES6插值语法插入新的类
        -   由于都要更改color: #fff这个属性，单独拿出来写一个text-color类

    ```
      <button class="simple-button"  
              :class="[
              type ? `simple-button--${type} text-color` : ''
                      ]"><span><slot></slot></span></button>
    <script setup>
    import { defineProps } from "vue";
    const props = defineProps({
      type: String,
    });
    </script>
    ```

    ```
    .simple-button--primary {
      background-color: rgb(74, 130, 212);
    }
    .simple-button--info {
      background-color: rgb(163, 191, 233);
    }
    .simple-button--success {
      background-color: rgb(92, 218, 180);
    }
    .simple-button--warning {
      background-color: rgb(221, 219, 77);
    }
    .simple-button--danger {
      background-color: rgb(233, 56, 56);
    }
    .text-color {
      color: #fff;
    }
    ```

-   主题色效果预览

    -   主题色颜色可根据自己喜好更改

文字按钮

• 外边框按钮 接收两个属性text outline

• 纯文字按钮 接受一个属性 text

  • 效果预览

• App.vue

   <simplesbutton text outline type="primary">外边框按钮</simplesbutton>  <simplesbutton text type="primary">纯文字按钮</simplesbutton>

• Button.vue

  • 纯文字和外边框有个共同点就是背景色都为纯白 所以两个属性只要有一个满足就添加上simple-button--outline类
  • type && outline && text 三类属性全传就为外边框按钮
  • type && text && !outline 只传两类属性为纯文字按钮
  • 纯文字按钮样式 ： 取消边框 取消阴影 simple-button--color
  • 外边框样式:增加边框

  ``  <button class="simple-button"            :class="[      type ?simple-button--${type} text-color: '',          outline || text ? 'simple-button--outline' : '',      type && outline && text ?simple-button--${type}--color: '',      type && text && !outline        ?simple-button--${type}--color simple-button--color`        : '',                  ]">

  ```

  .simple-button--primary--color {  color: rgb(74, 130, 212);  border: 1px solid rgb(74, 130, 212); } .simple-button--info--color {  color: rgb(163, 191, 233);  border: 1px solid rgb(163, 191, 233); } .simple-button--success--color {  color: rgb(92, 218, 180);  border: 1px solid rgb(92, 218, 180); } .simple-button--warning--color {  color: rgb(221, 219, 77);  border: 1px solid rgb(221, 219, 77); } .simple-button--danger--color {  color: rgb(233, 56, 56);  border: 1px solid rgb(233, 56, 56); } .simple-button--color {  border: none;  box-shadow: none; } .simple-button--outline {  background-color: #fff; }

• 效果预览

• 禁用按钮

  md5-4cee7866c7b5c2bd4787681ce2272aa9

   <simplesbutton disabled>禁用按钮</simplesbutton>  <simplesbutton disabled text outline>禁用按钮</simplesbutton>  <simplesbutton disabled text>禁用按钮</simplesbutton>

• Button.vue

  • 根据属性分开判断当前状态
  • disabled && outline && text 这种状态为禁用外边框
  • disabled && text && !outline 这种状态为禁用纯文字
  • disabled && !text && !outline 这种为普通禁用状态

  `` <button class="simple-button"            :class="[      type ?simple-button--${type} text-color: '',          outline || text ? 'simple-button--outline' : '',      type && outline && text ?simple-button--${type}--color: '',      type && text && !outline?simple-button--${type}--color simple-button--color`: '',      disabled && outline && text ? 'simple-button--disabled--outline' : '',      disabled && text && !outline ? 'simple-button--disabled--text' : '',      disabled && !text && !outline        ? 'simple-button--gray simple-button--disabled'        : '',                  ]">

  ```

  .simple-button--disabled {  color: gray;      /* 鼠标变为禁用 */  cursor: no-drop; } .simple-button--disabled--outline {  color: gray;  cursor: no-drop;  border: 1px solid gray; } .simple-button--disabled--text {  color: gray;  cursor: no-drop;  border: none;  box-shadow: none; }

• 效果预览

按钮尺寸

• 效果预览

• 按钮尺寸使用size给不同的类，同上

• 实现较为简单略过。。。。。。。

块级按钮

• 效果预览

• 块级通过属性block 给button上加上一个display:block即可实现

自定义颜色

• 效果预览

• 接收两个属性 color(背景色) textcolor(文字颜色) 直接给style属性值就可以

圆形

• 效果预览

• 接收round属性，将border-radius属性值写为50%即可变成圆形

• 中间放的icon组件我们下篇再讲解

加载

• 效果预览

• 接收loading和loading-type两个属性，每个loading-type样式不同，这里用了svg来实现

• 注意点：

  • 由于loading中显示svg，用v-if判断是否有loading，有的话文字不能显示

结束语

• 一个完整的button组件功能大致完成
• loading动效可以去找一些写好的，直接放入