vue element在动态菜单中 双击某一个菜单 在双击的菜单旁边 出现一个 框
时间: 2024-02-23 21:01:32 浏览: 54
在菜单后面提示该菜单的信息
您可以通过在菜单项中添加一个 `el-dialog` 组件,并使用 `v-if` 指令来控制它的显示和隐藏。在双击菜单项时,您可以将该菜单项的状态标记为“编辑”,并在状态为“编辑”时显示对话框。以下是一个示例代码:
```
<template>
<div>
<el-menu>
<el-menu-item v-for="item in menuItems" :key="item.id">
<div @dblclick="editItem(item)">
{{ item.text }}
</div>
</el-menu-item>
</el-menu>
<el-dialog v-if="editingItem" :title="'编辑 ' + editingItem.text" :visible.sync="dialogVisible">
<el-input v-model="editingItem.text" />
<div slot="footer">
<el-button @click="dialogVisible = false">取消</el-button>
<el-button type="primary" @click="saveItem">保存</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
export default {
data() {
return {
menuItems: [
{ id: 1, text: '菜单项1', editing: false },
{ id: 2, text: '菜单项2', editing: false },
{ id: 3, text: '菜单项3', editing: false }
],
editingItem: null,
dialogVisible: false
}
},
methods: {
editItem(item) {
this.editingItem = item
this.dialogVisible = true
},
saveItem() {
this.editingItem.editing = false
this.editingItem = null
this.dialogVisible = false
}
}
}
</script>
```
在上面的示例中,当双击菜单项时,`editItem` 方法会将 `editingItem` 属性设置为该菜单项,并将 `dialogVisible` 属性设置为 `true`。此时,由于 `v-if="editingItem"` 的存在,对话框会显示出来。在对话框中,用户可以编辑菜单项的文本,并点击“保存”按钮保存更改。`saveItem` 方法会将菜单项的 `editing` 属性设置为 `false`,并将 `editingItem` 和 `dialogVisible` 属性重置为 `null` 和 `false`。这样,对话框会消失,并且菜单项的文本会被更新。
阅读全文