码迷,mamicode.com
首页 > 其他好文 > 详细

前端常遇到的问题!!!

时间:2019-11-10 22:37:40      阅读:46      评论:0      收藏:0      [点我收藏+]

标签:es6   seo   sha   技术   padding   设置图   str   遍历   password   

 

一丶element-ui中遇到的坑

1.message消息提示框

我们在点击弹出消息提示时,点击多次的话会一直弹出多个相同的消息提示,感觉非常的不友好。这时候我们可以在调用 Message 或 this.$message 会返回当前 Message。 调用实例之前关闭前面提示就好了。

这其实很简单,就是一句代码的事:加上 this.$message.closeAll()就好了!!!

    async findTijiao () {
      this.$message.closeAll() // (只弹出一个消息提示框)
      let tj = checkPhone(this.findMobile, 1) // 找回密码手机号
      let findMima = checkPhone(this.findMima, 2) // 新密码
      let againMima = checkPhone(this.confirmWord, 2) // 再次输入的新密码
      if (tj.code === 500 || findMima.code == 500 || againMima.code == 500) {
        this.$message(tj.msg + ‘和相关的信息‘)
        return
      }
      if (tj.code === 200) {
        if (this.findMima === this.againMima) {
          let res = await this.$http.post(‘/api/retrievePasswd‘, {
            mobile: this.findMobile,
            password: this.findMima,
            verification_code: this.findY
          })
          if (res.data.code === 200) {
            // 隐藏找回密码对话框和展示show2
            this.show = 1
            this.pswdDialogVisible = false
            if (this.$route.path !== ‘/‘) {
              this.$router.push({ path: ‘/‘ })
            }
            this.$message({
              message: ‘找回密码成功‘
            })
          } else if (res.data.code === 10002) {
            this.$message({
              message: ‘验证码错误‘
            })
          } else if (res.data.code === 10001) {
            this.$message({
              message: ‘手机格式错误‘
            })
          }
        } else {
          this.$message(‘两次输入的密码不一致‘)
        }
      }
    }
2.tooltip文字提示
我们鼠标移入的时候会弹出一个提示框,里边的内容我们可以通过slot="content"来显示想要提示的内容,不过当我们想要现实鼠标移出目标元素就关闭提示时(也就是hover效果)就需要添加
:enterable=‘false‘这么一段代码
<el-tooltip
              v-if="win[i] && k < win[i].bo_list.length && win[i].bo_list.length > 0"
              class="item"
              :key="k"
              effect="dark"
              placement="bottom"
              :enterable=‘false‘ // hover效果
            >
              <div slot="content" class="xianshi"> //编辑提示的内容
                <span class="yincang" :title="win[i].bo_list[k].league_name">{{win[i].bo_list[k].league_name}}</span>
                <br />
                <span class="shijian">{{statrTime(win[i].bo_list[k].begin_time)}}</span>
                <br />
                <span class="bifen">{{win[i].bo_list[k].kills}}&nbsp;&nbsp;&nbsp;:&nbsp;&nbsp;&nbsp;{{win[i].bo_list[k].opponent.kills}}</span>
                <br />
                <span class="zhandui">{{win[i].bo_list[k].team_name}}&nbsp;&nbsp;:&nbsp;&nbsp;{{win[i].bo_list[k].opponent.team_name}}</span>
              </div>
              <div :class="{‘nei‘:true, sheng:win[i].bo_list[k].is_win}">
                <span>{{win[i].bo_list[k].is_win?‘胜‘:‘负‘}}</span>
              </div>
            </el-tooltip>
3.修改element-ui组件里边的样式
我们开发的时候,要改组件的里边的样式时,就在
<style lang="less" scoped>里边直接加话是没有效果的,此时我们可以在全局给样式,或者在样式前边加上/ deep /
/deep/ .el-input__inner { //样式修改
        text-align: center;
        width: 100%;
        color: #fff;
      }
