1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586 |
- <template>
- <div :class="prefixCls">
- <a-tabs v-model="currentTab" @change="handleTabChange">
- <a-tab-pane v-for="v in icons" :tab="v.title" :key="v.key">
- <ul>
- <li v-for="(icon, key) in v.icons" :key="`${v.key}-${key}`" :class="{ 'active': selectedIcon==icon }" @click="handleSelectedIcon(icon)" >
- <a-icon :type="icon" :style="{ fontSize: '36px' }" />
- </li>
- </ul>
- </a-tab-pane>
- </a-tabs>
- </div>
- </template>
- <script>
- import icons from './icons'
- export default {
- name: 'IconSelect',
- props: {
- prefixCls: {
- type: String,
- default: 'ant-pro-icon-selector'
- },
- // eslint-disable-next-line
- value: {
- type: String
- }
- },
- data () {
- return {
- selectedIcon: this.value || '',
- currentTab: 'directional',
- icons
- }
- },
- watch: {
- value (val) {
- this.selectedIcon = val
- this.autoSwitchTab()
- }
- },
- created () {
- if (this.value) {
- this.autoSwitchTab()
- }
- },
- methods: {
- handleSelectedIcon (icon) {
- this.selectedIcon = icon
- this.$emit('change', icon)
- },
- handleTabChange (activeKey) {
- this.currentTab = activeKey
- },
- autoSwitchTab () {
- icons.some(item => item.icons.some(icon => icon === this.value) && (this.currentTab = item.key))
- }
- }
- }
- </script>
- <style lang="less" scoped>
- @import "../index.less";
- ul{
- list-style: none;
- padding: 0;
- overflow-y: scroll;
- height: 250px;
- li{
- display: inline-block;
- padding: @padding-sm;
- margin: 3px 0;
- border-radius: @border-radius-base;
- &:hover, &.active{
- // box-shadow: 0px 0px 5px 2px @primary-color;
- cursor: pointer;
- color: @white;
- background-color: @primary-color;
- }
- }
- }
- </style>
|