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 属性的？的详细内容，更多请关注米云其它相关文章！