二丶做登录和注册页面时要用到的一些验证
1.通过es6的 export 和 import 来封装方法和调用
(1)模块是独立的文件,该文件内部的所有的变量外部都无法获取。如果希望获取某个变量,必须通过export输出
(2)export定义了模块的对外接口后,其他JS文件就可以通过import来加载这个模块
2.手机验证和验证码验证以及密码验证
 (1)定义一个msg对象
const msg = {
  ‘code‘: 500,
  ‘msg‘: ‘错误!‘
}
(2)封装checkPhone方法return msg
export function checkPhone (str, flag) { 
  // 检验手机号 //str是传入的字符串,flag是用来判断是验证手机号码还是验证码以及密码的
  if (flag == 1) {
//正则判断手机号码
    var reg = 10 && /^((13|14|15|17|18)[0-9]{1}\d{8})$/
    if (str == ‘‘) {
      msg.code = 500
      msg.msg = ‘请输入手机号码‘
    } else if (!reg.test(str)) {
      msg.code = 500
      msg.msg = ‘手机格式不正确‘
    } else {
      msg.code = 200
      msg.msg = ‘成功‘
    }
  } else if (flag == 2) {
    var reg_pass = /^(\w){6,20}$/
    // 密码6到20位数字的密码
   //为空时提示请输入密码
    if (str == ‘‘) {
      msg.code = 500
      msg.msg = ‘请输入密码‘
    } else if (!reg_pass.test(str)) {
      msg.code = 500
      msg.msg = ‘密码格式不正确, 请输入6-20位数字。‘
    } else {
      msg.code = 200
    }
  } else if (flag == 3) {
    // 验证码,验证输入6位数的数字验证码
    var reg_yanzheng = /^\d{6}$/
    if (str == ‘‘) {
      msg.code = 500
      msg.msg = ‘请输入验证码‘
    } else if (!reg_yanzheng.test(str)) {
      msg.code = 500
      msg.msg = ‘验证码格式不正确, 请输入6位数的验证码。‘
    } else {
      msg.code = 200
    }
  }
  return msg
}
(3)调用
import { checkPhone } from ‘@/utils/common.js‘ //调用验证的方法
   async register () {
      this.$message.closeAll()
      let ss = checkPhone(this.zhucePassword, 2) // 声明一个ss变量接收要验证的手机号码或着验证码以及密码
      // let sss = checkPhone(this.verification_code, 3) // 验证码 (this.zhucePasswordthis就是CheckPhone中的str而这里的1,2,3就是flag)
      let ssss = checkPhone(this.againzhuce, 2) // 再次密码
      if (ss.code === 500 || ssss.code === 500) {
        this.$message(ss.msg)
        return
      }//  if (this.checked === true) 是否阅读和勾选协议
      if (this.zhucePassword === this.againzhuce) {
        if (this.checked === true) {
          let res = await this.$http.post(‘/api/register‘, {
            verification_code: ‘‘,
            mobile: this.mobile,
            password: this.zhucePassword
          })
          if (res.data.code === 200) {
            this.show = 2
            if (this.$route.path !== ‘/‘) {
              this.$router.push({ path: ‘/‘ })
            }
            // this.centerDialogVisible = false
            this.$store.commit(‘CHANGE_ZUCHE‘, false)

            this.$cookies.set(‘logintoken‘, res.data.data.user_token, {
              expires: getExpireTime(res.data.data.expire_time)
            })
            this.$store.commit(‘LOGIN_TOKEN‘, {
              loginToken: res.data.data.user_token
            })
            localStorage.setItem(‘userInfo‘, JSON.stringify(res.data.data))
            this.$store.commit(‘USERINFO‘, { userInfo: res.data.data })
            localStorage.setItem(
              ‘userId‘,
              JSON.stringify(res.data.data.user_id)
            )
            this.$store.commit(‘USER_ID‘, { userId: res.data.data.user_id })
          } else if (res.data.code === 10007) {
            this.$message(‘该手机号已经注册!‘)
          }
        } else {
          this.$message(‘请阅读并勾选用户协议‘)
        }
      } else {
        this.$message(‘两次密码不一致‘)
      }
    }
