具体安装，参考
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>
原文：https://www.cnblogs.com/-roc/p/14646843.html