<script lang="ts" setup>
|
import { CSSProperties } from 'vue'
|
import { cloneDeep } from 'lodash-es'
|
import { IconJson } from '@/components/Icon/src/data'
|
|
defineOptions({ name: 'IconSelect' })
|
|
type ParameterCSSProperties = (item?: string) => CSSProperties | undefined
|
|
const props = defineProps({
|
modelValue: {
|
require: false,
|
type: String
|
}
|
})
|
const emit = defineEmits<{ (e: 'update:modelValue', v: string) }>()
|
|
const visible = ref(false)
|
const inputValue = toRef(props, 'modelValue')
|
const iconList = ref(IconJson)
|
const icon = ref('add-location')
|
const currentActiveType = ref('ep:')
|
// 深拷贝图标数据，前端做搜索
|
const copyIconList = cloneDeep(iconList.value)
|
|
const pageSize = ref(96)
|
const currentPage = ref(1)
|
|
// 搜索条件
|
const filterValue = ref('')
|
|
const tabsList = [
|
{
|
label: 'Element Plus',
|
name: 'ep:'
|
},
|
{
|
label: 'Font Awesome 4',
|
name: 'fa:'
|
},
|
{
|
label: 'Font Awesome 5 Solid',
|
name: 'fa-solid:'
|
}
|
]
|
|
const pageList = computed(() => {
|
if (currentPage.value === 1) {
|
return copyIconList[currentActiveType.value]
|
?.filter((v) => v.includes(filterValue.value))
|
.slice(currentPage.value - 1, pageSize.value)
|
} else {
|
return copyIconList[currentActiveType.value]
|
?.filter((v) => v.includes(filterValue.value))
|
.slice(
|
pageSize.value * (currentPage.value - 1),
|
pageSize.value * (currentPage.value - 1) + pageSize.value
|
)
|
}
|
})
|
const iconCount = computed(() => {
|
return copyIconList[currentActiveType.value] == undefined
|
? 0
|
: copyIconList[currentActiveType.value].length
|
})
|
|
const iconItemStyle = computed((): ParameterCSSProperties => {
|
return (item) => {
|
if (inputValue.value === currentActiveType.value + item) {
|
return {
|
borderColor: 'var(--el-color-primary)',
|
color: 'var(--el-color-primary)'
|
}
|
}
|
}
|
})
|
|
function handleClick({ props }) {
|
currentPage.value = 1
|
currentActiveType.value = props.name
|
emit('update:modelValue', currentActiveType.value + iconList.value[currentActiveType.value][0])
|
icon.value = iconList.value[currentActiveType.value][0]
|
}
|
|
function onChangeIcon(item) {
|
icon.value = item
|
emit('update:modelValue', currentActiveType.value + item)
|
visible.value = false
|
}
|
|
function onCurrentChange(page) {
|
currentPage.value = page
|
}
|
|
watch(
|
() => {
|
return props.modelValue
|
},
|
() => {
|
if (props.modelValue && props.modelValue.indexOf(':') >= 0) {
|
currentActiveType.value = props.modelValue.substring(0, props.modelValue.indexOf(':') + 1)
|
icon.value = props.modelValue.substring(props.modelValue.indexOf(':') + 1)
|
}
|
}
|
)
|
watch(
|
() => {
|
return filterValue.value
|
},
|
() => {
|
currentPage.value = 1
|
}
|
)
|
</script>
|
|
<template>
|
<div class="selector">
|
<ElInput v-model="inputValue" @click="visible = !visible">
|
<template #append>
|
<ElPopover
|
:popper-options="{
|
placement: 'auto'
|
}"
|
:visible="visible"
|
:width="350"
|
popper-class="pure-popper"
|
trigger="click"
|
>
|
<template #reference>
|
<div
|
class="h-32px w-40px flex cursor-pointer items-center justify-center"
|
@click="visible = !visible"
|
>
|
<Icon :icon="currentActiveType + icon" />
|
</div>
|
</template>
|
|
<ElInput v-model="filterValue" class="p-2" clearable placeholder="搜索图标" />
|
<ElDivider border-style="dashed" />
|
|
<ElTabs v-model="currentActiveType" @tab-click="handleClick">
|
<ElTabPane
|
v-for="(pane, index) in tabsList"
|
:key="index"
|
:label="pane.label"
|
:name="pane.name"
|
>
|
<ElDivider border-style="dashed" class="tab-divider" />
|
<ElScrollbar height="220px">
|
<ul class="ml-2 flex flex-wrap px-2">
|
<li
|
v-for="(item, key) in pageList"
|
:key="key"
|
:style="iconItemStyle(item)"
|
:title="item"
|
class="icon-item mr-2 mt-1 w-1/10 flex cursor-pointer items-center justify-center border border-solid p-2"
|
@click="onChangeIcon(item)"
|
>
|
<Icon :icon="currentActiveType + item" />
|
</li>
|
</ul>
|
</ElScrollbar>
|
</ElTabPane>
|
</ElTabs>
|
<ElDivider border-style="dashed" />
|
|
<ElPagination
|
:current-page="currentPage"
|
:page-size="pageSize"
|
:total="iconCount"
|
background
|
class="h-10 flex items-center justify-center"
|
layout="prev, pager, next"
|
small
|
@current-change="onCurrentChange"
|
/>
|
</ElPopover>
|
</template>
|
</ElInput>
|
</div>
|
</template>
|
|
<style lang="scss" scoped>
|
.el-divider--horizontal {
|
margin: 1px auto !important;
|
}
|
|
.tab-divider.el-divider--horizontal {
|
margin: 0 !important;
|
}
|
|
.icon-item {
|
&:hover {
|
color: var(--el-color-primary);
|
border-color: var(--el-color-primary);
|
transform: scaleX(1.05);
|
transition: all 0.4s;
|
}
|
}
|
|
:deep(.el-tabs__nav-next) {
|
font-size: 15px;
|
line-height: 32px;
|
box-shadow: -5px 0 5px -6px #ccc;
|
}
|
|
:deep(.el-tabs__nav-prev) {
|
font-size: 15px;
|
line-height: 32px;
|
box-shadow: 5px 0 5px -6px #ccc;
|
}
|
|
:deep(.el-input-group__append) {
|
padding: 0;
|
}
|
|
:deep(.el-tabs__item) {
|
height: 30px;
|
font-size: 12px;
|
font-weight: normal;
|
line-height: 30px;
|
}
|
|
:deep(.el-tabs__header),
|
:deep(.el-tabs__nav-wrap) {
|
position: static;
|
margin: 0;
|
}
|
</style>
|
