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：循环语句

<template>
<button class="zh-button" :class="buttonClass">
  <span v-if="$slots.default"><slot></slot></span>
</button>
</template>
 
<script>
const types=['primary','info','success','warning','danger']
export default {
  name:'zh-button',
  props:{
    type:{
      type:String,
      default:'',
      validator(val){
        if(val && !types.includes(val)){
          console.error('类型不合法')
        }
        return true;
      }
    }
  },
  computed:{
    buttonClass(){
      let classes=[]
      if(this.type){
        classes.push(`zh-button--${this.type}`)
      }
      return classes;
    }
  }
}
</script>
 
<style scoped lang="scss">
$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;
    }
  }
 
 
}
</style>
 

icon*

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

order:1

<template>
<button class="zh-button" :class="buttonClass" v-on="$listeners">
  <zh-icon :icon="icon" v-if="icon"></zh-icon>
  <zh-icon icon="loading" v-if="loading" color="#fff"></zh-icon>
  <span v-if="$slots.default"><slot></slot></span>
</button>
</template>
 
<script>
const types=['primary','info','success','warning','danger']
export default {
  name:'zh-button',
  props:{
    type:{
      type:String,
      default:'',
      validator(val){
        if(val && !types.includes(val)){
          console.error('类型不合法')
        }
        return true;
      }
    },
    icon:{
      type:String,
    },
    iconPosition:{
      type:String,
      default:'left'
    },
    loading:{
      type:Boolean,
      default:false,
    }
  },
  computed:{
    buttonClass(){
      let classes=[]
      if(this.type){
        classes.push(`zh-button--${this.type}`)
      }
      if(this.iconPosition){
        classes.push(`zh-button--icon-${this.iconPosition}`)
      }
      return classes;
    }
  }
}
</script>
 
<style scoped lang="scss">
$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;
    }
  }
 
 
}
</style>
 

绑定事件

单元测试（略）

CSS*

三角形*

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

<div class="triangle"></div>
<div class="triangle-2"></div>

.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

<div class="box">
    <div class="left"></div>
    <div class="middle"></div>
    <div class="right"></div>
</div>

.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%，左右盒子定位

<div class="box">
    <div class="left"></div>
    <div class="middle"></div>
    <div class="right"></div>
</div>
 
*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
.box{
    position: relative;
    width: 100%;
    padding: 0 100px;
    height: 100px;
    position: relative;
}
.box .left,.box .right{
    width: 100px;
    height: 100px;
    position: absolute;
    left: 0;
    top: 0;
    background: red;
    
}
.box .right{
    left: auto;
    right: 0;
}
.box .middle{
    width: 100%;
    height: 200px;
    background: blue;
}

响应式的方案*

PC不同像素：

vw/vh：百分比布局。

@media：媒体查询。微调，指定大小基于它微调。

移动&PC：共用一套页面。比如官网。

@media：基于设备尺寸写多套样式

移动端：

rem：等比缩放。相对于页面根元素大小设置rem值