# vue-draggable-resizable-os

**Repository Path**: flying_fat_cattle/vue-draggable-resizable-os

## Basic Information

- **Project Name**: vue-draggable-resizable-os
- **Description**: 基于vue-draggable-resizable 封装模拟云桌面窗口组件
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 0
- **Created**: 2021-07-29
- **Last Updated**: 2023-04-07

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# vue-draggable-resizable-os

# description
基于vue-draggable-resizable-gorkys 封装模拟云桌面可拖动窗口组件


![avatar](./examples/assets/example.jpg)

### v2 新增vue-draggable-area组件
### 支持拖拽区域定义
### 支持拖拽组件百分比缩放
### 支持拖拽组件嵌套
### 支持拖拽组件自由拖拽 以及 组件拖拽交换模式
### 提供组件内部事件传递 参数传递

## 功能预览

[演示地址](http://flying_fat_cattle.gitee.io/vue-draggable-resizable-os/index.html)


![avatar](./examples/assets/area.jpg)

## Project setup
```
npm install -S vue-draggable-resizable-os
```

### Import and Use
```
import VueDraggableResizableOs from 'vue-draggable-resizable-os'
import 'vue-draggable-resizable-os/lib/vue-draggable-resizable-os.css'
Vue.use(VueDraggableResizableOs)

//如果组件中用到 vue-draggable-area
//那么data中的component 必须全局引入 才能正确使用

import HelloWorld from "./components/HelloWorld";
Vue.component('HelloWorld',HelloWorld)

data: [
    {
        id: '1',
        component: 'HelloWorld',
        ...
    }
]
```

### @组件1 Make+  vue-draggable-resizable-os
```
<vue-draggable-resizable-os>
  ...组件
</vue-draggable-resizable-os>
```

### props
```
相对父级盒子
x: 初始化横坐标                           - Number
y: 初始化纵坐标                           - Number
width: 窗口宽度                          - Number
height: 窗口高度                         - Number
minWidth: 最小宽度                       - Number
minHeight: 最小高度                      - Number
parent: 是否限制在父级内                  - Boolean
title: 窗口名称                          - String
grid: 限制移动在网格间隙内                 - Array<number>
canDrag: 是否能拖拽                      - Boolean
canResize: 是否能调整大小                 - Boolean
fullscreen: 是否是全屏                   - Boolean
headerBg: 头部背景色                     - String
showHeader: 是否显示窗口头部              - Boolean
headerColor: 头部字体色                  - String
```

### events
```
dragstart               拖拽开始
dragstop                拖拽结束
resizestart             重置大小开始
resizestop              重置大小结束
fullscreen              全屏后
resizescreen            恢复全屏之前后
close                   关闭窗口后
outClick                点击窗口外
inClick                 点击窗口内
```

### 组件内的方法
```
toggleEditing(type)   切换可拖拽重置大小  type: Boolean
getValue              获取组件的属性
```

### @组件2 Make+  vue-draggable-area
```
<!-- 确保包裹div要有width height -->
<div style='width: 100%;height:800px;'>
    <vue-draggable-area></vue-draggable-area>
</div>
```

### props

#### data
Type: `Array<object>`<br>
Required: `true`<br>
Default: `[]`

拖拽区域内部的组件列表 <br>

内部对象：{ <br>
    id: '1',                     `列表id唯一；必须` <br>
    component: 'HelloWorld',     `内部组件名；必须` <br>
    title: 'HelloWorld',         `头部名称；必须`
    width: 0.2,                  `width，相对于拖拽区域的宽比；必须`<br>
    height: 0.5,                 `height，相对于拖拽区域的高比；必须`<br>
    x: 0.7,                      `x,组件横坐标：拖拽区域宽；必须`<br>
    y: 0.2,                      `y,组件纵坐标：拖拽区域高；必须`<br>
    headerBg: '#20a0ff',         `头部背景色`<br>
    headerColor: '#ffffff',      `头部字体色`<br>
    parent: true,                `是否限制在父组件内`<br>
    exchangeBorder: '2px dashed red',   `组件交换模式时，内部边框的样式`<br>
    zIndex: 10,                   `组件的层级`<br>
    params: {}                   `初始化传递的参数`<br>
} <br>

注： params是一个对象，用于初始化传递参数 <br>
    组件内通过props -> params 获取  (this.params)
},
```vue
  props:{
    params:{
    type: Object,
    default: ()=>{}
  }
```

```html
<vue-draggable-area :data="[{...}]">
```

