Vue外卖项目的学习（4）

使用svg显示加载种提示界面

这里不能给svg那个ul用v-for="(shop, index) in shops”，我们的目的是为了在没获取到数据的时候，界面这样显示，用了就都不能显示，所以 v-for="items in 6"需要这样，

评论星星

这里shop.rating是获取到的评分 ，size星星大小 ，Number也需要强制绑定哦
就是根据评分这个条件来进行一系列操作，创建个数组，往里面放class会用到on，half，off，它们对应着星星的形状

//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>
  //类名常量  这里'on'不可以写成on，因为class名字是常量
  const CLASS_ON = 'on'
  const CLASS_HALF = 'half'
  const CLASS_OFF = 'off'
  export default {
    props:{
      score:Number, //分数
      size:Number  //星星大小
    },
    computed:{
      /*
      3.2:  3 + 0 + 2
      3.5:  3 + 1 + 2
       */
      starClasses(){
        const {score} = this
        const scs = []
        //向scs中添加n个CLASS_ON
        //floor() 方法返回小于等于x的最大整数
        const scoreInteger = Math.floor(score)
        for (let i = 0; i < scoreInteger; i++){
          scs.push(CLASS_ON)
        }
        //向scs中添加0/1个 CLASS_HALF
        //这里小数计算是不太准确的，所以*10
        if(score*10-scoreInteger*10>=5){
          scs.push(CLASS_HALF)
        }
        //向scs中添加n个CLASS_OFF
        // for (let i = 0; i < 5 - scoreInteger; i++){
        //   scs.push(CLASS_OFF)
        // }也可以
        while(scs.length<5){
          scs.push(CLASS_OFF)
        }
        return scs
      }
    }
  }
</script>

登入界面的切换与手机验证

记得要用计算属性就很简单了

 <div class="login_content">
        <form>
          <div :class="{on:loginWay}">
            <section class="login_message">
              <input type="tel" maxlength="11" placeholder="手机号" v-model="phone">
              <button disabled="disabled" class="get_verification" :class="{right_phone:rightPhone}">获取验证码</button>

<script>
  export default {
    data(){
      return{
        loginWay:true,//true代表短信登入，false代表密码
        phone:'',//手机号
      }
    },
    computed:{
      rightPhone(){
        //test() 方法用于检测一个字符串是否匹配某个模式.
        return /^1\d{10}$/.test(this.phone)
      }
    }
  }
</script>

实现倒计时

:disabled指为false才是可以点击
点击表单中任何按钮都相当于提交表单，所以要阻止默认行为@click.prevent
注意定时器的问题，倒计时时点击不让它再开启一个定时器了，这里还可以把它们放在if(!this.computeTime)里，都可以

<button :disabled="!rightPhone" class="get_verification"
			:class="{right_phone:rightPhone}" @click.prevent="getCode">
            {{computeTime>0 ? `已发送(${computeTime}s)` : '获取验证码'}}
</button>

<script>
  export default {
    data(){
      return{
        loginWay:true,//true代表短信登入，false代表密码
        phone:'',//手机号
        computeTime:0,
        click:false
      }
    },
    computed:{
      rightPhone(){
        //test() 方法用于检测一个字符串是否匹配某个模式.
        return /^1\d{10}$/.test(this.phone)
      }
    },
    methods:{
      getCode(){
        if (this.click) {
          return
        }
        this.click=true
        //启动倒计时
        this.computeTime = 30
        const intervalId = setInterval(() => {
          this.computeTime--
          if(this.computeTime<=0){
            this.click = false
            clearInterval(intervalId)
          }
        },1000)
        //发送ajax请求（向指定手机号发送验证码短信）
      }
    }
  }
</script>

切换密码的显示隐藏

这里就是显示隐藏一些class
设置两个input

<section class="login_verification">
    <input type="text" maxlength="8" placeholder="密码"v-if="showPsw" v-model="pwd">
    <input type="password" maxlength="8" placeholder="密码" 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代表短信登入，false代表密码
        phone:'',//手机号
        computeTime:0,
        click:false,
        showPsw:false,//是否显示密码
        pwd:''
      }
    },

今天比较轻松简单，显示隐藏class比较多，加油吧