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 属性的？ 》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！