<template>
|
<el-dialog id="iconDialog" title="选择菜单图标" :modal="false" :visible="iconDialogVisible" @close="setClose">
|
<div class="myclass">
|
<i v-for="icon in iconDropdownMenus" :key="icon.key" :class="icon.key" @click="selectIcon(icon.key)"></i>
|
</div>
|
</el-dialog>
|
</template>
|
|
<script>
|
export default {
|
name: "IconDialog",
|
data() {
|
return {
|
iconDropdownMenus: [
|
{ key: "el-icon-delete-solid" },
|
{ key: "el-icon-delete" },
|
{ key: "el-icon-s-tools" },
|
{ key: "el-icon-setting" },
|
{ key: "el-icon-user-solid" },
|
{ key: "el-icon-user" },
|
{ key: "el-icon-phone" },
|
{ key: "el-icon-phone-outline" },
|
{ key: "el-icon-more" },
|
{ key: "el-icon-more-outline" },
|
{ key: "el-icon-star-on" },
|
{ key: "el-icon-star-off" },
|
{ key: "el-icon-s-goods" },
|
{ key: "el-icon-goods" },
|
{ key: "el-icon-warning" },
|
{ key: "el-icon-warning-outline" },
|
{ key: "el-icon-question" },
|
{ key: "el-icon-info" },
|
{ key: "el-icon-remove" },
|
{ key: "el-icon-circle-plus" },
|
{ key: "el-icon-success" },
|
{ key: "el-icon-error" },
|
{ key: "el-icon-zoom-in" },
|
{ key: "el-icon-zoom-out" },
|
{ key: "el-icon-remove-outline" },
|
{ key: "el-icon-circle-plus-outline" },
|
{ key: "el-icon-circle-check" },
|
{ key: "el-icon-circle-close" },
|
{ key: "el-icon-s-help" },
|
{ key: "el-icon-help" },
|
{ key: "el-icon-minus" },
|
{ key: "el-icon-plus" },
|
{ key: "el-icon-check" },
|
{ key: "el-icon-close" },
|
{ key: "el-icon-picture" },
|
{ key: "el-icon-picture-outline" },
|
{ key: "el-icon-picture-outline-round" },
|
{ key: "el-icon-upload" },
|
{ key: "el-icon-upload2" },
|
{ key: "el-icon-download" },
|
{ key: "el-icon-camera-solid" },
|
{ key: "el-icon-camera" },
|
{ key: "el-icon-video-camera-solid" },
|
{ key: "el-icon-video-camera" },
|
{ key: "el-icon-message-solid" },
|
{ key: "el-icon-bell" },
|
{ key: "el-icon-s-cooperation" },
|
{ key: "el-icon-s-order" },
|
{ key: "el-icon-s-platform" },
|
{ key: "el-icon-s-fold" },
|
{ key: "el-icon-s-unfold" },
|
{ key: "el-icon-s-operation" },
|
{ key: "el-icon-s-promotion" },
|
{ key: "el-icon-s-home" },
|
{ key: "el-icon-s-release" },
|
{ key: "el-icon-s-ticket" },
|
{ key: "el-icon-s-management" },
|
{ key: "el-icon-s-open" },
|
{ key: "el-icon-s-shop" },
|
{ key: "el-icon-s-marketing" },
|
{ key: "el-icon-s-flag" },
|
{ key: "el-icon-s-comment" },
|
{ key: "el-icon-s-finance" },
|
{ key: "el-icon-s-claim" },
|
{ key: "el-icon-s-custom" },
|
{ key: "el-icon-s-opportunity" },
|
{ key: "el-icon-s-data" },
|
{ key: "el-icon-s-check" },
|
{ key: "el-icon-s-grid" },
|
{ key: "el-icon-menu" },
|
{ key: "el-icon-share" },
|
{ key: "el-icon-d-caret" },
|
{ key: "el-icon-caret-left" },
|
{ key: "el-icon-caret-right" },
|
{ key: "el-icon-caret-bottom" },
|
{ key: "el-icon-caret-top" },
|
{ key: "el-icon-bottom-left" },
|
{ key: "el-icon-bottom-right" },
|
{ key: "el-icon-back" },
|
{ key: "el-icon-right" },
|
{ key: "el-icon-bottom" },
|
{ key: "el-icon-top" },
|
{ key: "el-icon-top-left" },
|
{ key: "el-icon-top-right" },
|
{ key: "el-icon-arrow-left" },
|
{ key: "el-icon-arrow-right" },
|
{ key: "el-icon-arrow-down" },
|
{ key: "el-icon-arrow-up" },
|
{ key: "el-icon-d-arrow-left" },
|
{ key: "el-icon-d-arrow-right" },
|
{ key: "el-icon-video-pause" },
|
{ key: "el-icon-video-play" },
|
{ key: "el-icon-refresh" },
|
{ key: "el-icon-refresh-right" },
|
{ key: "el-icon-refresh-left" },
|
{ key: "el-icon-finished" },
|
{ key: "el-icon-sort" },
|
{ key: "el-icon-sort-up" },
|
{ key: "el-icon-sort-down" },
|
{ key: "el-icon-rank" },
|
{ key: "el-icon-loading" },
|
{ key: "el-icon-view" },
|
{ key: "el-icon-c-scale-to-original" },
|
{ key: "el-icon-date" },
|
{ key: "el-icon-edit" },
|
{ key: "el-icon-edit-outline" },
|
{ key: "el-icon-folder" },
|
{ key: "el-icon-folder-opened" },
|
{ key: "el-icon-folder-add" },
|
{ key: "el-icon-folder-remove" },
|
{ key: "el-icon-folder-delete" },
|
{ key: "el-icon-folder-checked" },
|
{ key: "el-icon-tickets" },
|
{ key: "el-icon-document-remove" },
|
{ key: "el-icon-document-delete" },
|
{ key: "el-icon-document-copy" },
|
{ key: "el-icon-document-checked" },
|
{ key: "el-icon-document" },
|
{ key: "el-icon-document-add" },
|
{ key: "el-icon-printer" },
|
{ key: "el-icon-paperclip" },
|
{ key: "el-icon-takeaway-box" },
|
{ key: "el-icon-search" },
|
{ key: "el-icon-monitor" },
|
{ key: "el-icon-attract" },
|
{ key: "el-icon-mobile" },
|
{ key: "el-icon-scissors" },
|
{ key: "el-icon-umbrella" },
|
{ key: "el-icon-headset" },
|
{ key: "el-icon-brush" },
|
{ key: "el-icon-mouse" },
|
{ key: "el-icon-coordinate" },
|
{ key: "el-icon-magic-stick" },
|
{ key: "el-icon-reading" },
|
{ key: "el-icon-data-line" },
|
{ key: "el-icon-data-board" },
|
{ key: "el-icon-pie-chart" },
|
{ key: "el-icon-data-analysis" },
|
{ key: "el-icon-collection-tag" },
|
{ key: "el-icon-film" },
|
{ key: "el-icon-suitcase" },
|
{ key: "el-icon-suitcase-1" },
|
{ key: "el-icon-receiving" },
|
{ key: "el-icon-collection" },
|
{ key: "el-icon-files" },
|
{ key: "el-icon-notebook-1" },
|
{ key: "el-icon-notebook-2" },
|
{ key: "el-icon-toilet-paper" },
|
{ key: "el-icon-office-building" },
|
{ key: "el-icon-school" },
|
{ key: "el-icon-table-lamp" },
|
{ key: "el-icon-house" },
|
{ key: "el-icon-no-smoking" },
|
{ key: "el-icon-smoking" },
|
{ key: "el-icon-shopping-cart-full" },
|
{ key: "el-icon-shopping-cart-1" },
|
{ key: "el-icon-shopping-cart-2" },
|
{ key: "el-icon-shopping-bag-1" },
|
{ key: "el-icon-shopping-bag-2" },
|
{ key: "el-icon-sold-out" },
|
{ key: "el-icon-sell" },
|
{ key: "el-icon-present" },
|
{ key: "el-icon-box" },
|
{ key: "el-icon-bank-card" },
|
{ key: "el-icon-money" },
|
{ key: "el-icon-coin" },
|
{ key: "el-icon-wallet" },
|
{ key: "el-icon-discount" },
|
{ key: "el-icon-price-tag" },
|
{ key: "el-icon-news" },
|
{ key: "el-icon-guide" },
|
{ key: "el-icon-male" },
|
{ key: "el-icon-female" },
|
{ key: "el-icon-thumb" },
|
{ "key": "el-icon-cpu" },
|
{ "key": "el-icon-link" },
|
{ "key": "el-icon-connection" },
|
{ "key": "el-icon-open" },
|
{ "key": "el-icon-turn-off" },
|
{ "key": "el-icon-set-up" },
|
{ "key": "el-icon-chat-round" },
|
{ "key": "el-icon-chat-line-round" },
|
{ "key": "el-icon-chat-square" },
|
{ "key": "el-icon-chat-dot-round" },
|
{ "key": "el-icon-chat-dot-square" },
|
{ "key": "el-icon-chat-line-square" },
|
{ "key": "el-icon-message" },
|
{ "key": "el-icon-postcard" },
|
{ "key": "el-icon-position" },
|
{ "key": "el-icon-turn-off-microphone" },
|
{ "key": "el-icon-microphone" },
|
{ "key": "el-icon-close-notification" },
|
{ "key": "el-icon-bangzhu" },
|
{ "key": "el-icon-time" },
|
{ "key": "el-icon-odometer" },
|
{ "key": "el-icon-crop" },
|
{ "key": "el-icon-aim" },
|
{ "key": "el-icon-switch-button" },
|
{ "key": "el-icon-full-screen" },
|
{ "key": "el-icon-copy-document" },
|
{ "key": "el-icon-mic" },
|
{ "key": "el-icon-stopwatch" },
|
{ "key": "el-icon-medal-1" },
|
{ "key": "el-icon-medal" },
|
{ "key": "el-icon-trophy" },
|
{ "key": "el-icon-trophy-1" },
|
{ "key": "el-icon-first-aid-kit" },
|
{ "key": "el-icon-discover" },
|
{ "key": "el-icon-place" },
|
{ "key": "el-icon-location" },
|
{ "key": "el-icon-location-outline" },
|
{ "key": "el-icon-location-information" },
|
{ "key": "el-icon-add-location" },
|
{ "key": "el-icon-delete-location" },
|
{ "key": "el-icon-map-location" },
|
{ "key": "el-icon-alarm-clock" },
|
{ "key": "el-icon-timer" },
|
{ "key": "el-icon-watch-1" },
|
{ "key": "el-icon-watch" },
|
{ "key": "el-icon-lock" },
|
{ "key": "el-icon-unlock" },
|
{ "key": "el-icon-key" },
|
{ "key": "el-icon-service" },
|
{ "key": "el-icon-mobile-phone" },
|
{ "key": "el-icon-bicycle" },
|
{ "key": "el-icon-truck" },
|
{ "key": "el-icon-ship" },
|
{ "key": "el-icon-basketball" },
|
{ "key": "el-icon-football" },
|
{ "key": "el-icon-soccer" },
|
{ "key": "el-icon-baseball" },
|
{ "key": "el-icon-wind-power" },
|
{ "key": "el-icon-light-rain" },
|
{ "key": "el-icon-lightning" },
|
{ "key": "el-icon-heavy-rain" },
|
{ "key": "el-icon-sunrise" },
|
{ "key": "el-icon-sunrise-1" },
|
{ "key": "el-icon-sunset" },
|
{ "key": "el-icon-sunny" },
|
{ "key": "el-icon-cloudy" },
|
{ "key": "el-icon-partly-cloudy" },
|
{ "key": "el-icon-cloudy-and-sunny" },
|
{ "key": "el-icon-moon" },
|
{ "key": "el-icon-moon-night" },
|
{ "key": "el-icon-dish" },
|
{ "key": "el-icon-dish-1" },
|
{ "key": "el-icon-food" },
|
{ "key": "el-icon-chicken" },
|
{ "key": "el-icon-fork-spoon" },
|
{ "key": "el-icon-knife-fork" },
|
{ "key": "el-icon-burger" },
|
{ "key": "el-icon-tableware" },
|
{ "key": "el-icon-sugar" },
|
{ "key": "el-icon-dessert" },
|
{ "key": "el-icon-ice-cream" },
|
{ "key": "el-icon-hot-water" },
|
{ "key": "el-icon-water-cup" },
|
{ "key": "el-icon-coffee-cup" },
|
{ "key": "el-icon-cold-drink" },
|
{ "key": "el-icon-goblet" },
|
{ "key": "el-icon-goblet-full" },
|
{ "key": "el-icon-goblet-square" },
|
{ "key": "el-icon-goblet-square-full" },
|
{ "key": "el-icon-refrigerator" },
|
{ "key": "el-icon-grape" },
|
{ "key": "el-icon-watermelon" },
|
{ "key": "el-icon-cherry" },
|
{ "key": "el-icon-apple" },
|
{ "key": "el-icon-pear" },
|
{ "key": "el-icon-orange" },
|
{ "key": "el-icon-coffee" },
|
{ "key": "el-icon-ice-tea" },
|
{ "key": "el-icon-ice-drink" },
|
{ "key": "el-icon-milk-tea" },
|
{ "key": "el-icon-potato-strips" },
|
{ "key": "el-icon-lollipop" },
|
{ "key": "el-icon-ice-cream-square" },
|
{ "key": "el-icon-ice-cream-round" }
|
]
|
}
|
},
|
computed: {
|
iconDialogVisible: {
|
get() {
|
return this.$store.state.menu.iconDialogVisible;
|
},
|
set(value) {
|
this.$store.state.menu.iconDialogVisible = value;
|
}
|
},
|
menuForm: {
|
get() {
|
return this.$store.state.menu.menuForm;
|
},
|
set(value) {
|
this.$store.state.menu.menuForm = value;
|
}
|
}
|
},
|
methods: {
|
setClose() {
|
this.iconDialogVisible = false;
|
},
|
selectIcon(icon) {
|
this.menuForm.menuIcon = icon;
|
this.iconDialogVisible = false;
|
},
|
}
|
}
|
</script>
|
|
<style scoped>
|
#iconDialog i {
|
font-size: 30px;
|
padding: 10px;
|
margin-right: 5px;
|
margin-bottom: 5PX;
|
border: 1px solid beige;
|
transition: all 0.2s ease;
|
}
|
#iconDialog i:hover {
|
cursor: pointer;
|
transform: scale(1.1);
|
}
|
.myclass {
|
height: 400px !important;
|
overflow-y: auto;
|
}
|
</style>
|
