minnan/src/components/feedback/ShareSheetButtons.vue

<template>
  <FlexRow position="relative" align="center" wrap>
    <IconButton
      v-for="(item, k) in items"
      :key="k"
      :icon="getDefaultIconNames(item.icon)"
      :disabled="item.disabled"
      :color="item.color"
      :size="iconSize"
      :backgroundColor="item.backgroundColor"
      direction="column"
      justify="center"
      align="center"
      :buttonStyle="itemStyle"
      @click="emit('click', item)"
    >
      <Text v-if="item.title" :innerStyle="itemTextStyle" :text="item.title" />
    </IconButton>
  </FlexRow>
</template>

<script setup lang="ts">
import type { ShareSheetItem } from './ShareSheet.vue';
import IconMobile from '../images/share_mobile.png';
import IconQQ from '../images/share_qq.png';
import IconSina from '../images/share_sina.png';
import IconWechat from '../images/share_wechart.png';
import IconLink from '../images/share_sheet_link.png';
import IconPoster from '../images/share_sheet_poster.png';
import IconQrcode from '../images/share_sheet_qrcode.png';
import IconWechatMoments from '../images/share_sheet_wechat_moments.png';
import IconWechatAppQrcode from '../images/share_sheet_weapp_qrcode.png';
import type { ViewStyle, TextStyle } from '../theme/ThemeDefine';
import Text from '../basic/Text.vue';
import IconButton from '../basic/IconButton.vue';
import FlexRow from '../layout/FlexRow.vue';

const props = defineProps<{
  items: ShareSheetItem[];
  iconSize?: number|string;
  itemStyle?: ViewStyle;
  itemTextStyle?: TextStyle;
}>();
const emit = defineEmits<{
  (e: 'click', item: ShareSheetItem): void;
}>();

function getDefaultIconNames(name: string|undefined) {
  switch (name) {
    case 'mobile': return IconMobile;
    case 'qq': return IconQQ;
    case 'wechat-moments': return IconWechatMoments;
    case 'sina': return IconSina;
    case 'wechat': return IconWechat;
    case 'link': return IconLink;
    case 'poster': return IconPoster;
    case 'qrcode': return IconQrcode;
    case 'wechat-app-qrcode': return IconWechatAppQrcode;
  }
  return name;
}

defineOptions({
  options: {
    virtualHost: true,
  }
})
</script>