初始化项目

src/views/pages/drag/index.vue

@@ -0,0 +1,66 @@
+<template>
+	<div class="drag-container">
+		<el-card shadow="hover" header="拖动指令效果（v-drag）作用于 Dialog 对话框">
+			<el-button type="primary" @click="dialogVisible = true" size="default">
+				<el-icon>
+					<ele-Pointer />
+				</el-icon>
+				点击打开 Dialog
+			</el-button>
+		</el-card>
+
+		<el-card shadow="hover" header="自定义div" class="mt15">
+			<div class="drag-dom">
+				<div class="drag-header">
+					<el-button type="success" size="default" v-drag="['.drag-container .drag-dom', '.drag-container .drag-header']">
+						<el-icon>
+							<ele-Pointer />
+						</el-icon>
+						按住进行拖动测试
+					</el-button>
+				</div>
+			</div>
+		</el-card>
+
+		<el-dialog v-model="dialogVisible" width="769px">
+			<template #header>
+				<div v-drag="['.drag-container .el-dialog', '.drag-container .el-dialog__header']">拖动指令效果（v-drag）</div>
+			</template>
+			<p>鼠标放标题头进行 Dialog 对话框拖动</p>
+			<template #footer>
+				<span class="dialog-footer">
+					<el-button @click="dialogVisible = false" size="default">取 消</el-button>
+					<el-button type="primary" @click="dialogVisible = false" size="default">确 定</el-button>
+				</span>
+			</template>
+		</el-dialog>
+	</div>
+</template>
+
+<script lang="ts">
+import { toRefs, reactive, defineComponent } from 'vue';
+
+export default defineComponent({
+	name: 'pagesDrag',
+	setup() {
+		const state = reactive({
+			dialogVisible: false,
+		});
+		return {
+			...toRefs(state),
+		};
+	},
+});
+</script>
+
+<style scoped lang="scss">
+.drag-container {
+	.drag-dom {
+		position: relative;
+		display: inline-block;
+		.drag-header {
+			display: inline-block;
+		}
+	}
+}
+</style>