• v-show,v-if切换组件echarts显示不全的问题


    首先说明一下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()这个方法;

           

  • 相关阅读:
    设备接入项目杂记
    用lucene替代mysql读库的尝试
    node(ActiveMq)
    mysql集群(双主)
    mysql集群(主从)
    DoraCMS 源码知识点备注
    Flex使用Scroller组件实现以鼠标为中心的缩放
    JQuery Mobile Popup窗口定位
    Flex Builder 不能Profile的另一个原因:不能使用中文用户名
    STM32407入门笔记
  • 原文地址:https://www.cnblogs.com/wasbg/p/11739719.html
Copyright © 2020-2023  润新知