cxw-010203

src/components/v-echars/index.vue

@@ -1,13 +1,13 @@
 <!--
  * @Author: your name
  * @Date: 2021-10-08 19:12:07
- * @LastEditTime: 2021-10-28 10:42:54
+ * @LastEditTime: 2021-10-29 11:21:48
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edi
  * @FilePath: /data-show/src/components/v-echars/index.vue
 -->
 <template>
-    <div class="echars-cont" ref="myChart">
+    <div class="echars-cont" ref="myChart" v-resize="changeWin">
     </div>
 </template>
 
@@ -110,6 +110,12 @@ export default {
                 });
             });
         },
+        // 窗口变化
+        changeWin() {
+            if(this.myChart) {
+                this.myChart.resize()
+            }
+        }
     },
 };
 </script>

src/mixins/index.js

@@ -1,7 +1,7 @@
 /*
  * @Author: your name
  * @Date: 2021-10-12 13:56:13
- * @LastEditTime: 2021-10-28 19:41:06
+ * @LastEditTime: 2021-10-29 11:16:19
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: /data-show/src/mixins/index.js
@@ -12,7 +12,26 @@ export default {
     install(Vue) {
         Vue.mixin({
             directives: {
-                'loading': Loading
+                'loading': Loading,
+                resize: { // 指令的名称
+                    bind(el, binding) { // el为绑定的元素，binding为绑定给指令的对象
+                        // console.log(el, "绑定", binding);
+                        let width = '', height = '';
+                        function isReize() {
+                            const style = document.defaultView.getComputedStyle(el);
+                            if (width !== style.width || height !== style.height) {
+                                binding.value({ width: style.width, height: style.height });  // 关键(这传入的是函数,所以执行此函数)
+                            }
+                            width = style.width;
+                            height = style.height;
+                        }
+                        el.__vueSetInterval__ = setInterval(isReize, 300);
+                    },
+                    unbind(el) {
+                        // console.log(el, "解绑");
+                        clearInterval(el.__vueSetInterval__);
+                    }
+                }
             },
             computed: {
                 ...mapGetters(['getZoom', 'getToken', 'getUser', 'getAccount', 'getCommTime', 'getCtime', 'getCtime2', 'getHeaderType', 'getBrand', 'getModel'])