88 lines
2.2 KiB
Vue
88 lines
2.2 KiB
Vue
<template>
|
|
<div class="my-icons">
|
|
<img :src="icon" alt="" class="icon" />
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref } from 'vue'
|
|
import arrowDownIcon from '@/assets/imgs/arrow_down.png'
|
|
import closeIcon from '@/assets/imgs/close.png'
|
|
import hairIcon from '@/assets/imgs/hair_upload.png'
|
|
import multipleBarIcon from '@/assets/imgs/multiple.png'
|
|
import multipleActivatedBarIcon from '@/assets/imgs/multipleActivated.png'
|
|
import noSelectedIcon from '@/assets/imgs/noSelected.png'
|
|
import personIcon from '@/assets/imgs/person.png'
|
|
import searchIcon from '@/assets/imgs/search.png'
|
|
import selectedIcon from '@/assets/imgs/selected.png'
|
|
import singleBarIcon from '@/assets/imgs/single.png'
|
|
import singleActivatedBarIcon from '@/assets/imgs/singleActivated.png'
|
|
import uploadIcon from '@/assets/imgs/upload.png'
|
|
import uploadEnIcon from '@/assets/imgs/uploadEn.png'
|
|
import videoPlayIcon from '@/assets/imgs/video_play.png'
|
|
|
|
import i18n from '@/i18n'
|
|
|
|
const { locale } = i18n.global
|
|
|
|
type IProps = {
|
|
type:
|
|
| 'single'
|
|
| 'singleActivated'
|
|
| 'multiple'
|
|
| 'multipleActivated'
|
|
| 'arrow'
|
|
| 'preson'
|
|
| 'selected'
|
|
| 'noSelected'
|
|
| 'close'
|
|
| 'video'
|
|
| 'upload'
|
|
| 'search'
|
|
size?: number
|
|
cursor?: string
|
|
}
|
|
|
|
const props = defineProps<IProps>()
|
|
const { type, size, cursor = 'default' } = toRefs(props)
|
|
|
|
const mapsRef = ref(
|
|
new Map([
|
|
['single', singleBarIcon],
|
|
['singleActivated', singleActivatedBarIcon],
|
|
['multiple', multipleBarIcon],
|
|
['multipleActivated', multipleActivatedBarIcon],
|
|
['arrow', arrowDownIcon],
|
|
['preson', personIcon],
|
|
['selected', selectedIcon],
|
|
['noSelected', noSelectedIcon],
|
|
['close', closeIcon],
|
|
['video', videoPlayIcon],
|
|
['upload', uploadIcon],
|
|
['search', searchIcon],
|
|
['hair', hairIcon]
|
|
])
|
|
)
|
|
|
|
watchEffect(() => {
|
|
if (props.type === 'upload') {
|
|
mapsRef.value.set('upload', locale.value == 'zh' ? uploadIcon : uploadEnIcon)
|
|
}
|
|
})
|
|
|
|
const icon = computed(() => mapsRef.value.get(type.value))
|
|
|
|
const height = `${size.value || 15}px`
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.my-icons {
|
|
display: inline;
|
|
|
|
.icon {
|
|
height: v-bind(height);
|
|
cursor: v-bind(cursor);
|
|
}
|
|
}
|
|
</style>
|