Vue3组件库实现 - Button组件篇


theme: healer-readable

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

Button组件实现

  • 实现一款vue3组件库 simple组件库正在开发中~~~
  • button作为组件库基础组件,逻辑比较简单,主要是样式的编写。

simple button功能点一览

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

    主题色按钮

  • 效果预览

    image-20210816104041710.png

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

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

     

    .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调用组件

    ```   默认按钮    

    ​ ```

  • 初始化效果

image-20210816111231444.png - 添加各类样式

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

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

        ```
          主要按钮
          信息按钮
          成功按钮
          警告按钮
          危险按钮
        ```

-   Button.vue逻辑

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

    -   接收type的类型为String

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

    ```
      
    
    ```

    ```
    .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;
    }
    ```

-   主题色效果预览

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

image-20210816112657461.png

文字按钮

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

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

    • 效果预览

image-20210816112931613.png

  • App.vue

     外边框按钮  纯文字按钮

  • Button.vue

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

    ``  

  • 效果预览 image-20210816114032317.png

  • 禁用按钮

    md5-4cee7866c7b5c2bd4787681ce2272aa9

     禁用按钮  禁用按钮  禁用按钮

  • Button.vue

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

    ``

  • 效果预览 image-20210816141648671.png

按钮尺寸

  • 效果预览

image-20210816141902254.png

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

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

块级按钮

  • 效果预览 image-20210816142057438.png

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

自定义颜色

  • 效果预览 image-20210816142254240.png

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

圆形

  • 效果预览 image-20210816142445324.png

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

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

加载

  • 效果预览 image-20210816142655878.png

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

  • 注意点:

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

结束语

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

你可能感兴趣的:(vue.js,前端,javascript,css,ecmascript)