当前位置：首页 > 前端教程

elementui open

2026-01-15 19:02:22前端教程

ElementUI 的 Open 方法

ElementUI 是一个基于 Vue.js 的组件库，提供了丰富的 UI 组件。其中某些组件（如 Dialog、Drawer、Dropdown 等）具有 open 方法，用于手动控制组件的显示状态。

Dialog 组件的 Open 方法

Dialog 组件可以通过 open 方法手动打开弹窗。通常结合 ref 属性使用：

<template>
  <el-button @click="openDialog">打开弹窗</el-button>
  <el-dialog ref="dialogRef" title="标题">
    <span>内容</span>
  </el-dialog>
</template>

<script>
export default {
  methods: {
    openDialog() {
      this.$refs.dialogRef.open();
    }
  }
}
</script>

Drawer 组件的 Open 方法

Drawer 组件也可以通过 open 方法手动打开抽屉：

<template>
  <el-button @click="openDrawer">打开抽屉</el-button>
  <el-drawer ref="drawerRef" title="标题">
    <span>内容</span>
  </el-drawer>
</template>

<script>
export default {
  methods: {
    openDrawer() {
      this.$refs.drawerRef.open();
    }
  }
}
</script>

Dropdown 组件的 Open 方法

Dropdown 组件的 open 方法可以手动展开下拉菜单：

elementui open

<template>
  <el-dropdown ref="dropdownRef">
    <span class="el-dropdown-link">
      下拉菜单<i class="el-icon-arrow-down"></i>
    </span>
    <el-dropdown-menu slot="dropdown">
      <el-dropdown-item>选项1</el-dropdown-item>
      <el-dropdown-item>选项2</el-dropdown-item>
    </el-dropdown-menu>
  </el-dropdown>
</template>

<script>
export default {
  mounted() {
    this.$refs.dropdownRef.open();
  }
}
</script>