Study of Vue takeout project

Using svg to display loading prompt interface

Here, we can't use v-for="(shop, index) in shops" for svg ul. Our purpose is to display the interface like this when we don't get data. When we use it, we can't display it. Therefore, v-for="items in 6" needs to be like this,

Comment on stars

Here, shop.rating is the score obtained. Size, star size and Number also need to be bound
It's a series of operations based on the criteria of scoring. Create an array and put the class in it, which will use on, half, off. They correspond to the shape of stars

//ShopList
<Star :score="shop.rating" :size="24"></Star>
//Star
<template>
  <div class="star" :class="'star-'+size">
    <span class="star-item " v-for="(sc, index) in starClasses" :class="sc" :key="index"></span>
  </div>
</template>

<script>
  //Class name constant here 'on' cannot be written as on, because class name is constant
  const CLASS_ON = 'on'
  const CLASS_HALF = 'half'
  const CLASS_OFF = 'off'
  export default {
    props:{
      score:Number, //Fraction
      size:Number  //Star size
    },
    computed:{
      /*
      3.2:  3 + 0 + 2
      3.5:  3 + 1 + 2
       */
      starClasses(){
        const {score} = this
        const scs = []
        //Add n classes on to scs
        //floor() method returns the largest integer less than or equal to x
        const scoreInteger = Math.floor(score)
        for (let i = 0; i < scoreInteger; i++){
          scs.push(CLASS_ON)
        }
        //Add 0 / 1 class? Half to scs
        //The decimal calculation here is not very accurate, so * 10
        if(score*10-scoreInteger*10>=5){
          scs.push(CLASS_HALF)
        }
        //Add n class "off" to scs
        // for (let i = 0; i < 5 - scoreInteger; i++){
        //   scs.push(CLASS_OFF)
        // } also can.
        while(scs.length<5){
          scs.push(CLASS_OFF)
        }
        return scs
      }
    }
  }
</script>

Switch of login interface and verification of mobile phone

It's easy to remember to use calculated properties

 <div class="login_content">
        <form>
          <div :class="{on:loginWay}">
            <section class="login_message">
              <input type="tel" maxlength="11" placeholder="Cell-phone number" v-model="phone">
              <button disabled="disabled" class="get_verification" :class="{right_phone:rightPhone}">Get verification code</button>
<script>
  export default {
    data(){
      return{
        loginWay:true,//true for SMS login, false for password
        phone:'',//Cell-phone number
      }
    },
    computed:{
      rightPhone(){
        //The test() method is used to detect whether a string matches a pattern
        return /^1\d{10}$/.test(this.phone)
      }
    }
  }
</script>

Achieve countdown

: disabled means false to click
Clicking any button in the form is equivalent to submitting the form, so you should block the default behavior @ click.prevent
Pay attention to the problem of timers. When counting down, click not to let it turn on another timer. Here you can also put them in if(!this.computeTime)

<button :disabled="!rightPhone" class="get_verification"
			:class="{right_phone:rightPhone}" @click.prevent="getCode">
            {{computeTime>0 ? `has been sent(${computeTime}s)` : 'Get verification code'}}
</button>
<script>
  export default {
    data(){
      return{
        loginWay:true,//true for SMS login, false for password
        phone:'',//Cell-phone number
        computeTime:0,
        click:false
      }
    },
    computed:{
      rightPhone(){
        //The test() method is used to detect whether a string matches a pattern
        return /^1\d{10}$/.test(this.phone)
      }
    },
    methods:{
      getCode(){
        if (this.click) {
          return
        }
        this.click=true
        //Start countdown
        this.computeTime = 30
        const intervalId = setInterval(() => {
          this.computeTime--
          if(this.computeTime<=0){
            this.click = false
            clearInterval(intervalId)
          }
        },1000)
        //Send ajax request (send verification code SMS to the specified mobile phone number)
      }
    }
  }
</script>

Toggle display and hide of password

This is to show and hide some class es
Set two input s

<section class="login_verification">
    <input type="text" maxlength="8" placeholder="Password"v-if="showPsw" v-model="pwd">
    <input type="password" maxlength="8" placeholder="Password" v-else v-model="pwd">
    <div class="switch_button" :class="showPsw? 'on':'off'" @click="showPsw=!showPsw">
    <div class="switch_circle" :class="{right:showPsw}"></div>
    <span class="switch_text">{{showPsw?'abc':''}}</span>
    </div>
</section>
data(){
      return{
        loginWay:true,//true for SMS login, false for password
        phone:'',//Cell-phone number
        computeTime:0,
        click:false,
        showPsw:false,//Show password or not
        pwd:''
      }
    },

Today, it's easy and simple. There are many hidden class es. Come on

57 original articles published, praised 0, and 619 visitors
Private letter follow

Tags: Mobile less

Posted on Sun, 02 Feb 2020 07:17:52 -0800 by rajavel