el-dropdown的完整写法
时间: 2023-11-06 08:18:26 浏览: 51
el-dropdown 是 Element UI 中的下拉菜单组件,它包含了 el-dropdown-button、el-dropdown-menu 和 el-dropdown-item 三个子组件。下面是 el-dropdown 的完整写法示例:
```
<el-dropdown>
<span class="el-dropdown-link">
下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>菜单项1</el-dropdown-item>
<el-dropdown-item>菜单项2</el-dropdown-item>
<el-dropdown-item>菜单项3</el-dropdown-item>
<el-dropdown-item>菜单项4</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
```
其中,el-dropdown 包含了一个 span 元素和一个 el-dropdown-menu 元素。span 元素作为下拉菜单的触发器,el-dropdown-menu 元素则包含了多个 el-dropdown-item 元素,表示下拉菜单中的每个选项。
需要注意的是,el-dropdown-menu 必须设置在 el-dropdown 的 slot="dropdown" 属性中,以表示该元素是下拉菜单的内容。而 el-dropdown-item 则不需要设置任何属性,只需在其中添加文本内容即可。
另外,el-dropdown 还有一个 el-dropdown-button 子组件,用于在按钮中显示下拉图标。如果需要使用按钮样式的下拉菜单,可以使用 el-dropdown-button 替代 span 元素。