Shulou(Shulou.com)06/01 Report--

This article mainly shows you "vue how to package picture slider verification components", the content is easy to understand, clear, hope to help you solve your doubts, the following let the editor lead you to study and learn "vue how to encapsulate picture slider verification components" this article.

The details are as follows

It is not difficult to verify the overall component of the slider, mainly due to the problem of setting the style of the image. To make the background image full of div, you need to enlarge the slider image proportionally. The effect and code are as follows:

HTML:

Slide the slider to the right to fill the puzzle >

JS:

Export default {props: ['sliderData'], / / the slider data object passed by the parent component watch: {sliderData: {/ / listens for slider data changes Reset the slider position handler (newVal, oldVal) {if (newVal) {this.init ()}, deep: true}}, data () {return {disX: 0 / / slider to the left of the background map}}, mounted () {this.init ()} Methods: {/ / initialize slider position init () {this.disX = 0 / / initialize slider position let bigImg = new Image () / / create background image bigImg.src = _ "data:image/png Base64, "+ this.sliderData.bigImg bigImg.onload = () = > {let originWidth = bigImg.width / / get the width of the original background image let widthRate = this.$refs.bgImg.width / originWidth / / the actual width of the background image after rendering / the original picture width let smallImg = new Image () / / create the slider image smallImg.src = _" data:image/png Base64, "+ this.sliderData.smallImg this.$refs.sliderImg.src = _ 'data:image/png Base64 '+ this.sliderData.smallImg / / sets the slider picture address this.$refs.sliderImg.style.width = smallImg.width * widthRate +' px' / / sets the slider picture width this.$refs.sliderImg.style.top = this.sliderData.smallY * this.$refs.bgImg.height + 'px' / / sets the distance from the slider to the top of the background image this.$refs.sliderImg.style.left = 0 / / Set the distance between the slider and the left side of the background map}} / / Mobile event triggers rangeMove (e) {let ele = e.target let startX = e.clientX let eleWidth = ele.offsetWidth let parentWidth = ele.parentElement.offsetWidth let MaxX = parentWidth-eleWidth _ document.onmousemove = (e) = > {let endX = e.clientX this.disX = endX-startX this.$refs.sliderImg.style.left = this.disX + 'px' if (this.disX = MaxX-eleWidth) {/ / minus the width of the slider Better experience this.disX = MaxX this.$refs.sliderImg.style.left = (parentWidth-this.$refs.sliderImg.width) + 'px'} ele.style.transition =' .1s all' ele.style.transform = 'translateX (' + this.disX +'px) 'e.preventDefault ()} _ document.onmouseup = () = > {this.$emit (' submitPic') This.disX / parentWidth) / / stop sliding event bubbling to parent setTimeout (() = > {ele.style.transition = '.5s all' / / initialize slider position ele.style.transform = 'translateX (0)';}, 200) _ document.onmousemove = null _ document.onmouseup = null}

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: 00 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 6px # ccc;}

Note: mousedown, onmousemove, onmouseup events are used. Only the PC side is supported. If you want to use them on the mobile side, you need to change these events to touch, etc.

The above is all the content of the article "how to encapsulate the picture slider verification component in vue". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.