实现如下效果:
可以使用el组件el-popover
注意:
1.对el-popover的样式修改时,需要使用popper-class设置类名,并以.el-popover,不加空格(同级类名),然后加自己设置的类名,来设置样式。同时注意,style不能加scoped
因为q-popover和 App.vue组件的div平级,所以需要设置全局style,在标签里,不加scoped就是全局style
然后因为el-popover是独立的div,不要将样式加在嵌套里,也不能用穿透符>>>因为el-popover不在当前组件之内
2.对于动态加载的元素,给二级ul设置位置时,不需要获取一级ul的宽度(层级太多,获取不到,浪费时间。。血的教训),可以给一级li设置position:relative,然后二级ul设置position:absolute后加上right:100%就可以实现。
<template> <div class="add-menu"> <el-popover placement="left" :visible-arrow="false" popper-class="popover-menu" v-model="visible" > <ul class="first-menu" ref="firstMenu"> <li v-for="item in options" :key="item.value" @click="handleClick(item)"> <i v-if="!item.children" class="el-icon-caret-left icon-show"></i> <template v-if="item.children"> <i class="el-icon-caret-left"></i> <ul class="second-menu" id="secondMenu"> <li v-for="it in item.children" :key="it.value" @click.stop="handleClick(it)">{{it.label}}</li> </ul> </template> {{item.label}} </li> </ul> <el-button slot="reference" type="info">新增</el-button> </el-popover> </div> </template> <script> export default { data() { return { options:[{ value: 'zhinan', label: '指南', children: [{ value: 'shejiyuanze', label: '设计原则', children: [{ value: 'yizhi', label: '一致' }, { value: 'fankui', label: '反馈' }, { value: 'xiaolv', label: '效率' }, { value: 'kekong', label: '可控' }] }, { value: 'daohang', label: '导航', }] }, { value: 'zujian', label: '组件', children: [{ value: 'basic', label: 'Basic', children: [{ value: 'layout', label: 'Layout 布局' }, { value: 'color', label: 'Color 色彩' }, { value: 'typography', label: 'Typography 字体' }, { value: 'icon', label: 'Icon 图标' }, { value: 'button', label: 'Button 按钮' }] }, { value: 'form', label: 'Form', children: [{ value: 'radio', label: 'Radio 单选框' }, { value: 'checkbox', label: 'Checkbox 多选框' }, { value: 'input', label: 'Input 输入框' }, { value: 'input-number', label: 'InputNumber 计数器' }, { value: 'select', label: 'Select 选择器' }, { value: 'cascader', label: 'Cascader 级联选择器' }, { value: 'switch', label: 'Switch 开关' }, { value: 'slider', label: 'Slider 滑块' }, { value: 'time-picker', label: 'TimePicker 时间选择器' }, { value: 'date-picker', label: 'DatePicker 日期选择器' }, { value: 'datetime-picker', label: 'DateTimePicker 日期时间选择器' }, { value: 'upload', label: 'Upload 上传' }, { value: 'rate', label: 'Rate 评分' }, { value: 'form', label: 'Form 表单' }] }, { value: 'data', label: 'Data', children: [{ value: 'table', label: 'Table 表格' }, { value: 'tag', label: 'Tag 标签' }, { value: 'progress', label: 'Progress 进度条' }, { value: 'tree', label: 'Tree 树形控件' }, { value: 'pagination', label: 'Pagination 分页' }, { value: 'badge', label: 'Badge 标记' }] }, { value: 'notice', label: 'Notice', children: [{ value: 'alert', label: 'Alert 警告' }, { value: 'loading', label: 'Loading 加载' }, { value: 'message', label: 'Message 消息提示' }, { value: 'message-box', label: 'MessageBox 弹框' }, { value: 'notification', label: 'Notification 通知' }] }, { value: 'others', label: 'Others', children: [{ value: 'dialog', label: 'Dialog 对话框' }, { value: 'tooltip', label: 'Tooltip 文字提示' }, { value: 'popover', label: 'Popover 弹出框' }, { value: 'card', label: 'Card 卡片' }, { value: 'carousel', label: 'Carousel 走马灯' }, { value: 'collapse', label: 'Collapse 折叠面板' }] }] }, { value: 'ziyuan', label: '资源', children: [{ value: 'axure', label: 'Axure Components' }, { value: 'sketch', label: 'Sketch Templates' }, { value: 'jiaohu', label: '组件交互文档' }] }] visible: false, } }, methods: { handleClick(row) { this.visible = row.children ? true : false }, } </script> <style lang="scss"> ul { list-style: none; padding: 0; margin: 0; font-size:14px; background-color:white; border: 1px solid #ccc; li { padding: 8px; } li:hover { background-color: #ccc; } } .first-menu > li ul { display: none; } .first-menu > li:hover ul { display: block; } .add-menu { display: inline-block; position: absolute; right: 80px; top: 400px; } .first-menu { &> li { position: relative; } } .second-menu { min-width:80px; position: absolute; top: 0; right:100% } .icon-show { visibility: hidden; } </style> <style> .el-popover.popover-menu { background-color: transparent; min-width: 100px; } .el-popover.popover-menu .el-popover__content { padding: 0; } </style>