xiangyuan-app/src/components/basic/ImageButton.vue

<template>
  <Touchable 
    :activeOpacity="activeOpacity" 
    :touchable="touchable"
    :innerStyle="innerStyle"
    position="relative" 
    center
    @click="emit('click')"
  >
    <Image v-bind="props" :innerStyle="imageStyle" />
    <slot>
      <FlexCol center position="absolute" inset="0">
        <Text v-if="text" :text="text" v-bind="textProps" />
      </FlexCol>
    </slot>
  </Touchable>
</template>

<script setup lang="ts">
import Touchable from '../feedback/Touchable.vue';
import FlexCol from '../layout/FlexCol.vue';
import type { ImageProps } from './Image.vue';
import Image from './Image.vue';
import Text from './Text.vue';
import type { TextProps } from './Text';

const props = withDefaults(defineProps<ImageProps & {
  activeOpacity?: number;
  touchable?: boolean;
  text?: string;
  textProps?: TextProps;
  imageStyle?: object;
}>(), {
  activeOpacity: 0.7,
  touchable: true,
});

const emit = defineEmits(['click']);

</script>