feat(typography): 添加 onSave 回调支持编辑完成时触发
- 在 Base.tsx 中新增 onSave 属性用于编辑完成后回调- 更新中英文档,添加 onSave 属性说明与示例 - 修改交互示例,展示 onSave 回调使用方式 - 当内容变更且退出编辑状态时触发 onSave 回调- 优化 editable 配置对象,支持传递 onSave 方法pull/8385/head
parent
bbb7670df1
commit
e65034e50e
|
|
@ -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);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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':
|
||||
|
|
|
|||
|
|
@ -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 | - | |
|
||||
|
||||
|
|
|
|||
|
|
@ -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 | - | |
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue