消息

TUIKit/components/common/Icon.vue

@@ -0,0 +1,82 @@
+<!-- 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>