vue中使用指令解决iphonex底部的适配问题

1.全局自动化加载指令
- 1.1 在src新建directives文件夹，并且新建index.js
- 1.2 在main.js引入directives/index，用Object.keys()遍历，然后循环，用Vue.directive指定插入指定
2.使用

在网上也看了很多的博客，怎么去解决iphoneX底部自适配的，最通用还是去用css的env(safe-area-inset-bottom)样式去解决，具体的用法我就不多说了，大家可以看下csdn env ，今天在画公司的ui图的时候遇到下面这几种情况：

距离底部用固定定位或者绝对定位写的
距离底部用margin-bottom写的
距离底部用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.userAgentlet isIos = !!ua.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)let designWidth = 375 // 设计稿高度let iphoneXNum = (binding.value.pxNum || 30) + 34let setValue = (100 / designWidth) * iphoneXNum // 转化成vwif (isIos) {if (window.screen.height === 812 && window.screen.width === 375) {// 在iphonex 中switch (binding.value.type) {case 'padding':el.style.paddingBottom = `${setValue}vw`breakcase 'margin':el.style.marginBottom = `${setValue}vw`breakdefault: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的顶部适配可以使用动态指令，分是顶部还是底部

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

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

vue中使用指令解决iphonex底部的适配问题相关推荐

【1】vue中的指令与插值表达式
为什么要用指令和插值表达式前面我们已经说到过,在Vue中不直接对DOM进行操作,而是通过数据的改变来改变页面的显示状态.但是如果在HTML中直接像这样设置页面内容,那么改变数据时将无法用到Vue提供 ...
vue中v-model指令的使用之Vue知识点归纳(九)
本文中描述 vue 中 v-model 指令的基本使用 1 简述 vue 中 v-model 用来获取和设置表单中的值 2 案例 <!DOCTYPE html> <html lan ...
vue中v-bind指令的使用之Vue知识点归纳(七)
本文中描述 vue 中 v-bind 指令的基本使用 1 简述 vue 中 v-bind 用来操作 html 元素标签中的属性 2 案例 <!DOCTYPE html> <html ...
vue中v-if指令的使用之Vue知识点归纳(六)
本文章描述 vue 中 v-if 的基本使用 vue 中 v-show 与 v-if 的区别 1 简述 vue 中 v-if 指令,顾名思义是用来进行条件判断的,直接操作 dom 2 案例 <! ...
vue中v-on指令的使用之Vue知识点归纳(四)
本文章中描述 v-on 指令的基本使用点击按钮动态修改数据 1 简述 vue 中 v-on 指令简单点来讲,是用来给元素设置绑定事件. 格式 v-on:事件名称="方法名称" 这 ...
java get请求数组,浅谈vue中get请求解决传输数据是数组格式的问题
qs的stringify接收2个参数,第一个参数是需要序列化的对象,第二个参数是转化格式,一般默认格式是给出明确的索引,如:arr[0]=1&arr[1]=2 //indices是index的 ...
js中for(const i in/of arr/obj)和vue中v-for指令的区别
在js中 var obj = {q:'qqq',w:'www',e:'eee'}var arr1 = [{r:'rrr'},{t:'ttt'},{y:'yyy'}]var arr2 = ['uuu', ...
教女朋友学习 vue中的指令及其自定义指令
写在前面: 我是「扬帆向海」,这个昵称来源于我的名字以及女朋友的名字.我热爱技术.热爱开源.热爱编程.技术是开源的.知识是共享的. 这博客是对自己学习的一点点总结及记录,如果您对 Java.算法感兴 ...
vue中自定义指令、组件化、生命周期、节流和防抖、获取DOM、mint-ui简介、过渡和动画
自定义指令: vue中通过directive方法自定义指令,如:自定义一个v-focus指令: <script>Vue.directive('focus', {//通过directive( ...

vue中使用指令解决iphonex底部的适配问题

vue中使用指令解决iphonex底部的适配问题

1.全局自动化加载指令

1.1 在src新建directives文件夹，并且新建index.js

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

2.使用

vue中使用指令解决iphonex底部的适配问题相关推荐

最新文章

热门文章