1.0.5 • Published 2 years ago
vue-magic-box v1.0.5
功能简介
一个可拖拽、可形变、可编辑内容的神奇盒子
在vue3项目中引入
- 安装
npm install vue-magic-box- 全局引入
import { createApp } from 'vue'
import App from './App.vue'
import MagicBox from 'vue-magic-box'
const app = createApp(App)
app.use(MagicBox)
app.mount('#app')- 使用
<template>
<MagicBox :editable="false">
11111111111111111111111111111111
</MagicBox>
<MagicBox :resizable="false">
11111111111111111111111111111111
</MagicBox>
<MagicBox :draggable="false">
11111111111111111111111111111111
</MagicBox>
</template>参数说明
| 参数名 | 说明 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| editable | 盒子是否可编辑内容 | boolean | true | >=1.0.3 |
| resizable | 盒子是否可调整大小 | boolean | true | >=1.0.3 |
| draggable | 盒子是否可拖拽移动位置 | boolean | true | >=1.0.3 |
| style | 盒子样式 | object | {} | >=1.0.5 |
| rightBottomOnly | resizable为true时生效 只能通过右/下边界和右下角调整大小 | boolean | true | >=1.0.5 |
| onFocus | editable为true时生效 获得焦点时的回调函数 | function | () => {} | >=1.0.5 |
| onBlur | editable为true时生效 失去焦点时的回调函数 | function | () => {} | >=1.0.5 |
版本历史
1.0.0 - 1.0.4 测试发布/初始版本
1.0.5 1. 从基于绝对定位的实现方式改为基于css的transform属性的实现方式 2. 暴露出了v-draggable/v-resizable/v-editable指令