#### grid-bg
Type: `Array<string>`<br>
Required: `false`<br>
Default: `["rgba(255,255,255,0.2)",30,"rgba(36,41,46,1)"]`<br>

定义拖拽网格样式 <br>

参数1：  网格线条色  <br>
参数2：  线条宽高间隙  <br>
参数3：  背景色  <br>

如果不想要背景传一个空数组[]就行


```html
<vue-draggable-area :gridBg='["rgba(255,255,255,0.2)",30,"rgba(36,41,46,1)"]'>
```

#### model 
Type: `Boolean`<br>
Required: `false`<br>
Default: `false` <br>

定义拖拽的模式：`false`自由模式 ,`true` 交换模式 <br>

```html
<vue-draggable-area :model='false'>
```

#### can-edit
Type: `Boolean`<br>
Required: `false`<br>
Default: `true` <br>

定义是否可编辑：`false`不能编辑 ,`true` 能编辑 <br>

```html
<vue-draggable-area :canEdit='true'>
```

#### help-line
Type: `Boolean`<br>
Required: `false`<br>
Default: `true` <br>

定义是否显示辅助线：`false`不显示 ,`true`显示 <br>

`注意：` 交换模式下设置为true 也不会显示辅助线

```html
<vue-draggable-area :help-line='true'>
```

#### help-line-style
Type: `Array`<br>
Required: `false`<br>
Default: `['1px','rgb(255, 0, 204)']` <br>

定义辅助线样式：`下标0`表示辅助线的粗细 ,`下标1`表示辅助线的颜色 <br>

```html
<vue-draggable-area :help-line='true' :helpLineStyle="['1px','red']">
```



### events
```
dragstop                拖拽结束
resizestop              重置大小结束
fullscreen              全屏后
resizescreen            恢复全屏之前后
close                   关闭窗口后
modelChange             拖拽模式改变后
```

#### dragstop

Required: `false`<br>
Parameters:
* `id` 拖拽元素id
* `data` 拖拽结束后对象数据结果
* `type` 如果是普通模式->返回null,
        交换模式：
            失败返回{
                targetId: null  
                type: "error"
            }
            成功返回{
                targetId: 'id'   
                type: "success"
            }

每当组件拖动结束时调用。

```html
<vue-draggable-area @dragstop="onDragstop">
```

#### resizestop

Required: `false`<br>
Parameters:
* `id` 改变大小元素id
* `data` 改变大小结束后对象数据结果

每当组件停止调整大小时调用。

```html
<vue-draggable-area @resizestop="onResizestop">
```

#### close

Required: `false`<br>
Parameters:
* `id` 删掉的元素id
* `data` 删掉结束后对象数据结果

每当组件停止调整大小时调用。

```html
<vue-draggable-area @close="onClose">
```

#### fullscreen

Required: `false`<br>
Parameters:
* `id` 全屏元素id

每当组件全屏后调用。

```html
<vue-draggable-area @fullscreen="onFullscreen">
```

#### resizescreen

Required: `false`<br>
Parameters:
* `id` 从全屏恢复原大小元素id

每当组件从全屏恢复后调用。

```html
<vue-draggable-area @resizescreen="onResizescreen">
```

#### modelChange

Required: `false`<br>
Parameters:
* `type` 拖拽自由模式 和 交换模式 改变的状态

每当组件拖拽模式改变后调用。

```html
<vue-draggable-area @modelChange="onModelChange">
```


### 组件内的方法
```
getValue              获取组件的属性
getItemEl:            获取子组件或者component组件对象
    (param1: item对象) {id:'1',component:'HelloWorld',...}
    (param2: ('parent') == 拖拽item组件
             ('child')  == component组件
    )
```
```html
<vue-draggable-area ref="area">

this.refs.area.getValue() 
this.refs.area.getItemEl({id:'1',component:'HelloWorld',...},'parent')
```


### 子组件之间传值通道
```
methods:{
    /***
     * 监听的事件处理
     * @from (事件触发的组件对象)
     * @eName (触发事件的名字)
     * @eParams (触发事件传递的参数)
     * ***/
    emitEvent(from,eName,eParams){
      if(eName==='getResult'){
        //监听事件要做的事
        this.show = true;
        this.fromName = from.component;
      }
    },
    /***
     * 触发事件
     * @eName (触发事件的名字)
     * @eParams (触发事件传递的参数)
     * ***/
    emitToEvent(eName,eParams){
      this.$emit('emitEvents',eName,eParams); //触发事件，并且传递参数
    }
  }
```