首页 > 其他分享 >【VUE3.0】动手做一套像素风的前端UI组件库---Button

【VUE3.0】动手做一套像素风的前端UI组件库---Button

时间：2024-09-19 08:54:11浏览次数：3  
标签：hue -- light value --- VUE3.0 var btn 做一套

目录

引言

本教程基于前端UI样式库 NES.css 的UI设计，自行研究复现。欢迎大家交流优化实现方法~

此次组件库开发基于vue3框架，框架基础搭建过程以及基础素材准备参考：【VUE3.0】动手做一套像素风的前端UI组件库—先导篇

本篇复现的组件为button，日常项目中较为常见的组件，主要涉及到的内容有：

  1. 基础样式构建。
  2. 点击动效设计。
  3. 参考市面上常见组件库的设计，根据type切换颜色。
  4. 设置禁用模式。

做之前先仔细看看UI设计稿

UI稿

解读一下都有哪些元素：

  • 按钮四周的边框带缺角，带点子像素的风格。
  • 默认状态下字体区域较亮，右下角阴影处较暗，凸显立体按钮效果。
  • 鼠标移入时亮区压缩，提醒用户聚焦于此处。
  • 鼠标按下时亮区往右下方移动，模拟立体按钮被按下。
  • 整体设计效果太对味儿了！

素材补充

禁用按钮时需要将手势图片替换为禁止图片，使用系统默认的会比较突兀，我这里做了一张图。
禁用
你只需要在iconfont上随便找个禁用图片，然后通过我另一篇文档介绍的方法处理即可。这张图我也补充到文档资源绑定了，在文档开头获取。
链接地址：【VUE3.0】如何得到一张像素风格的图片？

代码编写

按照设计稿解读内容：

1. 按钮四周边框

想象一下如何在一个dom元素四周加上一个带缺角的边框？

  • 最简单的方式是直接按钮设置边框，在按钮内部设置四个子元素，正方形白色底，定位到父元素的四个角盖上。
  • 上一个方法的变体是不设置按钮边框，将内部四个子元素设置成边框的宽高和底色，定位到四个边位置。
  • 有一个比较变态的玩法是在按钮上方覆盖一个黑色底的dom，利用clip-path抠出边框套在按钮上。（难度太大，且不好设置）
  • 本教程采用使用伪类的方式设置边框样式。

首先写好html部分，设置样式类和插槽：

  <button class="pButton">
    <slot>button</slot>
  </button>

设置button基础样式，包含基础的宽高、相对定位、字体样式及鼠标样式。字体和鼠标样式在先导篇配置过，从本文引言处跳转回看。

.pButton {
  height: 45px;
  padding: 0 15px;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  font-family: pixel_en, pixel_ch;
  font-weight: bold;
  letter-spacing: 1.5px;
  user-select: none;
  border: 0px;
  position: relative;
  cursor: var(--cursor_pointer);
}

利用before和after两个伪类，分别设置上下边框和左右边框，交叉叠加在按钮底部，上下和左右都超出按钮两倍的边框厚度，保证可以露出来。

.pButton::after {
  content: "";
  border-left: 4px solid #333;
  border-right: 4px solid #333;
  position: absolute;
  left: -4px;
  top: 0;
  width: calc(100% + 8px);
  height: 100%;
  box-sizing: border-box;
  z-index: -1;
}

.pButton::before {
  content: "";
  border-top: 4px solid #333;
  border-bottom: 4px solid #333;
  position: absolute;
  left: 0;
  top: -4px;
  width: 100%;
  box-sizing: border-box;
  height: calc(100% + 8px);
  z-index: -2;
}

看下这步的效果
边框
至此边框部分就完成了。

2. 默认状态下按钮颜色立体效果

想象一下如何实现这种立体效果？

  • 最简单的方式是按钮设置个暗一些的底色，内部套个子元素设置亮一些，把按钮的文字放在子元素内部。
  • 上一个方法的变体是仍然套一个子元素，子元素宽高小于按钮宽高，使用阴影将剩余空间补满，阴影设置暗色。（子元素宽高不好把握数值）
  • 最终采取按钮本体的向内阴影解决这个问题。

