window编码解码；计时器；判断地址栏URL中是否包含某个参数this.$route.query；判断机型； this.$refs['upload-input'].setAttribute，

最新推荐文章于 2022-10-28 11:05:30 发布

乐玩程序

最新推荐文章于 2022-10-28 11:05:30 发布

阅读量791

点赞数

分类专栏： web前端文章标签： javascript vue.js

本文链接：https://blog.csdn.net/muzili1006/article/details/105691851

版权

web前端专栏收录该内容

12 篇文章 0 订阅

订阅专栏

1. 判断机型


  <input ref="upload-input" name="upload-image" id="upload-image" type="file" accept="image/*" v-show="false">


// window.navigator.userAgent.match(/Mi/)=='Mi' 判断是否是小米手机
// this.$refs['upload-input'].setAttribute 
//设置 input 元素的 type 属性：
//语法element.setAttribute(attributename,attributevalue)
//attributename	String	必需。您希望添加的属性的名称。
//attributevalue	String	必需。您希望添加的属性值。
 if(window.navigator.userAgent.match(/Mi/)=='Mi'){
        this.$refs['upload-input'].setAttribute("capture","camera")
  }

2. this.$refs[‘name’]
在这里插入图片描述

3. 判断地址栏URL中是否包含某个参数
传参数
this. $router.push({name: 'test', query:{solar_id: this.solar_id} }); 获取参数 this.$ route.query.solar_id
url的表现形式(url中带有参数)
http://localhost:8080/H5/test?solar_id=1

 computed: {
 //this.$route.query  
      solar_id() {
        if (this.$route.query.solar_id) {
          return this.$route.query.solar_id
        } else {
          return localStorage.getItem('solar_id')
        }
      }
    },
    methods:{
     Submit() {
        if (this.solar_id == 1) {
          this.popup = true;
        } else {
          // localStorage.setItem('birthday', this.birthday)
          this.$router.push({name: 'test',query: {birthday: this.birthday}})
        }
      },
    }

4.计时器

methods：{
   setTimer(){
         this.timer = setInterval(()=>{
           this.time += 1
           console.log(this.time)
           if(this.time>=6){
             this.shade = true;
             this.popup = true
             clearInterval(this.timer)//清除定时器
           }
         },500)
       },
}

5. 数组操作

methods：{
// index题的序号
      // i选项序号
      changeOption(index,i,event){
        if(this.disable)return false;
        this.disable = true
        event.srcElement.classList.add('active');//加入样式
        setTimeout( ()=> {
          this.answer.push(i)//选择的答案放入数组
          event.srcElement.classList.remove('active');//移除样式
          this.disable = false
          if(this.answer.length === 60){
            this.onSubmit()
          }
          window.scroll(0,0)
        },200)
      },
      //上一题
      toPrev(){
        this.answer.pop()//删除数据最后一个
      },
onSubmit(){
        let getsure=[
          '3', '4', '0', '1', '5', '2', '5', '5', '0', '2', '3', '4',
          '1', '5', '0', '1', '0', '2', '4', '5', '3', '2', '3', '4',
          '7', '1', '2', '7', '6', '3', '4', '0', '6', '5', '0', '1',
          '2', '3', '2', '6', '7', '5', '4', '3', '0', '1', '4', '5',
          '6', '5', '7', '1', '0', '4', '0', '5', '2', '1', '3', '1'
        ];
        let scoreList = this.answer.map((v,i)=> getsure[i] == v);//选项和答案比对
        // console.log('scoreList:',scoreList);
        let result = [0,0,0,0,0];
        scoreList.forEach((v,i)=>{
          if(i<12){
            v && result[0]++
          }else if(i<24){
            v && result[1]++
          }else if(i<36){
            v && result[2]++
          }else if(i<48){
            v && result[3]++
          }else{
            v && result[4]++
          }
        })
        //window.btoa()编码   window.atob(result)解码 result.join('-') 格式化拼接0-0-0-0-0
        this.$router.push({name: 'order',query:{result:window.btoa(result.join('-'))}})
      }
}