UI组件库基础

UI组件库

全局组件*

全局注册组件 & 并且使用了require.context

模块化编程 & webpack打包

const install=(Vue)=>{
    const context=require.context('.',true,/\.vue$/)
    context.keys().forEach(fileName=>{
        const module=context(fileName)
        Vue.component(module.default.name,module.default)
    })
}

export default {
    install
}

button*

SCSS:在@each中使用动态变量-腾讯云开发者社区-腾讯云

@each：循环语句

$primary-color:#409eff;
$success-color:#67c23a;
.zh-button{
  padding: 12px 20px;
  border: none;
  color: #fff;
  &:hover{
  }
  &:focus,&:active{

  }

  @each $type,$color in (
    primary:$primary-color,
    success:$success-color,
  ){
    &--#{$type}{
      background:$primary-color;
    }
  }


}

icon*

iconfont的symbol方式引入项目不显示_svg use symbol 不显示-CSDN博客

order:1

$primary-color:#409eff;
$success-color:#67c23a;
.zh-button{
  padding: 12px 20px;
  border: none;
  color: #fff;
  display: inline-flex;
  vertical-align: middle;
  align-items: center;
  cursor: pointer;
  &:hover{
  }
  &:focus,&:active{

  }

  @each $type,$color in (
    primary:$primary-color,
    success:$success-color,
  ){
    &--#{$type}{
      background:$primary-color;
    }
  }

  &--icon-left{
    > .icon{
      order: 1;
    }
    > span{
      order: 2;
    }
  }
  &--icon-right{
    > .icon{
      order: 2;
    }
    > span{
      order: 1;
    }
  }


}

绑定事件

单元测试（略）

CSS*

三角形*

宽高 padding都不写，只设置border的话，border会自动根据对角线/三角形来划分。

.triangle{
    width: 0;
    height: 0;
    border: 10px solid transparent;
    border-right: 10px solid red;
}
.triangle-2{
    width: 0;
    height: 0;
    border: 10px solid transparent;
    border-right-color: red;
    border-top-color: red;
}

垂直居中

盒子定位

定位：相对/绝对

已知宽高：margin-left/calc

未知宽高：transform

flex布局

让盒子实现固定宽高比

绘制<1px的线*

1. 用::after创建虚拟元素
2. transform  scale缩放

.thin{
  width: 200px;
  height: 100px;
  background: blue;
}
.thin::before{
  content: "";
  display: block;
  height: 1px;
  background: red;
  transform-origin: 0 0;
  transform: scale(1, 0.5);
}

圣杯布局*

左中右：左右固定，中间伸缩

flex布局

通过flex值来设置

flex: 伸 缩 basis

    

    

.box{
    width: 100vw;
    height: 100px;
    display: flex;
}
.box .left,.box .right{
    flex: 0 0 100px;
    background: red;
}
.box .middle{
    flex: 1;
    background: blue;
}

定位

1. 盒子左右padding
2. 中间子盒子width:100%，左右盒子定位