Vue自定義指令—— 完美解決H5頁面不同尺寸屏幕的適配問題

H5適配一直是一個頭疼的問題，基於vue框架針對H5在不同分辨率的手機做出來一套適配方案，具體如下：

設計圖按iPhone6/7/8 去掉底部返回條的尺寸設計的：  width:750px , height:1108px（可使用該方法應對其他設計圖尺寸）

一、以設計圖的尺寸爲標註的做一套適配方案，就是出完美高度比：

function  getResheightAndWidth() {
    //設計尺寸 w:750 h:1108
    //1.計算屏幕實際尺寸width / 設計圖寬度比 750  寬度比;
    //2.通過比例算出高度應該是多少時，是完美比例
    //3.計算出實際高度與完美高度 的比例
    let adpter_scale = 1;
    let screen_width = document.body.clientWidth; //屏幕實際寬度
    let screen_height = document.body.clientHeight; //屏幕實際高度
    let w_scale = screen_width / 750; //計算屏幕實際尺寸width / 設計圖寬度比 750  寬度比;
    let compute_height = 1108 * w_scale; //通過比例算出高度應該是多少時，是完美比例
    adpter_scale =parseInt((screen_height / compute_height)*100)/100; //計算出實際高度與完美高度 的比例
    return  adpter_scale;
}

二、在app.vue中添加自定指令：

//自定義樣式指令
let adpter_scale = getResheightAndWidth();//計算出來的完美寬高比
console.log(adpter_scale)
Vue.directive('margin', { //margin 上,右,下,左
  bind: function (el, binding, vnode) {
    let value = binding.expression.split(',');
    if(+value[0])  el.style.marginTop = +value[0] * adpter_scale  + 'rem';
    if(+value[1])  el.style.marginRight = +value[1] * adpter_scale  + 'rem';
    if(+value[2])  el.style.marginBottom = +value[2] * adpter_scale  + 'rem';
    if(+value[3])  el.style.marginLeft = +value[3] * adpter_scale  + 'rem';
  }
})
Vue.directive('padding', { //padding 上,右,下,左
  bind: function (el, binding, vnode) {
    let value = binding.expression.split(',');
    if(+value[0])  el.style.paddingTop = +value[0] * adpter_scale  + 'rem';
    if(+value[1])  el.style.paddingRight = +value[1] * adpter_scale  + 'rem';
    if(+value[2])  el.style.paddingBottom = +value[2] * adpter_scale  + 'rem';
    if(+value[3])  el.style.paddingLeft = +value[3] * adpter_scale  + 'rem';
  }
})
Vue.directive('height', { //高度
  bind: function (el, binding, vnode) {
    let value = +binding.value;
    if(value)  el.style.height = value * adpter_scale  + 'rem';
  }
})
Vue.directive('width', { //寬度
  bind: function (el, binding, vnode) {
    let value = +binding.value;
    if(value)  el.style.width = value * adpter_scale  + 'rem';
  }
})
Vue.directive('line-height', { //行高
  bind: function (el, binding, vnode) {
    let value = +binding.value;
    if(value)  el.style.lineHeight = value * adpter_scale  + 'rem';
  }
})

自定義指令只列舉出了常用margin/padding/width/height/line-height，如果需要font-size等其他css適配樣式，可自行添加。

三、在組件中的使用：

在需要適配的dom元素上添加自定義指令：margin ， padding  四個參數都是 （上，右，下，左） 用逗號隔開，不適配傳0就可以了

<button  v-margin="1.4,0,0,2.2" v-padding="2,0,1,4.2" v-height="2.3" 
v-width="9.7" v-line-height="2" class="btn blue" >按鈕</button>

傳入的參數都是按標準設計尺寸傳入，通過在高度比換算之後，dom元素即可適配。

（end。。。歡迎評論交流。。有不當之處歡迎感謝指出。。）