@king0725/resize
v1.0.2
Published
支持多列拖拉指令。
Downloads
6
Readme
Resize
支持多列拖拉指令。
环境:vue3+ts
使用
安装npm i @king0725/resize
在main.ts
中引入:
import vResize from '@king0725/resize'
...
app.use(vResize)
...
参数:
- min为最小宽度/高度
- hoverColor悬浮颜色
- lineColor线的颜色,用于复选后恢复线的初始颜色
- showHoverColor是否鼠标光标悬浮就展示颜色,默认拖拽过程中才改变颜色
- direction 拖拽的方向,horizontal/vertical,默认值horizontal水平
示例:
示例1:水平方向(默认)
代码如下:
<template>
<div class="resize-box">
<div class="resize-left"></div>
<div class="resize-line"
v-resize="{ min: 20, hoverColor: '#88f', lineColor: '#ccc', showHoverColor: false, direction: 'horizontal' }">
</div>
<div class="resize-middle"></div>
<div class="resize-line" v-resize>
</div>
<div class="resize-right"></div>
</div>
</template>
<script setup lang="ts">
</script>
<style scoped>
.resize-box {
display: flex;
height: 300px;
width: 100%;
}
.resize-left {
background-color: skyblue;
width: calc(40% - 5px);
}
.resize-line {
width: 5px;
background-color: #ccc;
cursor: col-resize;
}
.resize-middle {
background-color: pink;
width: calc(30% - 5px);
}
.resize-right {
background-color: cadetblue;
width: 30%;
}
</style>
示例2:垂直方向:
代码如下:
<template>
<div class="resize-box-vertical">
<div class="resize-left-vertical"></div>
<div class="resize-line-vertical"
v-resize="{ min: 20, hoverColor: '#88f', lineColor: '#ccc', showHoverColor: false, direction: 'vertical' }">
</div>
<div class="resize-middle-vertical"></div>
<div class="resize-line-vertical" v-resize="{ direction: 'vertical' }">
</div>
<div class="resize-right-vertical"></div>
</div>
</template>
<script setup lang="ts">
</script>
<style scoped>
.resize-box-vertical {
height: 500px;
}
.resize-left-vertical {
background-color: skyblue;
height: calc(40% - 5px);
}
.resize-middle-vertical {
background-color: pink;
height: calc(30% - 5px);
}
.resize-line-vertical {
height: 5px;
background-color: #ccc;
cursor: row-resize;
}
.resize-right-vertical {
background-color: cadetblue;
height: 30%;
}
</style>