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>

这样使用起来还比较简单的。大家可以试一下。