图标选取功能
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