# vue3-dragable-bar

**Repository Path**: linuxmail/vue3-dragable-bar

## Basic Information

- **Project Name**: vue3-dragable-bar
- **Description**: vue3 可拖拽条, 可用于 resize
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 0
- **Created**: 2025-02-20
- **Last Updated**: 2025-03-11

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# vue3-dragable-bar

## 说明

网址: https://gitee.com/linuxmail/vue3-dragable-bar

在一个容器里, 拖动一个小div, 然后根据拖动后的位置, 做到resize的效果


最好见例子:

https://gitee.com/linuxmail/vue3-dragable-bar/blob/master/demo/app.vue

## 演示

http://linuxmail.cn/web/dragable-bar-demo.html

## 用法

```
import vue3DragableBar from "vue3-dragable-bar";

```

## props
```
const props = defineProps({
  mode: {
    type: String, // vertical 或 horizontal
    default: ''
  },
  top: {
    type: Number, // position:top
    default: 0
  },
  left: { // position:left
    type: Number,
    default: 0
  },
  width: { // 宽度
    type: Number,
    default: 0
  },
  height: { // 高度
    type: Number,
    default: 0
  },
});
```


## emits
```

// resize(offset), 拖动这个bar时的emit, offset 是 top/left
// resizeOver(offset), 拖动结束后的emit
const emit = defineEmits < {
  (e: 'resize', offset: number): void
  (e: 'resizeOver', offset: number): void
}> ()
```