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。。。欢迎评论交流。。有不当之处欢迎感谢指出。。）

Vue自定义指令—— 完美解决H5页面不同尺寸屏幕的适配问题相关推荐

html兼容不同屏幕代码,rem的正确使用姿势 -- 完美解决H5页面不同尺寸屏幕的适配问题...
实例代码: 废土坱行 * { margin: 0; padding: 0; } .downloadBtn { width: 12rem; height: 3.6rem; background: red ...
rem的正确使用姿势 -- 完美解决H5页面不同尺寸屏幕的适配问题
实例代码: <!DOCTYPE html> <html> <head><meta charset="utf-8" /><met ...
Vue自定义指令—解决H5页面不同尺寸屏幕的适配问题
基于vue框架针对H5在不同分辨率的手机做出来一套适配方案,具体如下: 设计图按iPhone6/7/8 去掉底部返回条的尺寸设计的: width:750px , height:1108px(可使用该方 ...
移动端h5页面不同尺寸屏幕适配方法
移动互联网时代,多端适配对于前端工作者来说带来了很多麻烦,有麻烦相应的就有解决方案,面对适配方法有很多,百分比布局.弹性布局,,还有rem布局今天主要针对rem布局讲解一下: 本方法是阿里手淘的页面 ...
html网页在不同尺寸屏幕大小,移动端h5页面不同尺寸屏幕适配方法
移动互联网时代,多端适配对于前端工作者来说带来了很多麻烦,有麻烦相应的就有解决方案,面对适配方法有很多,百分比布局.弹性布局,,还有rem布局今天主要针对rem布局讲解一下: 本方法是阿里手淘的页面 ...
移动端h5页面不同尺寸屏幕适配兼容方法
最近刚开始做移动端页面,遇到了不少bug,说一下解决移动端不同屏幕页面的适应问题. 1. viewport属性及html页面结构 <meta name="viewport" ...
Vue 自定义指令解决IOS webview input 获取焦点被键盘遮挡
Vue 自定义指令解决IOS webview input 获取焦点被键盘遮挡创建自定义指令在使用input的地方添加自定义指令,记录一下还有优化空间. vue 文件 <div id=&qu ...
vuejs 指令封装 button 加载效果_这些Vue自定义指令，让你的项目开发爽到爆
受 AngularJS 的启发,Vue 内置了一些非常有用的指令(比如v-html 和 v-once等),每个指令都有自身的用途.完整的指令列表可以在这里查看. 这还没完,更棒的是可以开发自定义指令. ...
clientsideevents能定义几个click事件_分享8个非常实用的Vue自定义指令
作者:lzg9527 https://juejin.cn/post/6906028995133833230 在 Vue,除了核心功能默认内置的指令 ( v-model 和 v-show ),Vue 也 ...

Vue自定义指令—— 完美解决H5页面不同尺寸屏幕的适配问题

Vue自定义指令—— 完美解决H5页面不同尺寸屏幕的适配问题相关推荐

最新文章

热门文章