首页el-cascader hover 触发 el-cascader-menu__list 菜单方向向左展开，请用vue实现

el-cascader hover 触发 el-cascader-menu__list 菜单方向向左展开，请用vue实现

时间: 2023-10-13 09:06:52 浏览: 232

好的，以下是示例代码： ``` <template> <el-cascader @mouseover="handleMouseOver" @mouseleave="handleMouseLeave" :options="options" :props="props"> </el-cascader> </template> <script> export default { data() { return { options: [ { value: 'zhinan', label: '指南', children: [ { value: 'shejiyuanze', label: '设计原则', children: [ { value: 'yizhi', label: '一致性' }, { value: 'fankui', label: '反馈' } ] }, { value: 'daohang', label: '导航', children: [ { value: 'cexiangdaohang', label: '侧向导航' }, { value: 'dingbudaohang', label: '顶部导航' } ] } ] } ], props: { expandTrigger: 'hover', value: 'value', label: 'label', children: 'children', disabled: 'disabled' } }; }, methods: { handleMouseOver(e) { const menu = e.target.parentNode.querySelector('.el-cascader-menus'); menu.style.right = 'auto'; menu.style.left = '0'; }, handleMouseLeave(e) { const menu = e.target.parentNode.querySelector('.el-cascader-menus'); menu.style.left = 'auto'; menu.style.right = '0'; } } }; </script> ``` 需要注意的是，要使用 `@mouseover` 和 `@mouseleave` 事件来实现 hover 触发，然后通过获取菜单容器并设置左右偏移量来实现菜单方向向左展开。

阅读全文