dz-app/components/mx-bottom-buttons/mx-bottom-buttons.vue

<template>
    <view v-if="left||right" class="fx-row gap-30" :class="containerClass">
        <uv-button v-if="left" :text="left" :type="leftType" :icon="leftIcon" :icon-color="leftType" plain
                   v-bind="buttonStyle" @click="$emit('left')"/>
        <uv-button v-if="right" :text="right" :type="rightType" :icon="rightIcon" icon-color="white"
                   :loading="loading" v-bind="buttonStyle" @click="$emit('right')"/>
    </view>
</template>

<script setup>
import {computed} from 'vue';
import {createPropDefine} from "@/utils";

const props = defineProps({
    // left 和 right 必须提供值才会显示
    left: createPropDefine('取消'),
    leftIcon: createPropDefine(undefined),
    right: createPropDefine('保存'),
    rightIcon: createPropDefine(undefined),
    leftType: createPropDefine('error'),
    rightType: createPropDefine('primary'),
    loading: createPropDefine(false, Boolean)
})
defineEmits(['left', 'right'])

const single = computed(() => !props.left || !props.right)
const buttonStyle = computed(() => ({
    customStyle: {
        height: '44px',
    },
    shape: 'circle',
    class: single.value ? '!w-1/2' : '!flex-1'
}))
const containerClass = computed(() => single.value ? 'fx-cen-cen' : 'fx-bet-cen')
</script>

<style scoped>

</style>