首先说明一下v-shou和v-if的区别
相同点:v-if与v-show都可以动态控制dom元素显示隐藏
不同点:v-if显示隐藏是将dom元素整个添加或删除,而v-show隐藏则是为该元素添加css--display:none,dom元素还在。
需要注意的是,当一个元素默认在css中加了display:none属性,这时通过v-show修改为true是无法让元素显示的。原因是显示隐藏切换,只是会修改element style为display:""或者display:none,并不会覆盖掉或修改已存在的css属性。
问题所在
显示不全的图形
显示全的图形
解决此问题本人暂时试过四种方法
1、既简单又粗暴的方法:直接给图形所在的div设置一个固定宽度;
2、利用v-if:用v-if显示页面首次进入页面组件之间的传参未能完成;
例如:
3、通过获取父元素的宽度,将其复制给子元素,
代码例如:
<div class="echarts"> <div id="myChart" :style="{ '100%',height: '150px'}"></div> </div>
methods: { setMychart () { //jq写法 //获取父元素 var echarts = $('.echarts'); //获取父元素宽高 var echartsWidth = echarts.outerWidth(true); var echartsHeight = echarts.outerHeight(true); //获取图表元素 var myChart = $('#myChart'); //将父元素宽高赋值给图表 myChart.css('width', myChart); myChart.css('height', myChart); //原生js写法 // //获取父元素 // var echarts = document.querySelector('.echarts'); // //获取父元素宽高 // var echartsWidth = this.getStyle(echarts,'width'); // var echartsHeight = this.getStyle(echarts,'height'); // //获取图表元素 // var myChart = document.querySelector('#myChart'); // //将父元素宽高赋值给图表 // myChart.style.width = echartsWidth; // myChart.style.height = echartsHeight; }, //这是一个封装好的方法,兼容IE,第一个参数,element,第二个属性,css样式 getStyle (obj, attr) { if (obj.currentStyle) { return obj.currentStyle[attr]; } else { return document.defaultView.getComputedStyle(obj,null)[attr]; } } }
4、v-show控制组件显示,这里我们利用控制v-show的变量;首先我们把这个变量传进子组件中来监听这个变量的变化,在给一个判断如果当这个变量等于v-show所控制的当前组件的值时触发resize()这个方法;