Merge e65034e50e into 2cda7bde09

components/typography/Base.tsx

@@ -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);
     }

components/typography/demo/interactive.vue

@@ -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':

components/typography/index.en-US.md

@@ -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<`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 state，Contains 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 | - |  |
 

components/typography/index.zh-CN.md

@@ -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<`icon`\|`text`> | \[`icon`] |  |
 | onCancel | 按 ESC 退出编辑状态时触发 | function | - |  |
 | onChange | 文本域编辑时触发 | function(event) | - |  |
+| onSave | 文本域编辑结束时触发，包含文本域变回文字 | function(event) | - |  |
 | onEnd | 按 ENTER 结束编辑状态时触发 | function | - |  |
 | onStart | 进入编辑中状态时触发 | function | - |  |