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

This article Xiaobian for you to introduce in detail "vue how to achieve sliding unlock function", the content is detailed, the steps are clear, the details are handled properly, I hope that this "vue how to achieve sliding unlocking function" article can help you solve your doubts, following the editor's ideas slowly in-depth, together to learn new knowledge.

The effect is as follows

Don't say much, just go to the code.

Slide to unlock export default {mounted () {var self = this; / / -, defining a method to get elements function getEle (selector) {return document.querySelector (selector) } / 2. Get the DOM elements var box = getEle ("# box"), / / container bgColor = getEle (".bgColor"), / / background color txt = getEle (".txt"), / / text slider = getEle (".slider"), / / slider icon = getEle (".slider > I"), successMoveDistance = box.offsetWidth-slider.offsetWidth / / the distance you need to slide to unlock downX / / used to store the position when the mouse is pressed / / 3. Add the mouse down event slider.onmousedown = mousedownHandler; slider.ontouchstart = mousedownHandler; / / add the touchstart event to the slider / / 3.1The method of realizing the mouse down event function mousedownHandler (e) {bgColor.style.transition = "; slider.style.transition ="; var e = e | | window.event | | e.which DownX = e.clientX? E.clientX: e.changedTouches [0] .clientX; if (! self.isSuccess) {/ / add movement and release events to the mouse when the mouse is pressed _ document.onmousemove = mousemoveHandler; _ document.onmouseup = mouseupHandler; / / add the corresponding event on the mobile side _ document.ontouchmove = mousemoveHandler; _ document.ontouchend = mouseupHandler }} / / 4. Define a method function getOffsetX (offset, min, max) {if (offset) to get the current distance the mouse needs to move.

Max) {offset = max;} return offset;} / / 3.1.1 function mousemoveHandler (e) {var e = e | | window.event | | e.whicht; var moveX = e.clientX? E.clientX: e.changedTouches [0] .clientX; console.log (moveX); var offsetX = getOffsetX (moveX-downX, 0, successMoveDistance); bgColor.style.width = offsetX + "px"; slider.style.left = offsetX + "px"; if (offsetX = = successMoveDistance) {success () } / / there will be a problem if the slider is not set (I don't know why) e.preventDefault (); / / 3.1.2 the method of mouse release event implements function mouseupHandler (e) {if (! self.isSuccess) {bgColor.style.width = 0 + "px"; slider.style.left = 0 + "px" BgColor.style.transition = "width 0.5s linear"; slider.style.transition = "left 0.5s linear";} _ document.onmousemove = null; _ document.onmouseup = null; / / remove mobile event _ document.ontouchmove = null; _ document.ontouchend = null;} / / V, define a slider unlocked method function success () {self.isSuccess = true TXT [XSS _ clean] = "unlocked successfully"; bgColor.style.backgroundColor = "lightgreen"; / / remove mouse down event and mouse movement event slider.onmousedown = null; _ document.onmousemove = null; / / remove mobile event _ document.ontouchstart = null; _ document.ontouchmove = null }, data () {return {isSuccess: false,};},}; / * remove * / * {touch-action: pan-y;} # box {position: relative; width: 300px; height: 40px; margin: 0 auto; margin-top: 10px; background-color: # e8e8e8; box-shadow: 1px 1px 5px rgba (0,0,0,0.2);} .bgColor {position: absolute Left: 0; top: 0; width: 40px; height: 40px; background-color: lightblue;}. Txt {position: absolute; width: 100%; height: 40px; line-height: 40px; font-size: 14px; color: # 000; text-align: center;}. Slider {position: absolute; left: 0; top: 0; width: 50px; height: 40px; / * border: 1px solid # ccc; * / background: # fff; text-align: center Cursor: move;}. Slider > I {position: absolute; top: 50%; left: 50%; transform: translate (- 50%,-50%);} at this point, the article "how to realize sliding unlocking in vue" has been introduced. If you want to master the knowledge of this article, you still need to practice and use it to understand it. If you want to know more about related articles, please 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.