feat(typography): 添加 onSave 回调支持编辑完成时触发

- 在 Base.tsx 中新增 onSave 属性用于编辑完成后回调- 更新中英文档,添加 onSave 属性说明与示例
- 修改交互示例,展示 onSave 回调使用方式
- 当内容变更且退出编辑状态时触发 onSave 回调- 优化 editable 配置对象,支持传递 onSave 方法
pull/8385/head
lijh 2025-10-20 10:41:22 +08:00
parent bbb7670df1
commit e65034e50e
4 changed files with 14 additions and 2 deletions

View File

@ -49,6 +49,7 @@ export interface EditConfig {
tooltip?: boolean;
onStart?: () => void;
onChange?: (value: string) => void;
onSave?: (value: string) => void;
onCancel?: () => void;
onEnd?: () => void;
maxlength?: number;
@ -219,6 +220,11 @@ const Base = defineComponent({
}
function onEditChange(value: string) {
const { onSave } = editable.value;
if (value !== props.content) {
emit('save', value);
onSave?.(value);
}
onContentChange(value);
triggerEdit(false);
}

View File

@ -15,7 +15,7 @@ title:
Provide additional interactive capacity of editable and copyable.
</docs>
<template>
<a-typography-paragraph v-model:content="editableStr" editable />
<a-typography-paragraph v-model:content="editableStr" :editable="{ onSave: saveText }" />
<a-typography-paragraph v-model:content="customIconStr" editable>
<template #editableIcon><HighlightOutlined /></template>
<template #editableTooltip>click to edit text</template>
@ -85,7 +85,9 @@ watch(editableStr, () => {
console.log('editableStr', editableStr.value);
});
const chooseTrigger = ref<('icon' | 'text')[]>(['icon']);
const saveText = (value: string) => {
console.log('saveText', value);
};
const radioToState = (input: string): ('icon' | 'text')[] => {
switch (input) {
case 'text':

View File

@ -103,6 +103,7 @@ Basic text writing, including headings, body text, lists, and more.
autoSize: boolean | { minRows: number, maxRows: number },
onStart: function,
onChange: function(string),
onSave: function(string),
onCancel: function,
onEnd: function,
triggerType: ('icon' | 'text')[],
@ -118,6 +119,7 @@ Basic text writing, including headings, body text, lists, and more.
| triggerType | Edit mode trigger - icon, text or both (not specifying icon as trigger hides it) | Array&lt;`icon`\|`text`> | \[`icon`] | |
| onCancel | Called when type ESC to exit editable state | function | - | |
| onChange | Called when input at textarea | function(event) | - | |
| onSave | Called when exit editable stateContains text fields that are converted back to text | function(event) | - | |
| onEnd | Called when type ENTER to exit editable state | function | - | |
| onStart | Called when enter editable state | function | - | |

View File

@ -104,6 +104,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*LT2jR41Uj2EAAA
autoSize: boolean | { minRows: number, maxRows: number },
onStart: function,
onChange: function(string),
onSave: function(string),
onCancel: function,
onEnd: function,
triggerType: ('icon' | 'text')[],
@ -119,6 +120,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*LT2jR41Uj2EAAA
| triggerType | 编辑模式触发器类型,图标、文本或者两者都设置(不设置图标作为触发器时它会隐藏) | Array&lt;`icon`\|`text`> | \[`icon`] | |
| onCancel | 按 ESC 退出编辑状态时触发 | function | - | |
| onChange | 文本域编辑时触发 | function(event) | - | |
| onSave | 文本域编辑结束时触发,包含文本域变回文字 | function(event) | - | |
| onEnd | 按 ENTER 结束编辑状态时触发 | function | - | |
| onStart | 进入编辑中状态时触发 | function | - | |