实习公司做页面的一些心得体会

这是我参与「掘金日新计划 · 8 月更文挑战」的第2天，点击查看活动详情

前言

这是一篇初次使用vue+elementUI实现网页制作的踩坑心得，希望有避坑的作用

自适应问题

• 实际上最好的自适应方案就是找一套框架，修改去做，奈何给的时间太短，没时间给我瞎搞 。这里就用了网上自适应的一些方案，参见该博主的文章

• 这里再说些细节，由于自适应所以当你写的时候就尽量按照设计图上的宽高写你的组件、Dom元素，一定要给大的框宽高，小的设置居中和边距等

居中

• flex布局中使用，align-item:center垂直居中
• 水平居中就text-align:center或者justify-content:center，如果还需要细调就加padding
• 图片和文字对齐：vertical-align: middle

elementUI导航

• 导航的下拉图标在文字上面，解决方法：

    ::v-deep .el-submenu_title i{
        margin-right:-20px
    }

elementUI的layout与card

• 当你发现两边的位置始终无法对称时，在el-row外边包一层div，控制div的左右margin
• card自适应出问题，可以在el-card上加个类，扩大设计图中给的宽高达到目标效果，card里面比较长的文字给他的div设置宽即可
• 注意当你重复用一个组件类名最好不要重复，否则会有怎么改都不生效的乌龙

使用伪元素放图片

.item::before { 
content: ''; 
display: block; //变块级设置宽高
width: 14px;
height: 14px; //(宽高不可省略)
background:url('img.png') 
background-size:cover; //铺满
}

• 如果发现图片多出来margin又实在调不了就变为img标签设置宽高，margin等进行布局

elementUI走马灯

• 走马灯内可以通过card进行嵌套，放入文字和图片等。可以自己设置组件代替官方的组件

图片轮播图

• 组件的高度和图片的高度设置一致
• 在轮播图外面套div设置高度和宽度（425/192= 2.21……rem）
• el-carousel_mask设置组件背景颜色（默认白色）

切换背景颜色

• 可以定义一个函数获取到轮播图的index,之后再根据想改变元素的背景的颜色(index是轮播图的 @change="changeText"，changeIndex= 0一个中间变量用来传递想要控制的组件index绑定这个轮播图，要改变的组件采用v-show="index === changIndex v-for="(item,index) in text")

changText(index){
    this.changeIndex = index
    if(（index+1） % 2 === 0){
     document.getElementsClassName('……')[index].style.background = '#fff'
    }
}

div细节

• 如果放两个内容，要父元素position:relative,子元素分别float:left和float:right