Element UI 的 Dialog 组件是如何实现 visible 属性的?

Element UI 的 Dialog 组件是如何实现 visible 属性的?

element ui的幕后秘密:dialog的visible属性

在element ui的dialog组件中,我们发现props中没有visible属性的定义,却可以在使用时给该属性传值。这让人感到疑惑,element ui究竟是如何实现的呢?

深入源码后,我们发现visible属性实际上是通过mixins中Popup混入进来的。Popup是一个专门用于创建弹出框的工具类,它提供了通用的弹出框功能,包括visible属性。

Popup的源码如下:

import Vue from 'vue';import merge from 'element-ui/src/utils/merge';import PopupManager from 'element-ui/src/utils/popup/popup-manager';import getScrollBarWidth from '../scrollbar-width';import { getStyle, addClass, removeClass, hasClass } from '../dom';let idSeed = 1;let scrollBarWidth;export default {  props: {    visible: {      type: Boolean,      default: false    },  },}

通过这个mixins,dialog组件就继承了visible属性,可以使用该属性来控制弹窗的显示隐藏。

以上就是Element UI 的 Dialog 组件是如何实现 visible 属性的?的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1558583.html

赞 (0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
如何消除HTML中最外层container div的外边距?
上一篇 2025年12月22日 03:56:42
Vue2 具名插槽使用报错,页面无法展示插槽内容?
下一篇 2025年12月22日 03:57:03

相关推荐

发表回复

登录后才能评论
关注微信