0.0.3 • Published 2 years ago
@clownjs/resize v0.0.3
Resize
拖拽更改元素尺寸插件
特性
- 为box加入更改大小功能
- 目前仅支持position:absolute的布局或者简单Flex布局
- 可配置resize立即生效或者延迟生效
- 封装了vue指令的形式
原生使用
import CustomResize from '@clownjs/resize'
const resize = new CustomResize({
el: '#resize', // Selector or Dom
options: {
// Your Options
// 参考下方说明
}
})
resize.init()
document.addEventListener('resize', (e) => {
// 盒子更改后的处理逻辑,需自行处理,参数参考下方说明
const { direction, moveOffset, moveOffsetPercent } = e
})- UMD CDN: https://unpkg.com/@clownjs/resize/dist/index.umd.js
- UMD Name:
HowdyResize
Options (Objcet)
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| direction | resize方向数组 | Array | left/right/top/bottom | right |
| immediate | resize是否立即执行，默认为false，false时会在点击时生成一条虚线，改完大小后松开鼠标，盒子大小才会变化；若为true则盒子大小会立即改变 | Boolean | - | false |
| lineColor | 生成边框线的颜色，边框线会生成在元素盒子需要resize方向的边框上 | String | - | #aab |
| lineWidth | 生成边框线的宽度 | Number | - | 2 |
| lineHoverColor | 生成边框线hover时的颜色 | String | - | #88f |
| lineHoverWidth | 生成边框线hover时的宽度 | Number | - | 4 |
| tipLineColor | 生成提示线的颜色,immediate为true时无效 | String | - | #262626 |
| tipLineWidth | 生成提示线的宽度,immediate为true时无效 | Number | - | 1 |
| tipLineStyle | 生成提示线的线条样式,immediate为true时无效 | String | - | dashed |
| zIndex | 生成的线条的zIndex | Number | - | 999 |
Width属性的单位为px
Event
- 初始化后，会自动加入一个resize的自定义事件监听。该插件并不会直接更改盒子的宽度高度，使用时需要在resize事件的回调中自行处理更改盒子宽高的逻辑。
回调函数中提供以下参数
| 参数 | 说明 | 类型 |
|---|---|---|
| direction | 本次操作的方向 | String |
| moveOffset | resize改变的偏移量，单位为px | Number |
| moveOffsetPercent | resize改变的偏移量百分比，单位为% | Number |
| resizeWidth/resizeHeight | 更改的宽或高 | Number |
| resizeWidthPercent/resizeHeightPercent | 更改的宽或高的百分比 | Number |
以Vue指令方式使用
import { ResizeDirective } from '@clownjs/resize'
// Vue3全局引入
app.use(ReizeDirective, someGlobalOptions)
// Vue2全局引入(对vue2做了兼容)
Vue.use(ReizeDirective, someGlobalOptions)
// 组件内引入
export default {
directive: {
resize: ResizeDirective
}
}指令Arg
- top、left、bottom、right(默认),可以进行resize的方向
- all，全部方向可resize
v-resize:left | v-resize:top | v-resize:all ...
指令Value (Objcet)
参数同上方的配置Options
指令Event
- 使用指令后，会自动加入一个resize的自定义事件监听。本指令并不会直接更改盒子的宽度高度，使用时需要在resize事件的回调中自行处理更改盒子宽高的逻辑,可直接使用“@resize="someMethod"”操作回调函数。回调参数同上方
Event