ykt-wxapp/components/button-footer.vue

<template>
  <view v-if="showCancel || showConfirm" class="relative flex px-15 py-12 bg-white text-center"
    :class="showShadow ? 'shadow-up' : ''">
    <view v-if="showCancel && customCancel" class="relative" :style="widthStyle">
      <slot name="cancel"></slot>
    </view>
    <view v-else-if="showCancel" class="py-10 text-base border-primary rounded text-primary rounded" :style="widthStyle"
      @click="cancel()">
      {{ cancelText }}
    </view>
    <view v-if="showConfirm && customConfirm" :class="showCancel && showConfirm ? 'ml-15' : ''" :style="widthStyle">
      <slot name="confirm"></slot>
    </view>
    <view v-else-if="showConfirm" class="py-10 text-base border-primary bg-primary text-white rounded"
      :class="showCancel && showConfirm ? 'ml-15' : ''" :style="widthStyle" @click="confirm()">
      {{ confirmText }}
    </view>
  </view>
</template>
<script setup>
import { computed, useSlots, ref } from "vue";

import useDebounce from '@/utils/useDebounce';

const emits = defineEmits(['cancel', 'confirm']);
const props = defineProps({
  showShadow: {
    type: Boolean,
    default: true
  },
  cancelText: {
    type: String,
    default: '取消'
  },
  confirmText: {
    type: String,
    default: '确认'
  },
  showCancel: {
    type: Boolean,
    default: true
  },
  showConfirm: {
    type: Boolean,
    default: true
  }
})

const cancel = useDebounce(() => emits('cancel'));
const confirm = useDebounce(() => emits('confirm'));
const slots = useSlots();
const customCancel = computed(() => !!slots.cancel);
const customConfirm = computed(() => !!slots.confirm);
const widthStyle = computed(() => {
  const val = [props.showCancel, props.showConfirm].filter(Boolean);
  return `width: ${100 / (val.length || 1)}%`
})
</script>