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

頔言頔语：进步，一定要进步，进步是跟收入持平的本钱。

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

声明：本项目所有的UI，来自于方应航，我只做简单修改！

输入框 · 轱辘 · 语雀​www.yuque.com

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

1. 需求分析
2. UI设计
3. 项目知识点
4. 项目难点（在3中解决，用饮用块的方式标识）

1. 需求分析

1. 1 Button功能分析

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

1.2 Button 状态分析

• 正常态（nomal）
• Hover 鼠标悬浮状态 ，这个时候Button的边框变色
• Focus用户点击状态，背景颜色发生改变

1.3 特殊Button

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

2. 本项目UI展示

Button UI

想看具体细节的可以参考如下链接：

输入框 · 轱辘 · 语雀

3. 项目知识点

3.1.项目目录结构展示

项目目录结构

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

组件在main.js当中证明，在App.vue当中使用

代码如下：

import gbutton from './components/Button.vue'
import gicon from './components/Icon'
import gButtonGroup from './components/ButtonGroup.vue'

Vue.config.productionTip = false
Vue.component('gbutton',gbutton)
Vue.component('gicon',gicon)
Vue.component('gbuttongroup',gButtonGroup)

<gbuttongroup>
  <gbutton  
  icon = "zuo"
  icon-position = "left" 
  >上一页</gbutton>
  <gbutton>1</gbutton>
   <gbutton>2</gbutton> 
   <gbutton>3</gbutton>
  <gbutton
  icon = "you"
  icon-position = "right"
>下一页
</gbutton>
</gbuttongroup> 

3.2.Iconfont 的使用

项目当中使用了Iconfront当中的图标，下面是我选取的图标样式

icon

symbol引用：

详细方式参考官方文档：

Iconfont-阿里巴巴矢量图标库​www.iconfont.cn

遇见的问题（在项目难点部分进行回答）：

难点01.只找到了左图标，没有相匹配的右图标

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

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

icon编辑

吐槽：下载之后我另外加了加载中图表，需要重新下载进行文件替换，觉得麻烦！

3.3 组件讲解

3.3.1 Button组件

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

01 正常button

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

<button class= 'g-button'> </button>

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

 .g-button{
        font-size: var(--font-size);
        height: var(--button-height );
...
}

:root{
 --button-height:32px;
 --font-size:14px;
.....
  }
 

为什么这样写呢？我推荐大家读这个文章

安秦：【译】CSS变量的正确使用方法​zhuanlan.zhihu.com

总结

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

3.3.2 Icon组件

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

    <svg class="g-icon " aria-hidden="true" v-if='name'>              
           <use :xlink:href= "`#i-${name}`"></use>
             <!-- <use xlink:href= "#i-shezhi"></use> -->
    </svg>  

Button组件当中引入icon

    <button class= 'g-button' v-if= "iconPosition== 'right'" 
    @click = "$emit('click')"
    >            
         <div class="content">
             <slot> </slot>         
        </div>  
        <gicon name= "jiazaizhong" class='loading righticon' v-if= 'loading'> </gicon>         
        <gicon :name= "icon" class="righticon" v-if= 'icon && !loading'> </gicon>
    </button>

用户使用的时候进行传值

<gbutton 
 icon = "shezhi"
 icon-position = "right"
      :loading= loading1
      @click = 'loading1= !loading1'
 > 
      按钮
 </gbutton>

问题2:

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

iconPosition

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

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

     :class="{`icon-[iconPosition]`:true}"

当我输入 iconPosition为right的时候，加入class属性为icon-right

当我输入 iconPosition为left的时候，加入class属性为icon-left

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

v-if='icon' 判断icon这个组件是否出现，效果如下

v-if='icon'

3.3.3 ButtonGroup组件

这个时候我就需要生成一组Button，所以引入ButtonGroup这个组件

注意:<slot></slot>标签外需要嵌套一层<div></div>标签。如果只有<slot></slot>的话，会报错。因为不知道ButtonGroup在时候之后里面会放多少个子组件。

<template>
    <div class="g-button-group">
        <slot></slot>
    </div>
</template>

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

解决方法：

第一步：button-group当中所有的button修改成无圆角

第二部：使用选择器，让第一个有左上 左下圆角 ，最后一个有右上右下圆角

.g-button-group :first-child{
border-top-left-radius: var(--border-radius);
border-bottom-left-radius: var(--border-radius);
}
.g-button-group :last-child{
border-top-right-radius:var(--border-radius) ;
border-bottom-right-radius: var(--border-radius) ;
}

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

解决方法：

错误：除了第一个button之外，所有的button都去掉左border

出现问题：在hover状态的时候，左border也是不存在的

正确解决方法：使用margin-left为负数,并且在hoover的时候，修改z-index

.g-button-group .g-button:not(:first-child){margin-left: -1px;}

.g-button-group :hover{position: relative;z-index: 1;}

关于这个项目，这就是我想说的

我的知识和文字不成熟，项目也不成熟，但是我在进步！

若有意见，欢迎留言指正 ！！！