jiuyiUniapp/jiuyi2/TUIKit/components/common/Icon.vue

83 lines
1.7 KiB
Vue
Raw Normal View History

2024-12-18 15:46:27 +08:00
<!-- eslint-disable vue/multi-word-component-names -->
<template>
<div
:class="['common-icon-container', !isPC && 'common-icon-container-mobile']"
:style="{
padding: iconHotAreaSize,
}"
@click="handleImgClick"
>
<image
v-if="isApp"
class="common-icon"
:src="props.file"
:style="{ width: iconWidth, height: iconHeight }"
/>
<img
v-else
class="common-icon"
:src="props.file"
:style="{ width: iconWidth, height: iconHeight }"
>
</div>
</template>
<script setup lang="ts">
import { withDefaults, computed } from '../../adapter-vue';
import { isApp, isPC } from '../../utils/env';
interface IProps {
file: string;
size?: string;
width?: string;
height?: string;
hotAreaSize?: number | string;
}
interface IEmits {
(key: 'onClick', e: Event): void;
}
const emits = defineEmits<IEmits>();
const props = withDefaults(defineProps<IProps>(), {
file: '',
width: '20px',
height: '20px',
});
const iconHotAreaSize = computed<undefined | string>(() => {
if (!props.hotAreaSize) {
return undefined;
}
if (isNaN(Number(props.hotAreaSize))) {
return String(props.hotAreaSize);
}
return `${props.hotAreaSize}px`;
});
const iconWidth = computed(() => {
return props.size ? props.size : props.width;
});
const iconHeight = computed(() => {
return props.size ? props.size : props.height;
});
const handleImgClick = (e: Event) => {
emits('onClick', e);
};
</script>
<style lang="scss" scoped>
.common-icon-container {
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.common-icon-container-mobile{
cursor: none;
}
</style>