【区分vue2和vue3下的element UI Dropdown 下拉菜单组件,分别详细介绍属性,事件,方法如何使用,并举例】

发布于:2024-07-05 ⋅ 阅读:(12) ⋅ 点赞:(0)

在 Vue 2 和 Vue 3 中,Element UI(针对 Vue 2)和 Element Plus(针对 Vue 3)提供了 Dropdown 下拉菜单组件,用于展示一个可点击的下拉列表。然而,需要注意的是,Element UI 和 Element Plus 在组件的实现、属性、事件和方法上可能存在差异。下面我将分别介绍 Vue 2 下的 Element UI Dropdown 组件和 Vue 3 下的 Element Plus Dropdown 组件(或类似的组件,因为 Element Plus 可能不直接提供名为 “Dropdown” 的组件,但提供了相似的功能)。

Vue 2 + Element UI

在 Vue 2 中,Element UI 并没有直接提供一个名为 “Dropdown” 的组件。通常,下拉功能是通过 Dropdown Menu(下拉菜单)或 Select(选择器)等组件来实现的。但为了说明目的,我们可以假设你指的是 Dropdown Menu 或与之相似的组件。

Element UI Dropdown Menu(假设)

虽然 Element UI 没有直接的 Dropdown 组件,但 Dropdown Menu(下拉菜单)提供了类似的功能。

属性(Props)
  • type:可能用于定义下拉菜单的样式或类型(具体取决于 Element UI 的版本和组件实现)。
  • placement:定义下拉菜单的弹出位置。
  • trigger:定义触发下拉菜单的方式,如 hoverclick 等。
事件(Events)
  • command:当下拉菜单中的命令被点击时触发。
方法(Methods)

Dropdown Menu 在 Element UI 中通常不直接暴露方法供外部调用。

示例(假设使用 Dropdown Menu)
<template>
  <el-dropdown @command="handleCommand">
    <span class="el-dropdown-link">
      下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>
    </span>
    <el-dropdown-menu slot="dropdown">
      <el-dropdown-item command="1">黄金糕</el-dropdown-item>
      <el-dropdown-item command="2">狮子头</el-dropdown-item>
      <!-- ... -->
    </el-dropdown-menu>
  </el-dropdown>
</template>

<script>
export default {
  methods: {
    handleCommand(command) {
      console.log(command);
    },
  },
};
</script>

Vue 3 + Element Plus

在 Vue 3 中,Element Plus 提供了更现代和灵活的组件库,但同样没有直接名为 “Dropdown” 的组件。不过,你可以使用类似 Dropdown Menu 或 Select 的组件来实现下拉功能。

Element Plus Dropdown Menu 或 Select(示例)

属性(Props)

Element Plus 的属性会根据具体的组件而有所不同,但通常会包括:

  • model-value(或 v-model):绑定当前选中的值(对于 Select 组件)。
  • placement:定义下拉菜单的弹出位置。
  • trigger:定义触发下拉菜单的方式。
事件(Events)
  • change(对于 Select 组件):当选中项发生变化时触发。
  • visible-change:当下拉菜单的显示状态变化时触发(取决于具体的组件实现)。
方法(Methods)

Element Plus 的组件可能不直接暴露很多方法供外部调用,但你可以通过其他方式(如修改绑定的值)来控制组件的行为。

示例(使用 Select 组件作为下拉菜单的替代)
<template>
  <el-select v-model="selected" placeholder="请选择">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
</template>

<script setup>
import { ref } from 'vue';

const selected = ref('');
const options = ref([
  { value: 'option1', label: '黄金糕' },
  { value: 'option2', label: '狮子头' },
  // ...
]);
</script>

请注意,上面的示例使用了 Select 组件作为下拉菜单的替代,因为 Element Plus 没有直接提供名为 “Dropdown” 的组件。如果你的需求是更复杂的下拉菜单(如包含多个层级的菜单项),你可能需要自定义组件或使用第三方库。

在实际项目中,你应该根据 Element Plus 的官方文档来查找适合你需求的组件,并查看其属性、事件和方法的详细说明。


网站公告

今日签到

点亮在社区的每一天
去签到