一、判斷手機/PC瀏覽器語言

navigator.language // 返回語言程式碼

語言程式碼文件： http://www.lingoes.cn/zh/translator/langcode.htm

二、獲取滾動條位置

// html結構

<template lang="pug">
    div.home-box(@scroll="scorllChangeColor")
<template>　

// methods中宣告方法

  methods: {
    scorllChangeColor(event) {
      if( this.scrollTopFlag && event.target.scrollTop > 560) {
        this.scrollTopFlag = false
        this.scrollBtmFlag = true
        document.querySelector('.home-topbar').style.backgroundColor = '#1D0A60'
      }else if(this.scrollBtmFlag && event.target.scrollTop < 560) {
        this.scrollTopFlag = true
        this.scrollBtmFlag = false
        document.querySelector('.home-topbar').style.backgroundColor = 'rgba(0, 0, 0, 0.3)'
      }
    }
}

三、回到頂部

// html結構

<!-- backTop 回頂部的方法 -->
<button  class="go-top" @click="backTop">回到頂部</button>

// 週期及方法

// vue的兩個生命鉤子，這裡不多解釋。
// window物件，所有瀏覽器都支援window物件。它表示瀏覽器視窗，監聽滾動事件
mounted () {
  window.addEventListener('scroll', this.scrollToTop)
},
destroyed () {
  window.removeEventListener('scroll', this.scrollToTop)
},
 
 
methods: {
  // 點選圖片回到頂部方法，加計時器是為了過渡順滑
  backTop () {
      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
    let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
    that.scrollTop = scrollTop
    if (that.scrollTop > 60) {
      that.btnFlag = true
    } else {
      that.btnFlag = false
    }
  }
}

四、彈出層遮罩滑動穿透

1、通過vue "@touchmove.prevent"指令

 <div
      class="wechat-img"
      @click="hideWchat"
       v-if="showModal"
       @touchmove.prevent // vue中可以直接新增指令
     >
    <img
      @click="hideWchat"
       src="../assets/images/home/mp-wechat.jpg"
        alt
     />
 </div>

2、通過遮罩的顯示或隱藏設定滾動元素的overflow: hidden

// html 結構
    <div :class="show?'home hidden':'home'">
<style>
    .hidden {
         overflow: hidden;
         position: absolute;
         width: 100vw;
         height: 100vh;
</style>

五、國際化

// 安裝

npm install vue-i18n
# OR
yarn add vue-i18n

// 建立語言包檔案

// main.js

import Vue from 'vue'
import App from './App.vue'
import VueI18n from 'vue-i18n'
import router from './router'
import store from './store'
import { zh } from './common/lang/zh'
import { en } from './common/lang/en'

Vue.use(VueI18n) // 通過外掛的形式掛載

const i18n = new VueI18n({
    locale: 'zh-CN', // 語言標識
    //this.$i18n.locale // 通過切換locale的值來實現語言切換
    messages: {
        'zh-CN': zh, // 中文語言包
        'en-US': en // 英文語言包
    }
})

Vue.config.productionTip = false

new Vue({
    router,
    i18n, // 掛載
    store,
    render: h => h(App)
}).$mount('#app')

// html 中使用

<p class="header-img-intro">{{ $t('home.imgIntro1') }}</p>
<p class="header-img-intro1">{{ $t('home.imgIntro2') }}</p>

六、判斷手機、ipad、電腦

/(iphone|ipod|ipad|ipad|Android|nokia|blackberry|bada|lg|ucweb|skyfire|sony|ericsson|mot|samsung|sgh|lg|philips|panasonic|alcatel|lenovo|cldc|midp|wap|mobile)/i.test(navigator.userAgent) // true->手機/ipad

參考地址：https://www.cnblogs.com/h5c3/p/6542799.html

　　　　　https://www.jianshu.com/p/821c8a10d14f

　　　　　https://blog.csdn.net/qq_36070288/article/details/8476