在Vue中创建一个可拖拽并且可以放大缩小的弹框组件，你可以使用基于Vue的第三方库如vuedraggable和vue-resizable。以下是一个简单的例子：
- 安装所需库：
npm install vuedraggable vue-resizable
- 创建Vue组件：
<template>
<div>
<draggable :options="dragOptions" @start="drag=true" @end="drag=false">
<resizable :enable-native-drag="!drag" :class="{box: true, dragging: drag}" :style="style" @resizing="setSize">
<div v-if="showHeader" class="header">
<slot name="header">Header</slot>
</div>
<div class="content">
<slot>Content</slot>
</div>
</resizable>
</draggable>
</div>
</template>
<script>
import draggable from 'vuedraggable';
import { Resizable } from 'vue-resizable';
export default {
components: {
draggable,
Resizable
},
props: {
showHeader: {
type: Boolean,
default: true
},
w: {
type: Number,
default: 200
},
h: {
type: Number,
default: 200
}
},
data() {
return {
drag: false,
size: {
width: this.w,
height: this.h
}
};
},
computed: {
dragOptions() {
return {
animation: 200,
group: "name",
disabled: false,
ghostClass: "ghost"
};
},
style() {
return {
width: `${this.size.width}px`,
height: `${this.size.height}px`
};
}
},
methods: {
setSize(event) {
this.size.width = event.size.width;
this.size.height = event.size.height;
}
}
};
</script>
<style scoped>
.box {
position: absolute;
background: #eee;
border: 1px solid #ccc;
}
.header {
padding: 10px;
background: #ddd;
cursor: move;
border-bottom: 1px solid #ccc;
}
.content {
padding: 10px;
cursor: move;
}
.dragging {
cursor: move;
z-index: 100;
}
.ghost {
opacity: 0.5;
background: #ccc;
}
</style>
- 在父组件中使用这个弹框组件：
<template>
<div id="app">
<draggable-resizable-box :w="200" :h="100">
<template #header>Custom Header</template>
<p>Custom content...</p>
</draggable-resizable-box>
</div>
</template>
<script>
import DraggableResizableBox from './components/DraggableResizableBox.vue';
export default {
components: {
DraggableResizableBox
}
};
</script>
<style>
#app {
position: relative;
}
</style>
确保你已经安装了所需的库，并在你的主组件或应用