vue + element + avue 学习

1、隐藏滚动条

// 谷歌的原生滚动条会占据一定的位置, 火狐的不会,是浮在元素上面
::-webkit-scrollbar {
  width: 0 !important;
}
// 去掉横向滚动条
.el-scrollbar__wrap { 
   overflow-x: hidden;
}

谷歌

火狐

2、通过路由的 scrollBehavior 记录当前页面滚动位置，并在跳转回来的时候自动滚动到上一次的位置

scrollBehavior(to, from, savedPosition) {
 if (savedPosition) {
    return savedPosition
  } else {
    if (from.meta.keepAlive) {
      from.meta.savedPosition = document.documentElement.scrollTop
    }
    return {
      x: 0,
      y: to.meta.savedPosition || 0
    }
  }
},

注意： 要获取当前页面的滚动条纵坐标位置，用：document.documentElement.scrollTop；而不是：document.body.scrollTop；documentElement 对应的是 html 标签，而 body 对应的是 body 标签

3、接口拦截中使用element的MessageBox弹框，由于多个接口同时请求，导致点击关闭弹框后，再次出现MessgaeBox弹框，导致接口调用了多少次，就需要点击多少次关闭的问题解决方案

// 错误方式 
MessageBox.close()
MessageBox.alert(message, '提示', {
  confirmButtonText: '确定'
})

// 正确方式
MessageBox.alert(message, '提示', {
  confirmButtonText: '确定',
  callback: action => {
    // 点击确定按钮后的回调函数
    MessageBox.close()
  }
})

4、怎么让audio只播放3次

<audio ref="timesAudioPlayer"
       :src="timesAudioFile"></audio>

data () {
  return {
    playNum: 0
  }
},
mounted () {
  this.$refs.timesAudioPlayer.addEventListener('ended', this.limitPlay)
},
methods: {
  limitPlay () {
    this.playNum++;
    if (this.playNum < 3) {
      this.$refs.timesAudioPlayer.play()
    } else {
      this.$refs.timesAudioPlayer.pause()
    }
  },
  playTimesAudio () {
    this.playNum = 0
    this.$refs.timesAudioPlayer.play()
  },
},