1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283 |
- <!-- 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>
|