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*SliderSize | ResizableItem滑条的大小，Number类型，默认值：5,* 可选值：Top、Right、Bottom、Left |
  | sliderBar | ResizableItem要显示的滑条列表，String、Array类型，默认值：right,可选值：["none", "all", "top", "right", "bottom", "left"] |