html

  <div>
    <!-- 按钮触发弹窗 -->
    点击打开Dialog</p>

<pre><code><!-- Dialog弹窗 -->
<el-dialog :visible.sync="dialogVisible" title="提示">
  这是一个简单的Dialog示例。
</el-dialog>

export default {
data() {
return {
dialogVisible: false // 控制Dialog显示隐藏的状态变量
}
}
}

这种方式简单直接，适合于较为基础的场景，只需通过修改dialogVisible的值即可轻松控制Dialog的打开和关闭。

三、使用事件与方法控制

除了直接操作属性外，我们还可以借助ElementUI提供的事件和方法来进行更复杂的控制。例如，对于Dropdown下拉菜单组件：

html

  <div>
    
      <span class="el-dropdown-link">
        点击打开菜单<i class="el-icon-arrow-down el-icon--right"></i>
      </span>
      
        黄金糕
        狮子头
      
    
    手动打开菜单
  </div>
</p>


export default {
  methods: {
    openDropdown() {
      this.$refs.dropdownRef.show() // 调用Dropdown实例的show方法打开菜单
    }
  }
}


<p>

这里通过给Dropdown组件设置ref引用，并利用Vue的$refs获取组件实例，然后调用其show()方法实现手动打开下拉菜单的功能。

四、结合Vuex进行全局管理

当项目规模较大，弹出层涉及到多个组件之间的协同工作时，可以考虑使用Vuex来集中管理弹出层的状态。在store中定义相关状态：

javascript
// store.js
const state = {
  isGlobalDialogVisible: false
}</p>

<p>const mutations = {
  TOGGLE<em>GLOBAL</em>DIALOG(state, status) {
    state.isGlobalDialogVisible = status;
  }
}</p>

<p>const actions = {
  toggleGlobalDialog({ commit }, status) {
    commit('TOGGLE<em>GLOBAL</em>DIALOG', status);
  }
}</p>

<p>export default new Vuex.Store({
  state,
  mutations,
  actions
})

然后，在需要的地方通过分发action来改变状态并控制弹出层：

html

  <div>
    打开全局Dialog
    关闭全局Dialog</p>

<pre><code><el-dialog :visible.sync="isGlobalDialogVisible" title="全局Dialog">
  这是通过Vuex管理的全局Dialog。
</el-dialog>