这里应用到两个点，一个是box-shadow的向内阴影，一个是hsl颜色模型。

  • 关于hsl可以参考：【CSS Tricks】在css中尝试一种新的颜色模型HSL，这里简单解释下为什么要使用hsl。因为按钮的亮部和暗部都属于同一个颜色，不同的亮度，如果采用rgb颜色模型，三个参数都要变，后续有进一步的颜色变化则还需要新查询三个rgb参数，处理起来比较复杂。如果使用hsl颜色模型，则只需要调整最后一个参数亮度加减，即可得到同色系不同亮度的色值。
  • box-shadow需要注意内部阴影的左右偏移值，以及为了避免过度锐利，将模糊和传播距离设置为1px，优化效果。
.pButton {
 /* 其他样式规则 */
  color: #fff;
  /* 背景色 */
  background: hsl(204, 86%, 56%);
  box-shadow: inset -4px -4px 1px 1px hsl(204, 86%, 42%);
}

看下这步的效果
按钮

3. 鼠标移入聚焦

这步主要是利用css的hover选择器，鼠标移入时，将阴影偏移加大2px，同时将高亮区域亮度稍微调暗一点，表示聚焦。

.pButton:hover {
  background: hsl(204, 86%, 51%);
  box-shadow: inset -6px -6px 1px 1px hsl(204, 86%, 42%);
}

4. 模拟鼠标点击效果

这步主要是利用css的active选择器，在鼠标点击按钮时触发，将box-shadow偏移值取反，移动至右下角，模拟按下操作。

.pButton:active{
  background: hsl(204, 86%, 51%);
  box-shadow: inset 6px 6px 1px 1px hsl(204, 86%, 42%);
}

看下3、4步后的效果
按钮测试
至此按钮的基本雏形就完成了。

组件封装

1. 按类型设置颜色

  • 根据市面上常见的UI组件库，按钮的type一般分为primary、success、warning、info、error和default这几种，分别对应不同的颜色。我们需要在组件内部接收一个参数type，根据类型对按钮颜色做改变。
  • 先提取不同类型下颜色的hsl值，利用到vue3的css变量，去动态设置颜色。

js部分

import { ref} from "vue";
const props = defineProps({
  type: {
    type: String,
    default: "",
  },
});
// 颜色处理
let hue = ref("0");
let saturation = ref("0%");
let light = ref("100%");
switch (props.type) {
  case "primary":
    hue.value = "204";
    saturation.value = "86%";
    light.value = "53%";
    break;
  case "success":
    hue.value = "85";
    saturation.value = "58%";
    light.value = "53%";
    break;
  case "error":
    hue.value = "10";
    saturation.value = "75%";
    light.value = "62%";
    break;
  case "warning":
    hue.value = "51";
    saturation.value = "93%";
    light.value = "54%";
    break;
  case "info":
    hue.value = "0";
    saturation.value = "0%";
    light.value = "83%";
    break;
  default:
    hue.value = "0";
    saturation.value = "0%";
    light.value = "100%";
    break;
}

css部分：亮度变化通过calc进行计算后赋值。

.pButton {
/* 设置hsl参数变量 */
  --btn_hue: v-bind(hue);
  --btn_saturation: v-bind(saturation);
  --btn_light: v-bind(light);
  /* 替换变量 */
  background: hsl(
    var(--btn_hue),
    var(--btn_saturation),
    calc(var(--btn_light) + 3%)
  );
  box-shadow: inset -4px -4px 1px 1px
    hsl(var(--btn_hue), var(--btn_saturation), calc(var(--btn_light) - 11%));
}

2. 设置按钮禁用状态

通过接收disabled的Boolean变量控制按钮禁用状态。

  • 因为我们对button的样式做了重写，所以在button设置了disabled属性后默认的禁用样式失效，需要在button上设置动态class编写禁用后的样式。
  • 对button设置disabled属性后，可以阻止按钮点击事件，达到禁用效果。

html部分

  <button class="pButton" :class="{ disabled }" :disabled="disabled">
    <slot>button</slot>
  </button>

js部分

const props = defineProps({
  disabled: {
    type: Boolean,
    default: false,
  },
});

css部分

  • 设置手部禁用样式。
  • 复写hover后的样式，和button默认状态保持一致，鼠标移入后不发生变化，达到禁用效果。
