58 lines
1.7 KiB
Vue
58 lines
1.7 KiB
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> |