图标移动端选择器

pull/84/head
每天一点 2023-02-05 01:56:32 +08:00
parent fdd7d4e29e
commit 45e2f2528f
1 changed files with 143 additions and 0 deletions

View File

@ -0,0 +1,143 @@
<template>
<a-modal
v-model:visible="visible"
title="移动端图标选择"
:mask-closable="false"
:width="800"
:destroy-on-close="true"
:footer="null"
@cancel="onCancel"
>
<a-tabs v-model:activeKey="activeKey" tab-position="left" size="small" @change="paneChange">
<a-tab-pane v-for="item in iconData" :key="item.key" :tab="item.name">
<div v-if="item.iconItem.length > 1" class="xn-icon-select-radio">
<a-radio-group v-model:value="iconItemDefault" @change="radioGroupChange">
<a-radio-button v-for="iconItem in item.iconItem" :key="iconItem.key" :value="iconItem.key">{{
iconItem.name
}}</a-radio-button>
</a-radio-group>
</div>
<div :key="iconItemIns" v-for="iconItemIns in item.iconItem">
<div v-if="iconItemIns.key === iconItemDefault" class="xn-icon-select-list">
<ul>
<li
v-for="icon in iconItemIns.item"
:key="icon"
:class="icon === modelValue ? 'active' : ''"
@click="selectIcon(icon.font_class)"
>
<span class="snowy xn-icons" :class="icon.font_class" ></span>
</li>
</ul>
</div>
</div>
</a-tab-pane>
</a-tabs>
</a-modal>
</template>
<script>
import config from '@/assets/icons/mobile'
export default {
data() {
return {
visible: false,
iconData: [],
modelValue: '',
activeKey: 'default',
iconItemDefault: 'default',
}
},
mounted() {
this.iconData.push(...config.icons)
},
methods: {
//
showIconModal(value) {
this.visible = true
this.defaultSetting(value)
},
//
defaultSetting(value) {
if (value) {
this.modelValue = value
//
if (value.indexOf('-outlined') > -1 || value.indexOf('-filled') > -1 || value.indexOf('-two-tone') > -1) {
this.activeKey = 'default'
if (value.indexOf('-two-tone') > -1) {
this.iconItemDefault = 'twotone'
} else if (value.indexOf('-filled') > -1) {
this.iconItemDefault = 'filled'
}
} else if (value.indexOf('-extend') > -1) {
//
this.activeKey = 'extend'
// ,
// this.iconItemDefault = 'json'
}
}
},
//
paneChange(e) {
if (e.indexOf('default') === -1) {
this.iconItemDefault = 'default'
}
},
// icon
radioGroupChange(e) {
this.iconItemDefault = e.target.value
},
//
selectIcon(value) {
this.defaultValue = value
this.visible = false
// eslint-disable-next-line vue/require-explicit-emits
this.$emit('iconCallBack', this.defaultValue)
},
onCancel() {
this.visible = false
}
}
}
</script>
<style lang="less" scoped>
.xn-icon-select-radio {
padding-left: 5px;
padding-bottom: 10px;
}
.xn-icons {
font-size: 26px;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.xn-icon-select-list {
height: 360px;
overflow: auto;
}
.xn-icon-select-list ul {
li {
display: inline-block;
width: 60px;
height: 60px;
padding: 18px;
margin: 5px;
border-radius: 2px;
vertical-align: top;
box-shadow: 0 0 0 1px var(--border-color-split);
transition: all 0.1s;
position: relative;
&:hover,
&.active {
cursor: pointer;
color: #ffffff;
background-color: var(--primary-color);
}
}
}
</style>