vue框架研究

原创 sky001 教程 插件类库 611阅读 2017-06-23 15:56:49 举报

最近从头开始了一个项目,项目用到的技术是用基于zepto的vue单页面绑值,用SUI页面布局,还引用了echarts插件,此外还引到了JQ的第三方插件。总的来说,用到的东西比较多,稍不留神就载入坑。
1.echarts中仪表盘的坑
项目将echarts仪表盘、折线图、百度地图都封装成一个插件,在vue中直接引入,传入对应的参数值即可。为更好的易于扩展,在传参时将宽高带到单位,形式可以是多种,如“100%”,“2rem”,"120px".。这样相对来说灵活性更大。
但是屏幕是根据分辨率来自适应的,也就是同样的都是2rem或100%,在安卓和ios不同机型上显示的宽高不同,仪表盘展示的就在安卓上看的比较紧凑,在ios就没事。要解决此办法就是不管在什么机型上,给它设置成相应的px,不让他变,展示就相对好些。
2.dpr问题
此框架在html会有一个data-dpr=“1”的属性,会根据data-dpr这个值是1还是2还是3来计算html的font-size的大小,上述仪表盘高度问题就是根据这个进行控制判断的。
gaugeOption:{
id:"gaugeSoc",
widthE:'100%',
heightE:this.setGaugeSize()
},

//echarts仪表盘大小
setGaugeSize:function () {
let that = this;
var htmlFont=$("html").data("dpr")//$("html").getAttribute([data-dpr]);//$("html[data-dpr='1']")
if(htmlFont =="1"){
// that.gaugeOption.heightE="130px"
return "130px";
}else {
// that.gaugeOption.heightE="160px"
return "190px";
}
},

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复