github
/
ant-design-vue
mirror of https://github.com/vueComponent/ant-design-vue
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

refactor: typography

pull/4134/head
tanjinzhou 2021-05-28 13:42:22 +08:00
parent c8898828d6
commit b68bb81652
2 changed files with 17 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
components/typography/Base.tsx
View File

@ -17,7 +17,6 @@ import EditOutlined from '@ant-design/icons-vue/EditOutlined';
import { import {
defineComponent, defineComponent,
VNodeTypes, VNodeTypes,
VNode,
reactive, reactive,
ref, ref,
onMounted, onMounted,
@ -170,14 +169,6 @@ const Base = defineComponent<InternalBlockProps>({
} }
}); });
function saveTypographyRef(node: VNode) {
contentRef.value = node;
}
function saveEditIconRef(node: VNode) {
editIcon.value = node;
}
function getChildrenText(): string { function getChildrenText(): string {
return props.ellipsis || props.editable ? props.content : contentRef.value?.$el?.innerText; return props.ellipsis || props.editable ? props.content : contentRef.value?.$el?.innerText;
} }
@ -208,6 +199,7 @@ const Base = defineComponent<InternalBlockProps>({
} }
function onEditCancel() { function onEditCancel() {
editable.value.onCancel?.();
triggerEdit(false); triggerEdit(false);
} }
@ -375,7 +367,7 @@ const Base = defineComponent<InternalBlockProps>({
return ( return (
<Tooltip key="edit" title={tooltip === false ? '' : title}> <Tooltip key="edit" title={tooltip === false ? '' : title}>
<TransButton <TransButton
ref={saveEditIconRef} ref={editIcon}
class={`${prefixCls.value}-edit`} class={`${prefixCls.value}-edit`}
onClick={onEditClick} onClick={onEditClick}
aria-label={ariaLabel} aria-label={ariaLabel}
@ -418,7 +410,7 @@ const Base = defineComponent<InternalBlockProps>({
function renderEditInput() { function renderEditInput() {
const { class: className, style } = attrs; const { class: className, style } = attrs;
const { maxlength, autoSize } = editable.value; const { maxlength, autoSize, onEnd } = editable.value;
return ( return (
<Editable <Editable
@ -432,6 +424,7 @@ const Base = defineComponent<InternalBlockProps>({
onSave={onEditChange} onSave={onEditChange}
onChange={onContentChange} onChange={onContentChange}
onCancel={onEditCancel} onCancel={onEditCancel}
onEnd={onEnd}
/> />
); );
} }
@ -529,13 +522,16 @@ const Base = defineComponent<InternalBlockProps>({
return ( return (
<ResizeObserver onResize={resizeOnNextFrame} disabled={!rows}> <ResizeObserver onResize={resizeOnNextFrame} disabled={!rows}>
<Typography <Typography
ref={saveTypographyRef} ref={contentRef}
class={[ class={[
{ [`${prefixCls.value}-${type}`]: type }, {
{ [`${prefixCls.value}-disabled`]: disabled }, [`${prefixCls.value}-${type}`]: type,
{ [`${prefixCls.value}-ellipsis`]: rows }, [`${prefixCls.value}-disabled`]: disabled,
{ [`${prefixCls.value}-ellipsis-single-line`]: cssTextOverflow }, [`${prefixCls.value}-ellipsis`]: rows,
{ [`${prefixCls.value}-ellipsis-multiple-line`]: cssLineClamp }, [`${prefixCls.value}-single-line`]: rows === 1,
[`${prefixCls.value}-ellipsis-single-line`]: cssTextOverflow,
[`${prefixCls.value}-ellipsis-multiple-line`]: cssLineClamp,
},
className, className,
]} ]}
style={{ style={{

5
components/typography/style/index.less
View File

@ -259,9 +259,12 @@
} }
// ============ Ellipsis ============ // ============ Ellipsis ============
&-single-line {
white-space: nowrap;
}
&-ellipsis-single-line { &-ellipsis-single-line {
overflow: hidden; overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
// https://blog.csdn.net/iefreer/article/details/50421025 // https://blog.csdn.net/iefreer/article/details/50421025