2.时间戳转换为日期和时间,以及取小数后几位
export function times (time传入的参数){
let d = new Date(time*1000)//毫秒转换成秒
let mon =(d.getMonth()+1)//转换成月份的时候要注意是从0开始的记得加1
let day =d.getDate()
let h=d.getHours()
let m=d.getMinuters()
//利用二元判断是否小于10,小于的话前面加0
mon = mon<10? "0"+mon:mon
day = day<10?"0"+day:day
  h = h < 10 ? ‘0‘ + h : h
  m = m < 10 ? ‘0‘ + m : m
//返回格式2019-11-11-8-23
return (
    d.getFullYear() + ‘-‘ + mon + ‘-‘ + day + ‘  ‘ + h + ‘:‘ + m
  )
2.调用方法
import { times } from ‘@/utils/common.js‘
调用一下
 methods: {
    times (time) {
      return shijian(time)
    }
  },
使用
 <span>{{shijian(item && item.begin_time?item.begin_time:"")}}</span>
3.取两位小数
封装
export function jsRound (number, precision) {
  return Math.round(+number + ‘e‘ + precision) / Math.pow(10, precision)
}

调用

  methods: {
    // 四舍六入 .toFixed()
    // 取两位小数
    format (t) {
      return jsRound(t, 2)
    }
  }
}

怎么用

 <span>参团率:{{format(item.ave_group_rate*100)}}%</span>

 

三丶点击导航栏切换显示不同的内容
如下图切换不同的位置显示两队不同位置的数据对比
技术图片
 
导航栏的代码实现
<div
          v-for="(v,i) in list"
          :key="i"
          @click="changeL(i)"
          :class="{active: i == active}"
        >{{ v }}</div>
      </div>
