xiangyuan-app/src/common/components/FrameButton.vue

<template>
  <BackgroundImageButton 
    :backgroundImage="image"
    :backgroundCutBorder="backgroundCutBorderSize"
    :backgroundCutBorderSize="backgroundCutBorderSize"
    :padding="padding"
    :width="width"
    :touchable="!loading && touchable"
    center
    gap="gap.md"
    @click="emit('click')"
  >
    <ActivityIndicator v-if="loading" :size="iconSize" :color="primary ? 'white' : 'text.content'" />
    <Icon v-if="icon" :icon="icon" :size="iconSize" :color="primary ? 'white' : 'text.content'" />
    <Text :text="text" :wrap="false" fontConfig="lightTitle" :fontSize="fontSize" :color="primary ? 'white' : 'text.content'" />
  </BackgroundImageButton>
</template>

<script setup lang="ts">
import ActivityIndicator from '@/components/basic/ActivityIndicator.vue';
import BackgroundImageButton from '@/components/basic/BackgroundImageButton.vue';
import Icon from '@/components/basic/Icon.vue';
import Text from '@/components/basic/Text.vue';
import { computed } from 'vue';

const props = withDefaults(defineProps<{
  text: string;
  primary?: boolean;
  size?: 'large' | 'midium' | 'small';
  width?: string|number;
  innerStyle?: object;
  loading?: boolean;
  touchable?: boolean;
  icon?: string;
}>(), {
  text: '去发布',
  primary: false,
  touchable: true,
  size: 'large',
}); 

const padding = computed(() => {
  switch (props.size) {
    case 'large': return [20, 36];
    case 'midium': return [18, 20];
    case 'small': return [15, 18];
  }
});
const backgroundCutBorderSize = computed(() => {
  switch (props.size) {
    case 'large': return 32;
    case 'midium': return 28;
    case 'small': return 18;
  }
});
const fontSize = computed(() => {
  switch (props.size) {
    case 'large': return 36;
    case 'midium': return 28;
    case 'small': return 26;
  }
});
const iconSize = computed(() => {
  switch (props.size) {
    case 'large': return 32;
    case 'midium': return 26;
    case 'small': return 26;
  }
});
const image =  computed(() => {
  if (props.size === 'large' || props.size === 'midium') {
    return props.primary ? 
      'https://xy.wenlvti.net/app_static/images/FrameButtonPrimary.png' : 
      'https://xy.wenlvti.net/app_static/images/FrameButton.png';
  } else {
    return props.primary ? 
      'https://xy.wenlvti.net/app_static/images/FrameButtonPrimarySmall.png' : 
      'https://xy.wenlvti.net/app_static/images/FrameButtonSmall.png';
  }
});

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

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