.disabled {
  opacity: 0.5;
  cursor: var(--cursor_disabled);
}
.disabled:hover {
  background: hsl(
    var(--btn_hue),
    var(--btn_saturation),
    calc(var(--btn_light) + 3%)
  );
  box-shadow: inset -4px -4px 1px 1px
    hsl(var(--btn_hue), var(--btn_saturation), calc(var(--btn_light) - 11%));
}

3. 处理一个bug

当颜色偏白了之后，字体颜色就不能为白色，不然看不清楚。这时候hsl模型的好处就体现出来了，hue、saturation、light三个参数，我们简单的判断light参数是否大于80%（自己摸索的值，可以根据实际情况调整），如果大于80%则颜色偏白，设置深色字体颜色，反之设置白色字体颜色。

js部分

const fontColor = ref(
  parseInt(light.value) >= 80 ? "hsl(210, 11%, 15%)" : "hsl(0, 0%, 100%)"
);

css部分

.pButton {
// 其他样式
 color: v-bind(fontColor);
 }

4. 看下整体组件效果

整体效果

5. 完整代码

<template>
  <button class="pButton" :class="{ disabled }" :disabled="disabled">
    <slot>button</slot>
  </button>
</template>

<script setup>
import { ref } from "vue";
const props = defineProps({
  type: {
    type: String,
    default: "",
  },
  disabled: {
    type: Boolean,
    default: false,
  },
});
// 颜色处理
let hue = ref("0");
let saturation = ref("0%");
let light = ref("100%");
switch (props.type) {
  case "primary":
    hue.value = "204";
    saturation.value = "86%";
    light.value = "53%";
    break;
  case "success":
    hue.value = "85";
    saturation.value = "58%";
    light.value = "53%";
    break;
  case "error":
    hue.value = "10";
    saturation.value = "75%";
    light.value = "62%";
    break;
  case "warning":
    hue.value = "51";
    saturation.value = "93%";
    light.value = "54%";
    break;
  case "info":
    hue.value = "0";
    saturation.value = "0%";
    light.value = "83%";
    break;
  default:
    hue.value = "0";
    saturation.value = "0%";
    light.value = "100%";
    break;
}
const fontColor = ref(
  parseInt(light.value) >= 80 ? "hsl(210, 11%, 15%)" : "hsl(0, 0%, 100%)"
);
</script>
<style scoped>
.pButton {
  --btn_hue: v-bind(hue);
  --btn_saturation: v-bind(saturation);
  --btn_light: v-bind(light);
  height: 45px;
  padding: 0 15px;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  font-family: pixel_en, pixel_ch;
  font-weight: bold;
  letter-spacing: 1.5px;
  color: v-bind(fontColor);
  user-select: none;
  background: hsl(
    var(--btn_hue),
    var(--btn_saturation),
    calc(var(--btn_light) + 3%)
  );
  border: 0px;
  position: relative;
  box-shadow: inset -4px -4px 1px 1px
    hsl(var(--btn_hue), var(--btn_saturation), calc(var(--btn_light) - 11%));
  cursor: var(--cursor_pointer);
}

.pButton:hover {
  background: hsl(
    var(--btn_hue),
    var(--btn_saturation),
    calc(var(--btn_light) - 2%)
  );
  box-shadow: inset -6px -6px 1px 1px
    hsl(var(--btn_hue), var(--btn_saturation), calc(var(--btn_light) - 11%));
}
.pButton:active {
  background: hsl(
    var(--btn_hue),
    var(--btn_saturation),
    calc(var(--btn_light) - 2%)
  );
  box-shadow: inset 6px 6px 1px 1px
    hsl(var(--btn_hue), var(--btn_saturation), calc(var(--btn_light) - 11%));
}
.pButton::after {
  content: "";
  border-left: 4px solid #333;
  border-right: 4px solid #333;
  position: absolute;
  left: -4px;
  top: 0;
  width: calc(100% + 8px);
  height: 100%;
  box-sizing: border-box;
  z-index: -1;
}

.pButton::before {
  content: "";
  border-top: 4px solid #333;
  border-bottom: 4px solid #333;
  position: absolute;
  left: 0;
  top: -4px;
  width: 100%;
  box-sizing: border-box;
  height: calc(100% + 8px);
  z-index: -2;
}
.disabled {
  opacity: 0.5;
  cursor: var(--cursor_disabled);
}
.disabled:hover {
  background: hsl(
    var(--btn_hue),
    var(--btn_saturation),
    calc(var(--btn_light) + 3%)
  );
  box-shadow: inset -4px -4px 1px 1px
    hsl(var(--btn_hue), var(--btn_saturation), calc(var(--btn_light) - 11%));
}
</style>

