ant-design-vue/components/modal/demo/locale.vue
Cherry7 9be58078d2
Refactor(demo): change options to composition api (#6499)
* feat(demo): A-B

* feat(demo): update B-checkbox

* feat(demo): update CheckBox -DatePicker

* feat(demo): update DatePicker - Form

* feat(demo): update Form - List

* feat(demo): update  List-pagination

* feat(demo): update  List - skeleton

* feat(demo): update  skeleton - switch

* feat(demo): update  skeleton - switch

* feat(demo): update   switch - upload

* feat(demo): update  watermark

* fix(demo): del hashId
2023-04-28 14:08:21 +08:00

53 lines
1.1 KiB
Vue

<docs>
---
order: 5
title:
zh-CN: 国际化
en-US: Internationalization
---
## zh-CN
设置 `okText` `cancelText` 以自定义按钮文字
## en-US
To customize the text of the buttons, you need to set `okText` and `cancelText` props.
</docs>
<template>
<div>
<a-button type="primary" @click="showModal">Modal</a-button>
<a-button @click="confirm">Confirm</a-button>
<a-modal v-model:open="open" title="Modal" ok-text="确认" cancel-text="取消" @ok="hideModal">
<p>Bla bla ...</p>
<p>Bla bla ...</p>
<p>Bla bla ...</p>
</a-modal>
</div>
</template>
<script lang="ts" setup>
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import { ref, createVNode } from 'vue';
import { Modal } from 'ant-design-vue';
const open = ref<boolean>(false);
const showModal = () => {
open.value = true;
};
const hideModal = () => {
open.value = false;
};
const confirm = () => {
Modal.confirm({
title: 'Confirm',
icon: createVNode(ExclamationCircleOutlined),
content: 'Bla bla ...',
okText: '确认',
cancelText: '取消',
});
};
</script>