cashier_app/components/my-components/my-bottom-btn-group.vue

50 lines
947 B
Vue

<template>
<view>
<view class="zhanwei" :class="[direction == 'column' ? 'zhanwei1' : '']"></view>
<view
class="fixed-bottom u-flex gap-20"
:class="[direction == 'column' ? 'u-flex-column' : '']"
>
<view class="u-flex-1">
<my-button type="primary" @click="save" shape="circle">
保存
</my-button>
</view>
<view class="u-flex-1">
<my-button bgColor="#fff" type="default" @click="cancel" shape="circle">
取消
</my-button>
</view>
</view>
</view>
</template>
<script setup>
const emit = defineEmits(["save", "cancel"]);
const props = defineProps({
//方向 row横向布局 column 纵向布局
direction: {
type: String,
default: "row",
},
});
function save() {
emit("save");
}
function cancel() {
emit("cancel");
}
</script>
<style lang="scss">
.zhanwei {
height: 180rpx;
}
.zhanwei1{
height: 240rpx;
}
</style>