Vue中如何轻松实现可调整大小的容器布局——vue-resizeable组件教程

介绍

vue-resizeable是一款在vue项目中可调整各个区域大小的组件,支持任意组合,支持自定义样式

演示

体验地址

https://liquanquan.top/vue-admin/resizable

npm地址

https://www.npmjs.com/package/vue-resizeable

github

https://github.com/taoman/vue-resizeable

欢迎各位大佬提Issues指正

安装及使用

安装

npm i vue-resizeable

使用

全局注册

import { createApp } from 'vue'
import VueResizeable from 'vue-resizeable'
import 'vue-resizeable/style.css'

createApp(App).use(VueResizeable).mount('#app')

按需引入

ResizeableContainer:主区域,用来控制主轴方向

ResizeablePanel:每个可放大缩小的区域

ResizeableSplitter:可拖动分隔条,存在于ResizeablePanel之间,拖动控制面板大小

模板使用



你可能感兴趣的:(Vue中如何轻松实现可调整大小的容器布局——vue-resizeable组件教程)