1 打开一个vue文件，添加一个el-dropdown下拉框组件。如图 2 在el-dropdown标签上添加trigger="click"，用于设置点击下拉菜单才显示下拉框内容。如图 3 保存vue文件后使用浏览器打开，鼠标滑过下拉菜单发现没有显示内容，鼠标点击时才会显示下拉框内容。如图 ...
它提供了一种便捷的方式来显示和选择多个选项,为用户提供了良好的交互体验。在本文中,我们将深入探讨 el-dropdown 的用法,包括如何使用和配置 el-dropdown 组件,以及其相关的注意事项。 二、el-dropdown 的基本用法 1. el-dropdown 的基本结构 el-dropdown 组件由触发按钮和下拉菜单两部分组成。触发按钮通常是...
点击Dropdown 下拉菜单,没有出现菜单栏但是当我把DropDown所在的组件单独拎出来展示,就可以正常显示 而且查看组件,未显示的时候,也是能看到有DropDownMenu组件在的 <el-dropdown split-button type="primary" @click="handleClick"> 更多菜单 <template v-slot:dropdown> <el-dropdown-menu> <el-dropdown-item...
用户点击触发元素时,下拉菜单将以指定的位置显示。 四、placement属性的应用场景placement属性的选择应根据实际的UI设计和用户交互需求来决定,以下是一些常见的应用场景: 13.如果页面顶部空间充足,可以将菜单设置为top,使菜单在触发元素的上方弹出,这样用户可以清晰地看到菜单内容。 14.如果页面底部空间充足,可以将菜单...
点击Dropdown 下拉菜单,没有出现菜单栏但是当我把DropDown所在的组件单独拎出来展示,就可以正常显示 而且查看组件,未显示的时候,也是能看到有DropDownMenu组件在的 <el-dropdownsplit-buttontype="primary"@click="handleClick">更多菜单<templatev-slot:dropdown><el-dropdown-menu><el-dropdown-item><el-buttont...
element-plus 使el-dropdown只显示当前选择节点 在数据对象中设置一个唯一标识符currentDrop,用来存放当前打开的下拉菜单的下标,初始化为null: data() { return { currentDrop: null }; }, 在每个el-dropdown-item上使用visible-change方法,当下拉菜单的状态发生变化时,更新currentDrop的值。id是你的树节点id:...