ie-popup-toolbar.vue 984 B

1234567891011121314151617181920212223242526272829303132333435
  1. <template>
  2. <view class="flex items-center justify-center pt-20">
  3. <view v-if="showCancel" class="px-46 py-20 text-28 text-fore-light font-medium" @click="handleCancel">
  4. {{ cancelText }}
  5. </view>
  6. <text class="text-30 text-fore-title font-bold flex-1 text-center">{{ title }}</text>
  7. <view v-if="showConfirm" class="px-46 py-20 text-28 text-fore-title font-medium" @click="handleConfirm">
  8. {{ confirmText }}
  9. </view>
  10. </view>
  11. </template>
  12. <script lang="ts" setup>
  13. type ToolbarOption = {
  14. title: string;
  15. cancelText: string;
  16. confirmText: string;
  17. showCancel: boolean;
  18. showConfirm: boolean;
  19. }
  20. const props = withDefaults(defineProps<ToolbarOption>(), {
  21. title: '',
  22. cancelText: '取消',
  23. confirmText: '确认',
  24. showCancel: true,
  25. showConfirm: true,
  26. });
  27. const emit = defineEmits(['cancel', 'confirm']);
  28. const handleCancel = () => {
  29. emit('cancel');
  30. }
  31. const handleConfirm = () => {
  32. emit('confirm');
  33. }
  34. </script>
  35. <style lang="scss" scoped></style>