0.2.4 • Published 2 years ago
resizable-view v0.2.4
ResizableView
功能说明
借助组件可以实现拖动滑动条改变布局大小,目前实现了横向、纵向效果,支持嵌套使用。
演示效果:
安装与使用
安装
npm install resizable-view
引入项目
import {createApp} from 'vue'
import App from './App.vue'
// 引入组件和样式表
import ResizableView from 'resizable-view'
import 'resizable-view/dist/resizable-view.css'
const app = createApp(App)
// 注册到Vue
app.use(ResizableView)
app.mount('#app')
水平布局
<template>
<div id="app">
<resizable-view>
<resizable-item style="background-color:bisque;" base-width="30%"></resizable-item>
<resizable-item style="background-color:blanchedalmond;" base-width="70%"></resizable-item>
</resizable-view>
</div>
</template>
<script>
export default {
name: "App"
};
</script>
<style>
body {
margin: 0;
padding: 0;
}
#app {
width: 100%;
height: 100vh;
}
</style>
示例效果:
垂直布局
这里用到了ResizableView
组件的mode
属性来控制布局方向
<template>
<div id="app">
<resizable-view mode="vertical">
<resizable-item style="background-color:bisque;" base-height="30%"></resizable-item>
<resizable-item style="background-color:blanchedalmond;" base-height="70%"></resizable-item>
</resizable-view>
</div>
</template>
示例效果:
嵌套使用
<template>
<div id="app">
<resizable-view>
<resizable-item style="background-color:bisque;" base-width="30%"></resizable-item>
<resizable-item style="background-color:blanchedalmond;" base-width="70%">
<resizable-view mode="vertical">
<resizable-item style="background-color:burlywood;" base-height="50%">
<resizable-view>
<resizable-item style="background-color:blueviolet;" :min-width="200"></resizable-item>
<resizable-item style="background-color:cornflowerblue" sliderBar="right"></resizable-item>
</resizable-view>
</resizable-item>
<resizable-item style="background-color:chocolate;" base-height="30%"></resizable-item>
<resizable-item style="background-color:coral;" base-height="20%"></resizable-item>
</resizable-view>
</resizable-item>
</resizable-view>
</div>
</template>
示例效果:
属性说明
ResizableView 组件
属性
名称 描述 mode 控制 ResizableView
组件包含的ResizableItem
分布方向,String
类型,默认值:horizontal
,可选值:horizontal
、vertical
事件
名称 | 描述 |
---|---|
itemresize | 当选中的ResizableItem 改变大小时触发,事件可接收以下参数 clientWidth 、clientHeight 、target , 其中target 是当前ResizableItem 对象,clientWidth 、clientHeight 则是target 对象的宽、高 |
ResizableItem 组件
属性 描述 minWidth ResizableItem
的最小宽度,Number
类型,默认值:0
minHeight ResizableItem
的最小高度,Number
类型,默认值:0
base *
SliderSizeResizableItem
滑条的大小,Number
类型,默认值:5
,*
可选值:Top
、Right
、Bottom
、Left
sliderBar ResizableItem
要显示的滑条列表,String、Array
类型,默认值:right
,可选值:["none", "all", "top", "right", "bottom", "left"]