Vue3中element中dialog对话框的visible的坑

最新推荐文章于 2024-05-06 15:15:00 发布
最新推荐文章于 2024-05-06 15:15:00 发布
阅读量2.5k 收藏 7
点赞数 5
分类专栏： Vue 文章标签： vue 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_52418790/article/details/125867763
版权

vue3.0无法使用visible，其中.sync也不被推荐
当使用visible时ESLint会提示报错，触碰显示错误信息，翻译为“ESLint：‘.sync修饰符对’v-绑定‘指令是不推荐的。使用“v-model:propName”代替”
在这里插入图片描述
然而ESLint在下面同时提供了修复方法，点击后直接修改为如图在这里插入图片描述

此时运行会发现，当点击时对话框仍然不现实，即使在方法里打印内容，能够看到控制台打印出来它也不显示，此时打开了浏览器开始搜索，加上modal-append-to-body属性、:append-to-body="true"属性通通不管用，佛了
在这里插入图片描述

最后请教大神，将它更改为如图，成功显示
在这里插入图片描述

在这里插入图片描述

麻辣翅尖
关注
  • 5
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 4
    评论
专栏目录
vue3+ts defineEmits update使用，v-model:visible 子组件传递数据给父组件
qq_42859450的博客
11-10 4305
vue3 defineEmits v-model:visible
Vue3下使用element-plus el-dialog创建自定义的模态对话框
fatfish517的博客
03-31 3727
vue3使用element的el-dialog实现模态对话框；vue3父子组件传递参数 . vue3中.sync被废弃，由v-model取代。
Vue 3 父子组件通信语法糖 .sync 实现
qq_40868156的博客
04-30 436
vue3父子组件通信方式,语法糖,vue2,vue3,react,next.js,nuxt.js,vite
vue3中 :visible.sync 和slot报错
weixin_42479421的博客
05-05 6622
1. :visible.sync :visible指的是属性绑定，表示弹框的显示隐藏。 当:visible的值为ture的时候，弹框显示，当为false的时候，弹框隐藏 :visible.sync指的就是同步动态双向的来表示visible的值， 当我们关闭窗口的时候，这个弹框隐藏了，visible的值发生了变化，但是关闭窗口这个动作，我们没法用确定的动作去判断这个值，所以用到了vue中的双向绑定的原则，在vue中统一加上了.sync来表示同步的修改了visible的值。 改为 注..
vue3中el-dialog组件使用props传的属性
最新发布
wch19960518的博客
05-06 182
一般情况vue3中使用。
vue3之弹窗，抽屉二次封装 v-model=“visible” 踩坑
Jocelyn_书
01-18 2562
当二次封装弹窗或者抽屉时，从父组件传visible给子组件时，子组件用v-model接收控制显示，控制台会报错。父组件在调用抽屉组件，给抽屉组件传控制显示的值时写法。子组件（抽屉组件）在使用父组件传过来控制显示的值时。
vue3自学点
weixin_47667133的博客
04-06 237
组合式api setup是一个新的配置选项，它是一个函数，该函数是组合API的入口函数。 setup函数只会在组件初始化执行一次，且在beforeCreate生命周期函数之前执行。 ToRefs() toRefs 函数的作用，与使用场景 作用：把对象中的每一个属性做一次包装成为响应式数据 响应式数据展开的时候使用，解构响应式数据的时候使用 vue3不兼容vue2的地方 不再支持： 过滤器 filter 同步修饰符 :visible.sync=“dialogFormVisible” 怎么替代： 函数（过滤器）
Vue3.0（3）：v-model
weixin_41897680的博客
07-18 927
v-model 双向绑定 这里只说在组件上的使用 v-model官方文档 2.0 在 2.x 中，在组件上使用 v-model 相当于绑定 value prop 和 input 事件 实例1 //父组件 <template> <div> <el-input v-model="msg" placeholder="请输入"></el-input> <model-test-1 v-model="msg"></model-te
13、通过子组件实现对话框的打开
weixin_51915021的博客
05-12 977
Vue3 + .net core6 WebAPI前后端分离
Vue3对话框（Dialog）
Mr Dear的博客
04-04 5884
常用的弹窗组件，可用于弹窗展示内容，或者提交内容，同时包含全屏按钮功能。
el-dialog在vue3项目中不显示问题
Fore_的博客
02-24 2760
vue3项目开发有关elementplus问题
VUE3一种用户可以设置显示隐藏列表内容的方法
宁波阿成的博客
03-14 973
VUE3一种用户可以设置显示列表内容的方法
Vue3.0 新特性以及使用经验总结
油墨香^-^的博客
12-06 2241
Vue3.0 在去年 9 月正式发布了，看大家都有在热情的拥抱 Vue3.0。今年初新项目也开始使用 Vue3.0 来开发，这篇文章就是在使用后的一个总结， 包含 Vue3 新特性的使用以及一些使用经验分享。使用 Vue2.x 的小伙伴都熟悉，Vue2.x 中所有数据都是定义在中，方法定义在中的，并且使用来调用对应的数据和方法。那 Vue3.x 中就可以不这么玩了， 具体怎么玩我们后续再说， 先说一下 Vue2.x 版本这么写有什么缺陷，所有才会进行升级变更的。 上面代码只是实现了对的加减以及显示倍数，
vue3 中对 dialog 的封装
niyooooo的博客
04-12 2907
父组件 let dialogVisible: Ref<boolean> = ref(false); <Dialog v-model:dialogVisible="dialogVisible" /> 子组件 <script setup lang="ts"> // 接收父组件传来的 defineProps<{ dialogVisible: boolean; }>(); // 子传父 const emits = defineEmits(["upd
vue3 el-dialog 作为子组件父级控制其显示隐藏
偷喝汽水的博客
06-09 4857
vue3 el-dialog 子组件弹窗 父组件控制显隐
Vue 3.0 组件高级（下）
Grapelet123的博客
02-10 489
一、ref 引用 1. 什么是 ref 引用 ref 用来辅助开发者在不依赖于 jQuery 的情况下，获取 DOM 元素或组件的引用。 每个 vue 的组件实例上，都包含一个 $refs 对象，里面存储着对应的 DOM 元素或组件的引用。默认情况下，组件的 $refs 指向一个空对象。 2. 使用 ref 引用 DOM 元素 <!--使用ref属性，为对应dom添加引用名称--> <h3 ref="myh3">myref</h3> <button @c
vue3 、Element Plus新增公共组件或共用组件----Dialog 对话框组件
qq_39877681的博客
12-06 2114
vue3 、Element Plus新增公共组件或共用组件----Dialog 对话框组件
vue2&vue3监听页面显示隐藏
一个有节操的码农
01-29 650
【代码】vue2&vue3监听页面显示隐藏。
dialog弹窗的用法
qq_59076775的博客
05-17 2555
这是Element-ui下的代码: <el-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-button> <el-dialog title="提示" :visible.sync="dialogVisible" width="30%" :before-close="handleClose"> <span>这是一段信息</span> &lt
Vue中使用element-ui的el-dialog对话框
05-30
要在Vue中使用element-ui的el-dialog对话框，你需要先安装element-ui，可以使用npm或者yarn进行安装。 1. 通过npm安装 ``` npm install element-ui --save ``` 2. 通过yarn安装 ``` yarn add element-ui ``` 安装完成后，在Vue项目中引入element-ui，并注册el-dialog组件。 ```javascript import Vue from 'vue' import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.use(ElementUI) ``` 现在你可以在Vue组件中使用el-dialog组件了。下面是一个简单的示例： ```html <template> <div> <el-button type="primary" @click="dialogVisible = true">打开对话框</el-button> <el-dialog title="提示" :visible.sync="dialogVisible"> <span>这是一个对话框</span> <span slot="footer" class="dialog-footer"> <el-button @click="dialogVisible = false">取消</el-button> <el-button type="primary" @click="dialogVisible = false">确定</el-button> </span> </el-dialog> </div> </template> <script> export default { data() { return { dialogVisible: false } } } </script> ``` 在这个示例中，我们使用了el-button组件来触发打开对话框的事件，然后在el-dialog组件中定义了对话框的标题和内容，并使用visible.sync来控制对话框的显示和隐藏。在底部我们使用了el-button组件来定义对话框的按钮区域。 这是一个简单的例子，你可以根据自己的需求来定制对话框的样式和交互。
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

麻辣翅尖

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值