IconSelector.vue 1.8 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586
  1. <template>
  2. <div :class="prefixCls">
  3. <a-tabs v-model="currentTab" @change="handleTabChange">
  4. <a-tab-pane v-for="v in icons" :tab="v.title" :key="v.key">
  5. <ul>
  6. <li v-for="(icon, key) in v.icons" :key="`${v.key}-${key}`" :class="{ 'active': selectedIcon==icon }" @click="handleSelectedIcon(icon)" >
  7. <a-icon :type="icon" :style="{ fontSize: '36px' }" />
  8. </li>
  9. </ul>
  10. </a-tab-pane>
  11. </a-tabs>
  12. </div>
  13. </template>
  14. <script>
  15. import icons from './icons'
  16. export default {
  17. name: 'IconSelect',
  18. props: {
  19. prefixCls: {
  20. type: String,
  21. default: 'ant-pro-icon-selector'
  22. },
  23. // eslint-disable-next-line
  24. value: {
  25. type: String
  26. }
  27. },
  28. data () {
  29. return {
  30. selectedIcon: this.value || '',
  31. currentTab: 'directional',
  32. icons
  33. }
  34. },
  35. watch: {
  36. value (val) {
  37. this.selectedIcon = val
  38. this.autoSwitchTab()
  39. }
  40. },
  41. created () {
  42. if (this.value) {
  43. this.autoSwitchTab()
  44. }
  45. },
  46. methods: {
  47. handleSelectedIcon (icon) {
  48. this.selectedIcon = icon
  49. this.$emit('change', icon)
  50. },
  51. handleTabChange (activeKey) {
  52. this.currentTab = activeKey
  53. },
  54. autoSwitchTab () {
  55. icons.some(item => item.icons.some(icon => icon === this.value) && (this.currentTab = item.key))
  56. }
  57. }
  58. }
  59. </script>
  60. <style lang="less" scoped>
  61. @import "../index.less";
  62. ul{
  63. list-style: none;
  64. padding: 0;
  65. overflow-y: scroll;
  66. height: 250px;
  67. li{
  68. display: inline-block;
  69. padding: @padding-sm;
  70. margin: 3px 0;
  71. border-radius: @border-radius-base;
  72. &:hover, &.active{
  73. // box-shadow: 0px 0px 5px 2px @primary-color;
  74. cursor: pointer;
  75. color: @white;
  76. background-color: @primary-color;
  77. }
  78. }
  79. }
  80. </style>