Vue3实现弹窗拖拽（亲测有效）

最新推荐文章于 2024-04-26 17:54:13 发布

安康全是山

最新推荐文章于 2024-04-26 17:54:13 发布

阅读量2.3k

点赞数 1

分类专栏： vue3 文章标签： vue.js elementui javascript

原文链接：https://blog.csdn.net/qq_44810785/article/details/124454010?spm=1001.2101.3001.6650.14&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7Edefault-14-124454010-blog-121505951.pc_relevant_downloadblacklistv1&depth_1-utm_so

版权

vue3 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

取消遮罩层：:modal="false"

点击弹窗外其它地方，不关闭弹窗：:close-on-click-modal="false"

<template>
  <el-button type="text" @click="dialogVisible = true">点击出现弹窗</el-button>
 
  <el-dialog v-model="dialogVisible" title="拖拽弹窗" width="30%" draggable :modal="false" :close-on-click-modal="false">
	<p>君不见高堂明镜悲白发,朝如青丝暮成雪。</p>
    <template #footer>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确定</el-button>
    </template>
  </el-dialog>
</template>
 
<script lang="ts" setup>
import { ref } from 'vue'
 
const dialogVisible = ref(false)
</script>

效果：（实际上没有这些灰色块块的，是录制工具的原因）