diff --git a/packages/vlossom/src/components/vs-confirmation/VsConfirm.scss b/packages/vlossom/src/components/vs-confirmation/VsConfirm.scss new file mode 100644 index 00000000..78b796ad --- /dev/null +++ b/packages/vlossom/src/components/vs-confirmation/VsConfirm.scss @@ -0,0 +1,20 @@ +.vs-confirm { + display: flex; + height: 100%; + + .vs-confirm-wrap { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + flex: 1; + padding-top: 2.4rem; + } + + .vs-confirm-buttons { + margin-top: 3.6rem; + display: flex; + align-items: center; + justify-content: center; + } +} diff --git a/packages/vlossom/src/components/vs-confirmation/VsConfirm.vue b/packages/vlossom/src/components/vs-confirmation/VsConfirm.vue index c1b32ce4..1cebf2a7 100644 --- a/packages/vlossom/src/components/vs-confirmation/VsConfirm.vue +++ b/packages/vlossom/src/components/vs-confirmation/VsConfirm.vue @@ -3,8 +3,12 @@
- {{ okText }} - {{ cancelText }} + + {{ okText }} + + + {{ cancelText }} +
@@ -18,6 +22,7 @@ import { useStyleSet } from '@/composables'; import VsButton from '@/components/vs-button/VsButton.vue'; import type { VsConfirmStyleSet } from './types'; +import type { VsButtonStyleSet } from '@/components/vs-button/types'; const name = VsComponent.VsConfirm; export default defineComponent({ @@ -32,6 +37,10 @@ export default defineComponent({ const { styleSet } = toRefs(props); const { plainStyleSet } = useStyleSet(name, styleSet); + function getButtonStyleSet(buttonStyleSet: VsButtonStyleSet = {}) { + return { width: '12rem', ...buttonStyleSet }; + } + function ok() { const id = store.overlay.getLastOverlayId(); store.overlay.run(id, VS_CONFIRM_OK); @@ -42,30 +51,9 @@ export default defineComponent({ store.overlay.run(id, VS_CONFIRM_CANCEL); } - return { plainStyleSet, ok, cancel }; + return { plainStyleSet, getButtonStyleSet, ok, cancel }; }, }); - +