vue中菜单图标在对话框中引入element-plus的icon,对话框中图标以图形形式呈现,支持选中图标,并将图标值赋给上个界面的input值中
时间: 2024-02-09 11:11:27 浏览: 27
可以通过以下步骤实现:
1. 在对话框中引入 `el-icon` 组件,例如:
```
<el-icon name="edit"></el-icon>
```
2. 在对话框中设置点击事件,将选中的图标值保存到变量中:
```
<el-icon name="edit" @click="selectedIcon = 'edit'"></el-icon>
```
3. 在对话框中设置确定按钮,将选中的图标值传递给上个界面的 input 值中,例如:
```
<el-button type="primary" @click="confirm(selectedIcon)">确定</el-button>
```
4. 在上个界面的 input 中显示选中的图标值,例如:
```
<el-input v-model="iconValue"></el-input>
```
5. 在上个界面的方法中实现 `confirm` 方法,将选中的图标值赋值给 `iconValue` 变量:
```
methods: {
confirm(selectedIcon) {
this.iconValue = selectedIcon;
this.dialogVisible = false; // 关闭对话框
}
}
```
注意,上述代码中的 `selectedIcon` 和 `iconValue` 变量需要在对话框和上个界面中都定义。同时,需要在组件中引入 `el-icon` 和 `el-button` 组件,例如:
```
import { ElIcon, ElButton } from 'element-plus';
export default {
components: {
ElIcon,
ElButton
},
data() {
return {
dialogVisible: false,
selectedIcon: '',
iconValue: ''
}
},
methods: {
confirm(selectedIcon) {
// ...
}
}
}
```