vue封装图片滑块验证组件的方法 vue封装图片滑块验证组件的方

本文实例为大家分享了vue封装图片滑块验证组件的具体代码，供大家参考，具体内容如下
滑块验证组件整体不难，主要在于设置图片的样式问题，想要让背景图充满div，就需要滑块图片也跟随等比放大，效果与代码如下：

文章图片

HTML：

JS：

CSS：

.slider-section {margin: 20px 0; .img-box {position: relative; .bg-img {width: 100%; }.slider-img {position: absolute; left: 0; top: 0; }} .slider-box {margin-top: 20px; background: #f7f9fa; color: #666; border: 1px solid #e4e7eb; position: relative; height: 30px; width: 100%; &:hover {box-shadow: 0 0 3px #ccc; }.slider-text {font-size: 14px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }.slider-icon {width: 30px; height: 30px; background: #c8923a; text-align: center; font-size: 20px; color: #fff; box-shadow: 0 0 6px #ccc; }}}

注：使用的是mousedown、onmousemove 、onmouseup 事件，仅支持PC端，如果要在移动端使用，需要把这些事件改成touch等；
【vue封装图片滑块验证组件的方法】以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。