//下面是说明
:class="{active: i == active}"根据下标绑定类实现点击切换高亮
@click="changeL(i)"点击事件传入下标为参数

  data () {
    return {
      list: [‘上单‘, ‘打野‘, ‘中单‘, ‘ADC‘, ‘辅助‘],利用v-for显示导航栏的显示
      active: 0,默认下标为0的高亮
      src: require(‘@/assets/image/default.png‘),设置图片src为空时显示的默认图片
//下面相当与映射,把后端返回的英文字段用中文渲染但页面上
//页面上如何用如下
        //<span class="player-wz">{{areaString[item.game_id][item.area]}}</span>这里的game_id为1,即areaSring[1][item.area]
      areaString: {
        ‘1‘: {
          ‘top‘: ‘上单‘,
          ‘jun‘: ‘打野‘,
          ‘mid‘: ‘中路‘,
          ‘adc‘: ‘ADC‘,
          ‘sup‘: ‘辅助‘
        },
        ‘2‘: {
          ‘top‘: ‘一号位‘,
          ‘mid‘: ‘二号位‘,
          ‘adc‘: ‘三号位‘,
          ‘jun‘: ‘四号位‘,
          ‘sup‘: ‘五号位‘
        }
      }
    }
  },
 methods: {
//点击事件,点击切换显示 changeL (i) { this.active = i }, // 四舍六入 .toFixed() // 取两位小数 format (t) { return jsRound(t, 2) } }

蓝队

<div class="content" v-for="(item,index) in teamPlayer[0]" :key="‘a‘+index" v-if="index == active">
.....//这里是你要显示的内容,kda,参团率什么的
//
v-if="index == active"因为遍历出来的有五个位置,所以要用v-if绑定下标index==active来切换显示各个位置的信息
</div>

红队

<div class="content" v-for="(item,index) in teamPlayer[1]" :key="‘aa‘+index" v-if="index == active">
.....//这里是你要显示的内容,kda,参团率什么的
key拼接aa是因为有两个相同的key报错如下

  vue.esm.js?efeb:628 [Vue warn]: Duplicate keys detected: ‘0‘. This may cause an update error.

</div>
 四丶往二维数组里边加字段
以下是返回的数据结构
技术图片

技术图片

  computed: {
    teamPlayer () {
      // 加字段
      let t = this.data.teamPlayer || []
      for (let i = 0; i < t.length; i++) {
        // e=teamPlayer[0,1]一维
        const e = t[i]
        for (let k = 0; k < e.length; k++) {
          // ee=teamPlaye[0,1,2,3,4]二维
          const ee = e[k]
          // 在二维数组里边加字段‘kda‘
          t[i][k][‘kda‘] = ((ee.ave_assists + ee.ave_kills) / ee.ave_deaths).toFixed(2)
        }
      }

      for (let i = 0; i < t.length; i++) {
        const e = t[i]
        for (let k = 0; k < e.length; k++) {
          const ee = e[k]
          // kda的百分比
          t[i][k][‘kda_width‘] = parseInt((t[i][k][‘kda‘] / (parseFloat(t[0][k][‘kda‘]) + parseFloat(t[1][k][‘kda‘]))) * 100)
        }
        for (let k = 0; k < e.length; k++) {
          const ee = e[k]
          // 两队的分经济总和
          t[i][k][‘double_economy‘] = parseInt((parseFloat(t[0][k][‘ave_min_economy‘]) + parseFloat(t[1][k][‘ave_min_economy‘])))
        }
        for (let k = 0; k < e.length; k++) {
          const ee = e[k]
          // 两队的分输出总和
          t[i][k][‘double_output‘] = parseInt((parseFloat(t[0][k][‘ave_min_output‘]) + parseFloat(t[1][k][‘ave_min_output‘])))
        }
        for (let k = 0; k < e.length; k++) {
          const ee = e[k]
          // 两队的参团率总和
          t[i][k][‘double_groupRate‘] = ((parseFloat(t[0][k][‘ave_group_rate‘]) + parseFloat(t[1][k][‘ave_group_rate‘])))
        }
      }
      return t
    }

  },

完整代码如下

<template>
  <div>
    <div class="all">
      <div class="top">
        <div
          v-for="(v,i) in list"
          :key="i"
          @click="changeL(i)"
          :class="{active: i == active}"
        >{{ v }}</div>
      </div>
      <!-- 蓝队 -->
      <!-- 盒子 -->
      <div>
        <!-- key重复声明报错 字符串拼接成不同的key -->
        <div class="content" v-for="(item,index) in teamPlayer[0]" :key="‘a‘+index" v-if="index == active">
          <!-- 队伍头像 -->
          <div class="team-icon">
            <img :src="item.team_icon?item.team_icon:srcO" alt />
          </div>
          <!-- 玩家信息 -->
          <div class="play">
            <!-- 左边 -->
            <div class="player">
              <!-- 玩家头像 -->
              <!-- <img class="touxiang" :src="item.head_img?item.head_img:src" alt /> -->
               <div class="touxiang" :style="{backgroundImage:‘url(‘+(item.head_img)+‘)‘}"></div>
              <!-- 玩家名字 -->
              <span class="player-id">{{item.player_name}}</span>
              <!-- 玩家位置 -->
              <span class="player-wz">{{areaString[item.game_id][item.area]}}</span>
            </div>
            <!-- 右边 -->
            <div class="match-message">
              <!-- KDA -->
              <div class="kda">
                <!-- 进度条 -->
                <div class="jd-1">
                  <div class="jd-nei" :style="{width: item.kda_width + ‘%‘}"></div>
                </div>
                <div class="kill">
                  <span>KDA:{{item.ave_kills}}/{{item.ave_deaths}}/{{item.ave_assists}}</span>
                </div>
              </div>
              <!-- 分经济 -->
              <div class="jing-ji kda">
                <div class="jd-1 jd-2">
                  <div class="jd-nei" :style="{width: (item.ave_min_economy/item.double_economy)*100+ ‘%‘}"></div>
                </div>
                <div class="money kill">
                  <span>分均经济:{{item.ave_min_economy}}</span>
                </div>
              </div>
              <!-- 分均输出 -->
              <div class="shu-chu kda">
                <div class="jd-1 jd-3">
                  <div class="jd-nei" :style="{width: (item.ave_min_output/item.double_output)*100 + ‘%‘}"></div>
                </div>
                <div class="shang-hai kill">
                  <span>分均输出:{{item.ave_min_output}}</span>
                </div>
              </div>
              <!-- 参团率 -->
              <div class="can-tuan kda">
                <div class="jd-1 jd-4">
                  <div class="jd-nei" :style="{width: item.ave_group_rate*100 + ‘%‘}"></div>
                </div>
                <div class="tuan-zhan kill">
                  <span>参团率:{{format(item.ave_group_rate*100)}}%</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 红队 -->
        <div class="second content" v-for="(item,index) in teamPlayer[1]" :key="‘aa‘+index" v-if="index == active">
          <!-- 战队图标 -->
          <div class="team-icon">
            <img :src="item.team_icon?item.team_icon:srcO" alt />
          </div>
          <!-- 玩家信息 -->
          <div class="play">
            <!-- 左边 -->
            <div class="player">
              <!-- 玩家头像 -->
              <!-- <img class="touxiang" :src="item.head_img?item.head_img:src" alt /> -->
               <div class="touxiang" :style="{backgroundImage:‘url(‘+(item.head_img)+‘)‘}"></div>
              <!-- 玩家名字 -->
              <span class="player-id">{{item.player_name}}</span>
              <!-- 玩家位置 -->
              <span class="player-wz">{{areaString[item.game_id][item.area]}}</span>
            </div>
            <!-- 右边 -->
            <div class="match-message">
              <!-- KDA -->
              <div class="kda">
                <div class="jd-1">
                  <div class="jd-nei" :style="{width: item.kda_width + ‘%‘}"></div>
                </div>
                <div class="kill">
                  <span>KDA:{{item.ave_kills}}/{{item.ave_deaths}}/{{item.ave_assists}}</span>
                </div>
              </div>
              <!-- 分均经济 -->
              <div class="jing-ji kda">
                <div class="jd-1">
                  <div class="jd-nei" :style="{width: (item.ave_min_economy/item.double_economy)*100 + ‘%‘}"></div>
                </div>
                <div class="money kill">
                  <span>分均经济:{{item.ave_min_economy}}</span>
                </div>
              </div>
              <!-- 分均输出 -->
              <div class="shu-chu kda">
                <div class="jd-1">
                  <div class="jd-nei" :style="{width: (item.ave_min_output/item.double_output)*100  + ‘%‘}"></div>
                </div>
                <div class="shang-hai kill">
                  <span>分均输出:{{item.ave_min_output}}</span>
                </div>
              </div>
              <!-- 参团率 -->
              <div class="can-tuan kda">
                <div class="jd-1">
                  <div class="jd-nei" :style="{width: (item.ave_group_rate*100)+ ‘%‘}"></div>
                </div>
                <div class="tuan-zhan kill">
                  <span>参团率:{{format(item.ave_group_rate*100)}}%</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { jsRound } from @/utils/common.js
export default {
  name: player,
  props: [data],
  data () {
    return {
      list: [上单, 打野, 中单, ADC, 辅助],
      active: 0,
      src: require(@/assets/image/default.png),
      srcO: require(@/assets/image/teamDefault.png),
      areaString: {
        1: {
          top: 上单,
          jun: 打野,
          mid: 中路,
          adc: ADC,
          sup: 辅助
        },
        2: {
          top: 一号位,
          mid: 二号位,
          adc: 三号位,
          jun: 四号位,
          sup: 五号位
        }
      }
    }
  },
  computed: {
    teamPlayer () {
      // 加字段
      let t = this.data.teamPlayer || []
      for (let i = 0; i < t.length; i++) {
        // e=teamPlayer[0,1]
        const e = t[i]
        for (let k = 0; k < e.length; k++) {
          // ee=teamPlayer[0,1][0,1,2,3,4]
          const ee = e[k]
          // 在二维数组里边加字段‘kda‘
          t[i][k][kda] = ((ee.ave_assists + ee.ave_kills) / ee.ave_deaths).toFixed(2)
        }
      }

      for (let i = 0; i < t.length; i++) {
        const e = t[i]
        for (let k = 0; k < e.length; k++) {
          const ee = e[k]
          // kda的百分比
          t[i][k][kda_width] = parseInt((t[i][k][kda] / (parseFloat(t[0][k][kda]) + parseFloat(t[1][k][kda]))) * 100)
        }
        for (let k = 0; k < e.length; k++) {
          const ee = e[k]
          // 两队的分经济总和
          t[i][k][double_economy] = parseInt((parseFloat(t[0][k][ave_min_economy]) + parseFloat(t[1][k][ave_min_economy])))
        }
        for (let k = 0; k < e.length; k++) {
          const ee = e[k]
          // 两队的分输出总和
          t[i][k][double_output] = parseInt((parseFloat(t[0][k][ave_min_output]) + parseFloat(t[1][k][ave_min_output])))
        }
        for (let k = 0; k < e.length; k++) {
          const ee = e[k]
          // 两队的参团率总和
          t[i][k][double_groupRate] = ((parseFloat(t[0][k][ave_group_rate]) + parseFloat(t[1][k][ave_group_rate])))
        }
      }
      return t
    }

  },
  methods: {
    changeL (i) {
      this.active = i
    },
    // 四舍六入 .toFixed()
    // 取两位小数
    format (t) {
      return jsRound(t, 2)
    }
  }
}
</script>
<style lang="less" scoped>
.all {
  width: 420px;
  height: 508px;
  background: rgba(51, 51, 51, 1);
  .top {
    padding: 20px 20px 20px 16px;
    display: flex;
    width: 384px;
    height: 36px;
    div {
      font-size: 14px;
      background: rgba(40, 40, 40, 1);
      width: 76px;
      height: 36px;
      display: inline-block;
      text-align: center;
      line-height: 36px;
      color: #ccc;
      margin-left: 1px;
      cursor: pointer;
    }
    .active {
      background: #505050;
    }
  }
  .content {
    width: 400px;
    height: 194px;
    font-size: 12px;
    // background-color: #ccc;
    .team-icon {
      width: 20px;
      height: 20px;
      //   background-color: pink;
      margin-left: 100px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .play {
      width: 400px;
      height: 164px;
      margin-top: 10px;
      display: flex;
      .player {
        width: 100px;
        height: 164px;
        // background-color: pink;
        padding-top: 30px;
        box-sizing: border-box;
        // 头像用背景图
        .touxiang {
           margin: 0 auto;
          // display: block;
          // width: 60px;
          // height: 60px;
          // background: rgba(153, 153, 153, 1);
          // border-radius: 30px;
            width: 60px;
            height: 60px;
            background: rgba(153, 153, 153, 1);
            border-radius: 50%;
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center;
        }
        .player-id {
          display: block;
          text-align: center;
          line-height: 36px;
          color: #ccc;
        }
        .player-wz {
          display: block;
          text-align: center;
          color: #ccc;
        }
      }
      .match-message {
        width: 300px;
        height: 164px;
        color: #ccc;
        // background-color: yellowgreen;
        .kda {
          width: 300px;
          height: 41px;
          .jd-1 {
            width: 300px;
            height: 6px;
            background-color: #999999;
            .jd-nei {
              height: 6px;
              background-color: #23A8F6;
            }
          }
          .kill {
            width: 300px;
            margin-top: 10px;
            // color:#ccc;
          }
        }
      }
    }
  }
  .second {
    margin-top: 20px;
    .match-message {
      .jd-1 {
        background-color: #999999;
      }
      .jd-nei {
        height: 6px;
        background-color: #f6233f !important;
      }
    }
  }
}
</style>

五丶有关src图片拉伸

有时我们从后台返回的数据中拿到的图片会很大,就会有拉伸的问题,这是时候我们改为背景图就可以了

<div class="touxiang" :style="{backgroundImage:‘url(‘+(item.head_img)+‘)‘}"></div>

样式:上面完整的代码有用到

 .touxiang {
           margin: 0 auto;
            width: 60px;
            height: 60px;
            background: rgba(153, 153, 153, 1);
            border-radius: 50%;
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center;
        }

六丶vue中的移入移出,以及滚动到一定高度显示和点击置顶

滚动条滚动往下距离大于60时显示如图

技术图片

具体代码如下

<template>
  <div>
    <div class="all" v-if="btnFlag">

      <div class="jwplay" @mouseover="mouseOver" @mouseleave="mouseLeave">
        <div class="wechat" :style="active">
        <img src="../../assets/image/default.png" alt />
      </div>
        <p>嘻嘻</p>
        <p>APP</p>
      </div>
      <div class="arrowTip"  @mouseover="one"  @mouseleave="two" ref="cc">
        <i class="jiantou font_family icon-shouqi" :style="aa"></i>
        <span :style="bb" @click="toTop">你好</span>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: wechat,
  data () {
    return {
      active: display:none,
      aa: display:block,
      bb: display:none,
      btnFlag: false//v-if让它一开始不显示
    }
  },

  // window对象,所有浏览器都支持window对象。它表示浏览器窗口,监听滚动事件
  mounted () {
    window.addEventListener(scroll, this.scrollToTop)
  },
  destroyed () {
    window.removeEventListener(scroll, this.scrollToTop)
  },

  methods: {
    mouseOver () {
      this.active = display:block
    },
    mouseLeave () {
      this.active = display:none
    },
    one () {
      this.aa = display:none
      this.bb = display:block
      var dd = this.$refs.cc
      dd.style.backgroundColor = #ED5019
    },
    two () {
      this.bb = display:none
      this.aa = display:block
      var dd = this.$refs.cc
      dd.style.backgroundColor = #222222
    },
    // 点击图片回到顶部方法,加计时器是为了过渡顺滑
    toTop () {
      const that = this
      let timer = setInterval(() => {
        let ispeed = Math.floor(-that.scrollTop / 5)
        document.documentElement.scrollTop = document.body.scrollTop = that.scrollTop + ispeed
        if (that.scrollTop === 0) {
          clearInterval(timer)
        }
      }, 16)
    },
    // 为了计算距离顶部的高度,当高度大于60显示回顶部图标,小于60则隐藏,
    scrollToTop () {
      const that = this //this指向问题
      let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      that.scrollTop = scrollTop
      if (that.scrollTop > 60) {
        that.btnFlag = true
      } else {
        that.btnFlag = false
      }
    }
  }
}
</script>
<style lang="less" scoped>
.all {
  width: 180px;
  height: 320px;
  // background-color: pink;
  position: fixed;
    right: 100px;
    top: 564px;

  .jwplay {

  .wechat {
    position: absolute;
    top: -200px;
    left: 0px;
    box-sizing: border-box;
    width: 180px;
    height: 190px;
    background:rgba(26,38,59,1);
    padding: 10px 10px;
    img {
      display: block;
      width: 160px;
      height: 160px;
      // background: yellow;
    }
  }
    box-sizing: border-box;
    width: 60px;
    height: 60px;
    background: rgba(237, 80, 25, 1);
    border-radius: 6px;
    color: #fff;
    text-align: center;
    margin: 0 auto;
    margin-top: 2px;
    padding-top: 12px;
    cursor: pointer;
    p {
      position: relative;
      font-size: 12px;

    }
  }
  .arrowTip {
    width: 60px;
    height: 60px;
    background:rgba(34,34,34,1);
    border-radius: 8px;
    margin: 0 auto;
    margin-top: 8px;
    box-sizing: border-box;
    padding-top: 18px;
    cursor: pointer;

     i{
        font-size: 24px;
        display: block;
        text-align: center;
        // background-color: green;
        margin: 0 auto;
        color: #fff;
    }
    span{
        position: absolute;
        top: 88px;
        left: 74px;
        color: #fff;
    }
  }
}
</style>

 

前端常遇到的问题!!!

标签:es6   seo   sha   技术   padding   设置图   str   遍历   password   

原文地址:https://www.cnblogs.com/LiuRunMin/p/11832111.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有 京ICP备13008772号-2
迷上了代码!