Vue version drag verification

1. Basic demo

1. Define a slide:<div id="slideway"></div>
2. To color the slide:

#slideway {
  background-color: #7ac23c;
  height: 34px;
  width: 0px;
  transition: width 0.2 sease; // Transitive CSS properties/Execution time/speed curve (slow-fast-slow)}Copy the code

3. Simulated drag process

<script>
  let w = 0;
    let interval = setInterval(() => {
      const slideway = document.querySelector("#slideway");
      slideway.style.width = `${w++}px`;
  }, 50);
</script>
Copy the code

4. The demo

2. Add a slider

1. Define a slider:<div id="handler"></div>
2. Color the slider:

#handler {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 40px;
  height: 32px;
  border: 1px solid #ccc;
  cursor: move;
  transition: left 0.2 sease; // Transitive CSS properties/Execution time/speed curve (slow-fast-slow)background: #fff
    url("data:image/png; base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAALNJREFUWEft1sENgzAMBVBItuk+ZZIoZ66xMgndp+NEle+I2 Ja/0oM5Qsh/fGQp+7b42hfnbwGIBv6/gdbamXO+Sinfu4khojffr7V+LBP12EDv/TXGuHjjlNJxhyAifs6Iw4KY/gI0Ygrgr0ciRAAkQgxAIVQABEIN8EaYA J4IE8BzKtQAz3BuUgXwDlcBEOFiACpcBECGTwHo8CmAFyw9D1gOGNp3VGOo3VyyPgDRQDTwA8Qr1SGOkJt6AAAAAElFTkSuQmCC")
    no-repeat center;
}
Copy the code

3. Simulated drag process

<script>
  let w = 0;
  setInterval(() => {
    const slideway = document.querySelector("#slideway");
    slideway.style.width = `${w++}px`;
    const handler = document.querySelector("#handler");
    handler.style.left = `${w++}px`;
  }, 50);
</script>
Copy the code

4. The demo

3. Drag verification based on Vue

State of decomposition

The initial state

Dragging state

Drag completed state

Page to

<div id="drag-verify">
  <div id="slideway"></div>
  <div class="slideway-text" onselectstart="return false;" unselectable="on">
  {{ description }}
  </div>
  <div id="handler" class="handler handler-icon-init"></div>
</div>
Copy the code

