题目
今天在整理收藏夹时,发现有一个很不错的网站picdiet,可以用来压缩图片,效果很不错。
不过今天的练习不是关于图片压缩,而是它的官方的一个用来对比压缩前后图片的效果的组件,效果如下:
试着在Vue中实现这个效果
分析
分几个模块来实现。在搭起架子后,首先实现中间的分割线,样式不难,两边的小三角也可以用border
模拟实现
.separator {
position: absolute;
top: 0;
left: 200px;
width: 4px;
height: 100%;
background: darkgray;
z-index: 3;
}
.separator:before, .separator:after {
content: '';
display: block;
position: absolute;
top: 50%;
width: 0;
height: 0;
border: 10px solid transparent;
}
.separator:before {
right: 10px;
border-right-color: darkgray;
}
.separator:after {
left: 10px;
border-left-color: darkgray;
}
然后需要实现随着鼠标的移