总结

至此一个完整的button像素风按钮就开发完成了。开发过程中我也收获了许多：

  • 锻炼了一下对UI稿的拆解分析能力。
  • 结合自身技能储备，对每个步骤都能想到一些解决办法并选择合适的方案，巩固了一下技能。
  • 探索了一些新的东西，比如hsl颜色模型。为将来项目开发提供了新思路。
  • 更加深入理解了一下组件封装的逻辑。

有了第一个组件的样式模板的经验，后续的组件开发也有了参考依据，我想后边做起来会比较快一些。但愿

标签：hue,--,light,value,---,VUE3.0,var,btn,做一套
From： https://blog.csdn.net/weixin_44666711/article/details/142328870

相关文章

  • Holynix-v1打靶渗透(权限提升)
    靶机下载地址：Holynix:v1~VulnHub1.主机发现+端口扫描+操作系统等信息收集确认物理地址ip扫描arp-scan-l端口扫描nmap192.168.134.155访问80端口192.168.134.155:80发现登录页面抓包sqlmap检测python3sqlmap.py-uhttp://192.168.134.155/index.......
  • C++-练习-41
    题目：编写一个程序，它打开一个文本文件，逐个字符地读取该文件，知道到达文件末尾，然后指出该文件中包含多少个字符。（包含空格）源代码：#include<iostream>#include<fstream>intmain(){ usingnamespacestd; charch; intch_num=0; ifstreamfin; fin.open("people.......
  • C++-练习-42
    题目：编写一个程序，记录捐献给"维护合法权利团队"的资金。该程序要求用户输入捐献者数目，然后要求用户输入每一个捐献者的姓名和款项。这些信息被存在一个动态分配的结构数组中。每个结构有两个成员：用来存储姓名的字符数组和用力啊存储款项的double成员。读取所有的数据后，程序将......
  • 鸿蒙(HarmonyOS)--函数、类的声明和使用
    目录1.函数1.1函数的声明1.2可选参数 1.2.1 参数名？：类型  1.2.2参数名：类型=值 1.3Rest参数 1.4返回类型1.4.1显示返回1.4.2隐示返回1.4.3无返回类型1.5函数的作用域1.5.1全局作用域1.5.2局部作用域1.6函数调用1.7函数类型 1.8 箭头函数/l......
  • 鸿蒙(HarmonyOS)--编程语言-ArkTS 语言基础
    目录 ArkTS基础知识1声明1.1变量声明1.2常量声明1.3自动类型推断 2类型2.1基本类型 2.1.1 string2.1.2  number2.1.3boolean2.2引用类型2.2.1Object类型 2.2.2 Array类型2.2.3Void类型 2.3枚举类型 Enum2.4联合类型 Union 2.5 类型别......
  • 【农信网-注册/登录安全分析报告】
    前言由于网站注册入口容易被黑客攻击，存在如下安全问题：暴力破解密码，造成用户信息泄露短信盗刷的安全问题，影响业务及导致用户投诉带来经济损失，尤其是后付费客户，风险巨大，造成亏损无底洞所以大部分网站及App都采取图形验证码或滑动验证码等交互解决方案，但在机器学习能力提......
  • 大数据新视界 --大数据大厂之Kubernetes与大数据：容器化部署的最佳实践
           ......
  • 使用Code-Prompt模拟实现openai o1
    背景帮忙点点star吧https://github.com/Disdjj/prompt_in_code前段时间,openai发布了o1,体验一段时间之后,虽然我认为在实际上没有基础模型的提升,但是其自动产生COT,主动思考解决问题的方案,我觉得非常有趣,在一段时间的研究之后,我认为Code-Prompt能够模拟实现一部分......
  • java基础 -IO流笔记
    610，文件的基础知识文件流 输入流和输出流都是相对java程序内存而言 611，创建文件 在D盘下创建文件。packagecom.hspedu.file;importorg.junit.jupiter.api.Test;importjava.io.File;importjava.io.IOException;//演示创建文件publicclassFileCreate{......
  • 第七章习题12-用牛顿迭代法求根。方程为一元三次函数，系数a,b,c,d的值依次为1,2,3,4，由
     ......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99