vue中使用指令解決iphonex底部的適配問題

在網上也看了很多的博客，怎麼去解決iphoneX底部自適配的，最通用還是去用css的env(safe-area-inset-bottom)樣式去解決，具體的用法我就不多說了，大家可以看下csdn env ，今天在畫公司的ui圖的時候遇到下面這幾種情況：

1. 距離底部用固定定位或者絕對定位寫的
   
2. 距離底部用margin-bottom寫的
   
3. 距離底部用padding-bottom並且帶背景色寫的
   
   那麼問題來了，剛開始的時候我會想，利用scss中minxin結合css屬性env（safe-area-inset-bottom）寫成一個混合函數傳入參數解決。最終沒成功。最後想着還是用指令解決問題，爲了後面的人知道怎麼用，不用每次添加safe-area-inset-bottom屬性，這樣的操作。下面就是我實現的具體過程

1.全局自動化加載指令

1.1 在src新建directives文件夾，並且新建index.js

代碼如下，特別注意的我採用的是vw的形式去做適配，具體的計算方法爲100vw/設計稿的寬度 * 設計稿的元素像素，比如說我們ui的設計稿是375，我一個盒子的寬度是75px，那麼我得到自適應寬度爲 100vw/375 * 75
type主要是三種傳參bottom,padding,margin分別對應我上面的三種情況
src/directives/index.js

/**
 * @description fitIphoneX 主要是爲了適配iphoneX自適配的問題,可以設置padding,maring,bottom
 * @params setValue 需要設置的值  | type 設置的類型，比如說padding
 * @useage  v-fitIphoneX="{ type: 'padding', pxNum: 10 }"
 */
const fitIphoneX = {
  bind(el, binding) {
    let ua = window.navigator.userAgent
    let isIos = !!ua.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)
    let designWidth = 375 // 設計稿高度
    let iphoneXNum = (binding.value.pxNum || 30) + 34
    let setValue = (100 / designWidth) * iphoneXNum // 轉化成vw
    if (isIos) {
      if (window.screen.height === 812 && window.screen.width === 375) {
        // 在iphonex 中
        switch (binding.value.type) {
          case 'padding':
            el.style.paddingBottom = `${setValue}vw`
            break
          case 'margin':
            el.style.marginBottom = `${setValue}vw`
            break
          default:
            el.style.bottom = `${setValue}vw`
            break
        }
      }
    }
  }
}

export default {
  fitIphoneX
}

1.2 在main.js引入directives/index，用Object.keys()遍歷，然後循環，用Vue.directive指定插入指定

main.js

import directives from './directives'
Object.keys(directives).forEach(item => {
  // console.log( directives[item])
  Vue.directive(item, directives[item])
})

2.使用

其實後面如果需要iphonex的頂部適配可以使用動態指令，分是頂部還是底部

<div
      class="sticky-box"
      v-fitIphoneX="{ type: 'padding', pxNum: 10 }"
    >
</div>

這樣使用起來還比較簡單的。大家可以試一下。