button鼠标点击ch_前端项目001Vue造轮子之Button

頔言頔语&＃xff1a;进步&＃xff0c;一定要进步&＃xff0c;进步是跟收入持平的本钱。

总有人问:前端开发中是哪些轮子值得实现一遍。但是你造过那些轮子呢&＃xff1f;这是我造过的&＃xff01;

声明&＃xff1a;本项目所有的UI&＃xff0c;来自于方应航&＃xff0c;我只做简单修改&＃xff01;

所有的项目按照流程按照一下目录进行

1. 需求分析
2. UI设计
3. 项目知识点
4. 项目难点&＃xff08;在3中解决&＃xff0c;用饮用块的方式标识&＃xff09;

1. 需求分析

1. 1 Button功能分析

该轮子只具有点击功能 Click。

1.2 Button 状态分析

• 正常态&＃xff08;nomal&＃xff09;
• Hover 鼠标悬浮状态 &＃xff0c;这个时候Button的边框变色
• Focus用户点击状态&＃xff0c;背景颜色发生改变

1.3 特殊Button

• 不可点击的按钮
• 成组的按钮
• 加载中的按钮

2. 本项目UI展示

想看具体细节的可以参考如下链接&＃xff1a;

输入框 · 轱辘 · 语雀

3. 项目知识点

3.1.项目目录结构展示

我将Button独立作为一个公共组件&＃xff0c;所使用的icon也独立作为一个公共组件&＃xff0c; ButtonGroup也声明为一个公共组件。

组件在main.js当中证明&＃xff0c;在App.vue当中使用

代码如下&＃xff1a;

3.2.Iconfont 的使用

项目当中使用了Iconfront当中的图标&＃xff0c;下面是我选取的图标样式

symbol引用&＃xff1a;

详细方式参考官方文档&＃xff1a;

遇见的问题&＃xff08;在项目难点部分进行回答&＃xff09;&＃xff1a;

难点01.只找到了左图标&＃xff0c;没有相匹配的右图标

这个问题是因为我不熟悉iconfont的使用造成的。请教过朋友之后&＃xff0c;开启新的大门

悬浮图标&＃xff0c;点击编辑&＃xff0c;在这个页面也可进行许多有趣操作&＃xff0c;大家可以试试

吐槽&＃xff1a;下载之后我另外加了加载中图表&＃xff0c;需要重新下载进行文件替换&＃xff0c;觉得麻烦&＃xff01;

3.3 组件讲解

3.3.1 Button组件

Button组件的优化是根据实现的button的功能进步进行的

01 正常button

此时只有一个button标签&＃xff0c;加上class为g-button 进行样式的书写。

难点02
因为我所有的样式用户是可以修改的&＃xff0c;但是我不想用户加上其他属性进行覆盖&＃xff0c;所以我使用CSS变量&＃xff1a;root和var()这样的方式将属性值暴露给用户&＃xff0c;代码如图所式

为什么这样写呢&＃xff1f;我推荐大家读这个文章

总结

• 提高大型系统文档的可维护性&＃xff1b;
• 提高系统代码的可读性&＃xff1b;
• 可以在浏览器中实时修改生效&＃xff1b;

3.3.2 Icon组件

在我写需要带icon的button的时候&＃xff0c;每一个button都需要有icon的引入和使用&＃xff0c;这会造成代码的大量冗余。所以我将icon的引入独立出来&＃xff0c;只暴露出来一个是否使用icon 和icon名称这样的属性

Button组件当中引入icon

用户使用的时候进行传值

问题2:

iconPosition来判断icon是出现在文字右边还是文字左边

但是这个时候我需要写icon在左边还有icon在右边两套Button&＃xff0c;然后根据传入的iconPosition不同&＃xff0c;进行显示。

优雅的解决方法是使用CSS引入Flex布局&＃xff0c;使用order属性 进行布局的改变

当我输入 iconPosition为right的时候&＃xff0c;加入class属性为icon-right

当我输入 iconPosition为left的时候&＃xff0c;加入class属性为icon-left

这个时候我可以用order来进行icon和content的排序

v-if&＃61;&＃39;icon&＃39; 判断icon这个组件是否出现&＃xff0c;效果如下

3.3.3 ButtonGroup组件

这个时候我就需要生成一组Button&＃xff0c;所以引入ButtonGroup这个组件

注意:标签外需要嵌套一层

难点03Button之间的圆角样式问题&＃xff08;只有两边的button需要有圆角&＃xff0c;中间的都没有圆角。到那时button组件当中所有的button都会有圆角&＃xff0c;会直接继承过来&＃xff09;

解决方法&＃xff1a;

第一步&＃xff1a;button-group当中所有的button修改成无圆角

第二部&＃xff1a;使用选择器&＃xff0c;让第一个有左上 左下圆角 &＃xff0c;最后一个有右上右下圆角

难点04Button之间的border重叠问题

解决方法&＃xff1a;

错误&＃xff1a;除了第一个button之外&＃xff0c;所有的button都去掉左border

出现问题&＃xff1a;在hover状态的时候&＃xff0c;左border也是不存在的

正确解决方法&＃xff1a;使用margin-left为负数,并且在hoover的时候&＃xff0c;修改z-index

关于这个项目&＃xff0c;这就是我想说的

我的知识和文字不成熟&＃xff0c;项目也不成熟&＃xff0c;但是我在进步&＃xff01;

若有意见&＃xff0c;欢迎留言指正 &＃xff01;&＃xff01;&＃xff01;