Vue3组件库实现 - Button组件篇

举报
vike 发表于 2021/10/29 13:16:04 2021/10/29
【摘要】 Button组件实现实现一款vue3组件库 simple组件库正在开发中~~~button作为组件库基础组件,逻辑比较简单，主要是样式的编写。 simple button功能点一览主题色按钮文字按钮禁用状态按钮尺寸块级按钮自定义颜色圆形加载 主题色按钮效果预览新建一个Button.vue文件，并在App.vue中引入Button组件中写个button标签，并给一个初始class，中间使用一...

Button组件实现

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

simple button功能点一览

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

主题色按钮

  • 效果预览

image-20210816104041710.png

  • 新建一个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调用组件

    <template>
  <simplesbutton>默认按钮</simplesbutton>
<template>
    
<script setup>
    //使用setup语法糖 不需要return
import simplesbutton from "./components/Button.vue";
</script>
​

  • 初始化效果

image-20210816111231444.png

  • 添加各类样式

    • 根据父组件传入的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;
}

    • 主题色效果预览

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

image-20210816112657461.png

文字按钮

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

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

    • 效果预览

image-20210816112931613.png

  • 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`
        : '',
                  ]"><span><slot></slot></span></button>
<script setup>
import { defineProps } from "vue";
const props = defineProps({
  type: String,
  text: Boolean,
  outline:Boolean,
});
</script>

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

  • 效果预览
    image-20210816114032317.png

  • 禁用按钮

    • 效果一览
      image-20210816114439479.png

    • App.vue

      • 禁用按钮分三个状态 普通禁用 外边框禁用 纯文字禁用
      • disabled 为禁用状态
      • disabled text outline 为外边框禁用状态
      • disabled text 为纯文字禁用状态
        <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'
        : '',
                  ]"><span><slot></slot></span></button>
<script setup>
import { defineProps } from "vue";
const props = defineProps({
  type: String,
  text: Boolean,
  outline:Boolean,
  disabled: Boolean,
});
</script>

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

    • 效果预览
      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动效可以去找一些写好的，直接放入
【版权声明】本文为华为云社区用户原创内容，转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息， 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱： cloudbbs@huaweicloud.com
Vue
  • 点赞
  • 收藏
  • 关注作者

评论（0）

0/1000
抱歉，系统识别当前为高风险访问，暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称，即可参与社区互动！

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

确认 取消

加入云驻计划，成为创作者

  • 华为云周边好礼
  • 免费体验产品
  • 特殊身份标识
  • 线下官方门票
  • 内部专家零距离
  • 与10000+优质创作者共同成长
立即加入