图标选取功能
Showing
1 changed file
with
22 additions
and
1 deletions
| ... | @@ -9,6 +9,16 @@ | ... | @@ -9,6 +9,16 @@ |
| 9 | <el-input v-model="form.name" placeholder="请输入菜单名称" /> | 9 | <el-input v-model="form.name" placeholder="请输入菜单名称" /> |
| 10 | </el-form-item> | 10 | </el-form-item> |
| 11 | </el-col> | 11 | </el-col> |
| 12 | <el-col :span="12"> | ||
| 13 | <el-form-item label="图标:" label-width="54px"> | ||
| 14 | <el-input | ||
| 15 | v-model="form.icon" | ||
| 16 | placeholder="请选择图标" | ||
| 17 | :prefix-icon="form.icon" | ||
| 18 | clearable | ||
| 19 | @focus="getIconList" /> | ||
| 20 | </el-form-item> | ||
| 21 | </el-col> | ||
| 12 | </el-row> | 22 | </el-row> |
| 13 | <el-row :gutter="24"> | 23 | <el-row :gutter="24"> |
| 14 | <el-col :span="12"> | 24 | <el-col :span="12"> |
| ... | @@ -51,12 +61,15 @@ | ... | @@ -51,12 +61,15 @@ |
| 51 | </el-col> | 61 | </el-col> |
| 52 | </el-row> | 62 | </el-row> |
| 53 | </el-form> | 63 | </el-form> |
| 64 | <!-- 图标列表 --> | ||
| 65 | <IconList ref="iconList" @iconName="getIconName" /> | ||
| 54 | </div> | 66 | </div> |
| 55 | </dialogBox> | 67 | </dialogBox> |
| 56 | </template> | 68 | </template> |
| 57 | 69 | ||
| 58 | <script> | 70 | <script> |
| 59 | import { getParentMenuListAction } from '@/api/authorityManage' | 71 | import { getParentMenuListAction } from '@/api/authorityManage' |
| 72 | import IconList from '../../../components/IconList' | ||
| 60 | import JsonEditor from '@/components/JsonEditors' | 73 | import JsonEditor from '@/components/JsonEditors' |
| 61 | import { validateCode } from '@/utils/validate'; | 74 | import { validateCode } from '@/utils/validate'; |
| 62 | import { api, httpAction } from '@/api/manageApi' | 75 | import { api, httpAction } from '@/api/manageApi' |
| ... | @@ -64,6 +77,7 @@ | ... | @@ -64,6 +77,7 @@ |
| 64 | name: 'MenuModal', | 77 | name: 'MenuModal', |
| 65 | components: { | 78 | components: { |
| 66 | JsonEditor, | 79 | JsonEditor, |
| 80 | IconList, | ||
| 67 | }, | 81 | }, |
| 68 | props: { | 82 | props: { |
| 69 | value: { type: Boolean, default: false }, | 83 | value: { type: Boolean, default: false }, |
| ... | @@ -142,6 +156,10 @@ | ... | @@ -142,6 +156,10 @@ |
| 142 | } | 156 | } |
| 143 | }) | 157 | }) |
| 144 | }, | 158 | }, |
| 159 | // 选择图标 | ||
| 160 | getIconName (data) { | ||
| 161 | this.form.icon = data; | ||
| 162 | }, | ||
| 145 | getIconList () { | 163 | getIconList () { |
| 146 | this.$refs.iconList.show(true) | 164 | this.$refs.iconList.show(true) |
| 147 | }, | 165 | }, |
| ... | @@ -244,9 +262,12 @@ | ... | @@ -244,9 +262,12 @@ |
| 244 | white-space: nowrap; | 262 | white-space: nowrap; |
| 245 | b { | 263 | b { |
| 246 | font-size: 16px; | 264 | font-size: 16px; |
| 247 | font-weight: 600; | ||
| 248 | } | 265 | } |
| 249 | } | 266 | } |
| 267 | .el-dialog__headerbtn { | ||
| 268 | right: 20px !important; | ||
| 269 | top: 23px !important; | ||
| 270 | } | ||
| 250 | } | 271 | } |
| 251 | } | 272 | } |
| 252 | </style> | 273 | </style> | ... | ... |
-
Please register or sign in to post a comment