Vue EasyUI 调整大小v-Resizable的坑

具体安装，参考

https://www.w3cschool.cn/vueeasyui/vueeasyui-p8h937nn.html

 

坑：

这样无效  v-Resizable 直接套在  LayoutPanel 标签里面

<template>
  <div>
    <Layout style="width: 700px; height: 250px">
      <LayoutPanel region="north" style="height: 50px">
        <div class="title">North Region</div>
      </LayoutPanel>
      <LayoutPanel region="south" style="height: 50px">
        <div class="title">South Region</div>
      </LayoutPanel>
      <LayoutPanel region="west" style="width: 120px">
        <div class="title">West Region</div>
      </LayoutPanel>
      <LayoutPanel region="east" style="width: 120px">
        <div class="title">East Region</div>
      </LayoutPanel>
      <LayoutPanel region="center" id="center" 
          v-Resizable="{
            resizeStart: () => resize(),
            resizing:() => resize(),
            resizeStop: () => resize()
          }">
          <div class="title">Center Region</div>
          <div class="title">Center Region</div>
      </LayoutPanel>
    </Layout>
  </div>
</template>
<script>
export default {
  methods: {
    resize () {
      console.log(111)
    }
  }
};
</script>

 

这样有效 LayoutPanel  里面在套一层 div， v-Resizable才会生效

<template>
  <div>
    <Layout style="width: 700px; height: 250px">
      <LayoutPanel region="north" style="height: 50px">
        <div class="title">North Region</div>
      </LayoutPanel>
      <LayoutPanel region="south" style="height: 50px">
        <div class="title">South Region</div>
      </LayoutPanel>
      <LayoutPanel region="west" style="width: 120px">
        <div class="title">West Region</div>
      </LayoutPanel>
      <LayoutPanel region="east" style="width: 120px">
        <div class="title">East Region</div>
      </LayoutPanel>
      <LayoutPanel region="center" id="center" >
        <div 
          v-Resizable="{
            resizeStart: () => resize(),
            resizing:() => resize(),
            resizeStop: () => resize()
          }">
          <div class="title">Center Region</div>
          <div class="title">Center Region</div>
        </div>
      </LayoutPanel>
    </Layout>
  </div>
</template>
<script>
export default {
  methods: {
    resize () {
      console.log(111)
    }
  }
};
</script>