The Switch component is simple

1. The effect achieved

  • After clicking the button inside the white dot can move;
  • Gray bottom to blue bottom;
  • What’s so hard about these two effects?

2. How to write the code

1) Outer frame, inner circle (hardware foundation)
  • This box is a button, denoted by a button (
    h : 22 p x ; h:22px;     h2:$h – 4px;)

    • H: height: $h;
    • Width: $h * 2;
    • Border: None;
    • Background: # BFBFBF;
    • Border = 1/2h, border-radius: $h/2;
    • A. relative B. relative C. relative D. relative
  • This circle is the span inside the button;
    • Absolute position: absolute;
    • 2px away from the top of the frame; top: 2px;
    • 2px away from the left end of the border; left: 2px;
    • Height h2; height: $h2;
    • The width of the h2. width: $h2;
    • Background white; background: white;
    • Rounded corner of border 1/2H2; border-radius: $h2 / 2;
    • Click on the animation time 250ms; transition: all 250ms;

2) How to move (software) with one click

  • The first step is to bind a click event to the button so that when clicked, it will react.

< button@click =”toggle” > This toggle is used to switch true and false values. X=! X

  • You also need to bind a class event to the button that expresses what the button should do after the click event.
<button @click="toggle" :class="{checked}">
   <span></span>
 </button>
Copy the code

3) in the SwitchDemo

<switch value=”false” @input=””/> <switch value=”false” @input=””/

 <switch value="false" @input=""/>
 --------------------------
 setup(){
 const y = ref(true)
 return {y}
 }
Copy the code

If you name a variable y, then the value of value will be y. If anything changes, make y equal to the latest value $event

  • Inside switch.vue, accept the value, use props to accept
<script>
export default{
props:{
value:Boolean}
}
</script>
Copy the code

{{value}} {props}; <switch :value=”false” @input=””/> <switch :value=”false” @input=””/>

  • < button@click =”toggle” :class=”{checked}”> < button@click =”toggle” :class=”{checked}” <button @click="toggle" :class="{checked}"

The code now looks like this:

<template> <div> <Switch :value="y" @input="y=$event"/> <! </div> </template> <script lang="ts"> import switch from '..... ' import {ref} from 'vue' export default{ components:{Switch}, setup(){ const y = ref(false) return {y} } } </script> </script>Copy the code

Here is the internal functional level

<template> <button @click="toggle" :class="{checked:value}"> <span></span> </button> </template> <script lang="ts"> import {ref} from "vue"; Export default {props:{value: Boolean,}, setup(props,context){const toggle = ()=>{context.emit("input",! props.value); }; return {toggle}; }} </script> toggle reverses the current value and emits it via the input event.Copy the code

The new version of Vue3 is rewritten in v-model usage:

  • Because the props is value, the input event should be ‘update: value’;
  • @update: value= “y=$event”;
  • @update: value= “y=$event”; @update: value=” y= “;
  • After v-model is added, it is two-way binding, and value can be listened automatically

Step 1: What is the Switch component

A Switch is a Switch with two states. ! [image. PNG] (p9-juejin.byteimg.com/tos-cn-i-k3… E263969642e59e59e4e14fd0733b ~ TPLV – k3u1fbpfcp – watermark. Image) the second step: API design

Step 3: Write code

Inside SRC, create a new folder lib. Inside lib, create the switch. Vue file.

  • Button: switch;
  • Add a circle inside the button, let it scroll back and forth, indicating the status of the switch;
<style lang="scss" scoped>
$h:22px;
$h2:$h - 4px;
button{
height:$h;
width:$h*2;
border:none;
background:blue;
border-radius:$h/2;
position:relative;
}
span{
position:absolute;
top：2px;
left:2px;
height:$h2;
width:$h2;
background:white;
border-radius:$h2/2;
加一个transition：left 1s； 
}
Copy the code
  • The code above appears with a white circle in a blue box.
  • Interpretation relative: finding a position after occupying it at other times;
  • Absolute: Sort absolute based on the parent file.

Hover causes the white circle to roll to the right

  • Principle: it is to move on the basis of the original after clicking;
  • The starting position is left: 2px;
  • Left :calc(100%-#{$h2}-2px);
  • This end position has to be separate
button:hover > span{
left:calc(100%-#{$h2}-2px);
}
Copy the code

This is the hover switch, then the click switch, with animation.

Click the switch to switch, accompanied by animation

  • So let’s write one
<script lang = "ts" > import {ref} from 'vue' export default{setup(){const x = ref(false) const toggle = ()=>{ x.value=! x.value } return {X,toggle} } } </script>Copy the code

And then we can replace all the x’s with checked

  • Setup (){} const x = ref(false) return {x}
  • Inside button, use x as a class for class,
  • 5. If X is true, checked is the button’s class. If false, checked is not.
  • Because ref is a box and cannot be changed, it is expressed with its value X.value;
  • So hover should be checked
Checked, the background can be red, unchecked, blue button.checked {background:red; } button:checked > span{ left:calc(100%-#{$h2}-2px); Button: focus{outline: none; }}Copy the code

Add value and input to switch

  • Value = “y” and @input= “y=$event”; The value must be preceded by a colon:, otherwise the value accepted is a string and not a Boolean.
  • Pass the latest value in @input;
  • How do I get this value? I get it by variable;
setup(){
const y = ref(true)
return {y}}
Copy the code

How to accept value with switch

  • Add props to switch
export default {
props:{
value: Boolean  }
Copy the code
  • To do this, write after button:
<div>{{value}}</div>
Copy the code

The final code

<template> <button @click="toggle" :class="{checked:value}"> <span></span> </button> </template> <script lang="ts"> import { ref } from "vue"; export default { props: { value: Boolean, }, setup(props, context) { const toggle = () => { context.emit("update:value", ! props.value); }; return { toggle }; }}; </script>Copy the code