最近在做一个弹窗,大概思路是这样的,当弹窗想展示是图片时,放图片的div为透明(前提是上传的这张图是png格式的),当弹窗为公告显示文字时,内容底部将有背景图。没想象中的顺利,安卓和ios兼容问题搞的差点崩溃...
安卓写法
background: rgba(0, 0, 0, 0);
ios写法
background: transparent;
html
:class="{'opacity': $store.state.opacity}"
round
:close-on-click-overlay="false"
:style="{'background':isShow==0? aa:'#fff url('+require('../assets/img/home/gonggao_bg.png')+') left top no-repeat'}"
v-model="popup"
>
data
data() {
return {
//isShow为0时为图片弹窗
isShow: '',
//安卓为1
mobile:'',
ios:'transparent !important',
android:'rgba(0,0,0,0) !important',
aa:'',
bb:''
};
},
让页面渲染时候调用方法
mounted() {
this.$nextTick(() => {
//是否获取图片
this.getPhoto();
this.useMobile();
});
},
根据手机不同对样式设不同的值
methods: {
useMobile() {
let isiOS = !!ua.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
// alert("isiOS"+isiOS)
this.mobile=2;
//Ios
} else if (/(Android)/i.test(navigator.userAgent)) {
// alert("isAndroid"+isAndroid)
//Android终端
this.mobile=1;
}
},
getPhoto: function() {
let popType = this.$store.state.popType;
if (popType == "pic") {
this.isShow = 0;
if(this.mobile==1){
this.aa=this.android
}else{
this.aa=this.ios
}
}else{
this.isShow = 1;
}
}
},
}