<style scoped>
#drag-verify {
  position: relative;
  background-color: #e8e8e8;
  width: 300px;
  height: 34px;
  line-height: 34px;
  text-align: center;
}
#drag-verify .handler {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 40px;
  height: 32px;
  border: 1px solid #ccc;
  cursor: pointer;
  transition: all 0.2 s ease;
}
.handler-icon-init {
  background: #fff
    url("data:image/png; base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAALNJREFUWEft1sENgzAMBVBItuk+ZZIoZ66xMgndp+NEle+I2 Ja/0oM5Qsh/fGQp+7b42hfnbwGIBv6/gdbamXO+Sinfu4khojffr7V+LBP12EDv/TXGuHjjlNJxhyAifs6Iw4KY/gI0Ygrgr0ciRAAkQgxAIVQABEIN8EaYA J4IE8BzKtQAz3BuUgXwDlcBEOFiACpcBECGTwHo8CmAFyw9D1gOGNp3VGOo3VyyPgDRQDTwA8Qr1SGOkJt6AAAAAElFTkSuQmCC")
    no-repeat center;
}
.handler-icon-pass {
  background: #fff
    url("data:image/png; base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAnZJREFUWEfVl7Fr1HAUxz8vPWvBqeBiN930hpPL6eBU6FIFQ cVWXOpSk02kjg7eLZ1cRFQudLC63Q2Cyw36D2ibDMJZxIJb6+YgUimYn9yZg1ySX5JLT0qz/vK+38/vvfd7+UU45EcO2Z+jB7DQYnL6DLNKmEFxSoSfStg1Y KtZ5fOoGc2dAdtl3lfcFmERmEo0Eroo3pXg2XOT7TwwmQC2R8X3WRFhKY9g/x3FdzFYbVZ5mhWTCrC8waxh0AZOZglp1juOyZW0WC2A7XFOKboFjYfCHFPf7 IkAgflH4MQ4ABDaTrXfO7EnEcBy6QDzBzL3aTDBTRTlQOehY7Ia1YwB2B5LSrF+UHPnAvV+JqEVQGz9mOJ8u8x+WDsJ4INSXCwM4NPomffiIwCIcKdZ5ZUWY NnFNGDzf5j3NAXeNE1uaAGsDeoYPCoEkLLzsF70RAyVwHJpAtYQQLyZ4nw5zYMhNePU2B2IRAHeAldDDnXHpBGtZRRQV/OkTPpQWzNx8wFk7SxrPYEgCyCxB Ik7LGCeXQJdE0bN/rA4StpzN2HqMQxBDARTeyN57sZGcmwQWW7/UnE28SgWTXsgJmA3TZzUSWh5PEDxWDsLfBoyQSs0YvOOjR0UtfARDIZTPN5yeQ/MaZX/3 XwGH5l8AAkl1ALYHnNK9SHG8wjd/WlqL0/zOyqovZBYHvdQPBkHgQhl3YU19UpmbbKA0CoMofjiH+PyWoVvOo3MS2kAcR+4NCKIs1di5XWFX2lxmQCD4Lsu1 wVuIVxDcTxJVME2io4S1sPzfiwAA5F6l8mdvfiPSUnx9YXJpxGzdAR/zUbdYdb7uXsgS6jo+l8KUxAwNFONPgAAAABJRU5ErkJggg==")
    no-repeat center;
}
#drag-verify #slideway {
  background-color: #7ac23c;
  height: 34px;
  width: 0px;
  transition: all 0.2 s ease;
}
#drag-verify .slideway-text {
  position: absolute;
  top: 0px;
  width: 300px;
  -moz-user-select: none;
  -webkit-user-select: none;
  user-select: none;
  -o-user-select: none;
  -ms-user-select: none;
}
.unselect {
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.drag-verify-pass {
  color: #fff;
}
</style>
Copy the code

Support the operation

1. Verify successful listening
2. State restore listener
3. State reduction function

This. DragVerify = new dragVerify (() => {this.$emit("onResult", {code: 200, message: "verify"! }); }, () = > {enclosing $emit (" onResult, "{code: 0, the message is:" not verify!" }); }); This.dragverify.reset (); this.dragverify.reset ();Copy the code

Bus class ready for event binding:

class Bus {
  constructor() {
    this.callbacks = {};
  }

  on(name, fn) {
    this.callbacks[name] = this.callbacks[name] || [];
    this.callbacks[name].push(fn);
  }

  emit(name, args) {
    if (this.callbacks[name]) {
      this.callbacks[name].forEach((callback) = >{ callback(args); }); }}}Copy the code

Prepare the DragVerify class for actual drag validation:

1. The constructor
   1. Get the DOM element for subsequent operations
   2. Instantiate the Bus class for event communication
   3. Initialize touch and mouse events
   4. Returns the state after setting the callback function

constructor(complete, reset) {
    this.template = document.querySelector("#drag-verify");
    this.dragbg = document.querySelector("#slideway");
    this.handler = document.querySelector("#handler");
    this.bus = new Bus();
    this.initEvents();
    complete && this.bus.on("complete", complete);
    reset && this.bus.on("reset", reset);
}
Copy the code

2. Down Event Processing

down(e) {
  this.diffX = 0;
  this.cancelTransition();
  let clientX = 0; // Press the distance from the dot to the far left
  if (e.type == "touchstart") {
    clientX = e.changedTouches[0].clientX;
  } else if (e.type == "mousedown") {
    clientX = e.clientX;
  }
  this.diffX = clientX - this.handler.offsetLeft;
}
Copy the code

3. Move Event Processing

 move(e) {
   // The distance between the point moved to and the point when the initial press was pressed
   let clientX = 0;
   if (e.type == "touchmove") {
     clientX = e.changedTouches[0].clientX;
   } else if (e.type == "mousemove") {
     clientX = e.clientX;
   }
   let moveX = clientX - this.diffX;
   if (moveX >= this.template.offsetWidth - this.handler.offsetWidth) {
     moveX = this.template.offsetWidth - this.handler.offsetWidth;
   } else if (moveX <= 0) {
     moveX = 0;
   }
   // Update the distance moved in real time
   this.updateDistance(moveX);
 }
Copy the code

4. Up Event Handling

up(e) {
  let clientX = 0;
  if (e.type == "touchend") {
    clientX = e.changedTouches[0].clientX;
    document.ontouchmove = null;
    document.ontouchend = null;
  } else if (e.type == "mouseup") {
    clientX = e.clientX;
    document.onmousemove = null;
    document.onmouseup = null;
  }

  this.addTransition();
  if (clientX >= this.template.offsetWidth) {
    this.complete();
  } else {
    this.reset(); }}Copy the code

5. Authentication is successful

complete() {
  this.template.className = "drag-verify-pass";
  this.handler.classList.add("handler-icon-pass");
  this.handler.onmousedown = null;
  this.handler.ontouchstart = null;
  this.bus.emit("complete");
}
Copy the code

6. Restore initial state

reset() {
    this.template.className = "unselect";
    this.handler.classList.remove("handler-icon-pass");
    this.updateDistance(0);
    this.initEvents();
    this.bus.emit("reset");
}
Copy the code

7. Other functions

// Update the moving distance
updateDistance(x = 0) {
  this.updateStyle([this.handler], "left", x + "px");
  this.updateStyle([this.dragbg], "width", x + "px");
}

// Add animation
addTransition() {
  this.template.className = "";
  this.updateStyle([this.handler, this.dragbg], "transition"."all .2s ease");
}

// Unanimate
cancelTransition() {
  this.updateStyle([this.handler, this.dragbg], "transition"."none");
}

// Update the style
updateStyle(selector, attr, content) {
  selector.forEach((item) = > {
    item.style[attr] = content;
  });
}
Copy the code

The demo

Complete code for drag-verify

Refer to the project dream-d /SliderTools