@tntx/ellipsis v1.0.13

Ellipsis 省略号

根据限宽截断文本并显示省略号，进而添加 Tooltip/Popover 悬停效果以显示完整文本。旨在解决根据字符长度截断时不能很好的兼容中英文的问题。

安装、发布与源码

安装：npm i @tntx/ellipsis
发布：https://www.npmjs.com/package/@tntx/ellipsis
源码：https://github.com/YuDGang/ellipsis-react/tree/master/src/components/Ellipsis

更新日志

• 1.0.13 修复了加载完成后、修改数据会导致Tooltip失效的问题，修复了动画闪动
• 1.0.12 上一版本中误删了原有的对自闭标签写法的支持，现已恢复
• 1.0.11 新增功能，前缀、后缀
• 1.0.10 提升兼容性；
• 1.0.9 优化svg引入方式，消除columns.fixed中的闪动；
• 1.0.2 新增功能，复制按钮；
• 1.0.1 新增功能，支持多行；
• 1.0.0 以CSS宽度溢出驱动截断的Ellipsis发布，支持单行;
  ...

API

兼容所有 Ant3 Tooltip/Popover 的参数；
您可以直接使用这些参数以配置溢出后的 Tooltip/Popover
此处仅列举笔者认为 Ant3 Tooltip/Popover 最常用的参数，完整参数请参考官方文档 | 参数 | 说明 | 类型 | 默认值 | | - | - | - | - | | placement | 气泡框位置，可选 top left right bottom topLeft topRight bottomLeft bottomRight leftTop leftBottom rightTop rightBottom | string | top | arrowPointAtCenter | 箭头是否指向目标元素中心 | boolean | false | autoAdjustOverflow | 气泡被遮挡时自动调整位置 | boolean | true
| ... |

除了支持 Ant3 Tooltip/Popover 参数以外，组件自带了一些实用的额外API：

其他参数

何时使用

需要使文本元素在宽度溢出时显示省略号并添加悬停效果（Tooltip/Popover）时。

如何使用

• 支持 Popover 和 Tooltip 两种悬停效果，有什么区别?；
• 当选用 Popover 时，将需要展示的内容放在 content 里（如例1），并添加 Popover 属性；
• 当选用 Tooltip 时，将需要展示的内容放在 title （如例2）或包含在标签里（如例3）；

• 为什么不使用统一的属性传递展示的内容？ 因为 antd3 中的 Popover 和 Tooltip 的属性是有区别的， Popover 用 title 作卡片标题， content 作卡片内容，而 Tooltip 仅用 title 作卡片内容（形似 Html 的 title 属性），不支持标题功能；具体请参考 Ant3-Popover 和 Ant3-Tooltip
• 相应的，你可以直接使用Popover和Tooltip的API（如例4）；转换一下思维，你可以把它当作带有省略号、空文本、复制按钮 的强化版 Popover/Tooltip 使用；
• 利用好 emptyText 属性，在 Table 中直接作为 render 中的父元素（例6）；

• 根据需求添加下列选填项
• 添加 copyable 属性后，会在右侧添加一个复制按钮，
• 添加 lines 指定行数，仅在需要多行功能时使用，
• 添加 widthLimit 属性以增加限制宽度，若不添加则会自适应父元素宽度，
• 添加 emptyText 指定数据为空时的文本，例如 emptyText="- -"，则会在空数据时显示"- -"
• 添加 prefix/suffix 指定前/后缀

代码演示

import Ellipsis from "@tntx/ellipsis";

export default () => {
  <>
		{/* 例 1 */}
		<Ellipsis
			Popover
			widthLimit={100}
			content="你看我有省略号吗？"
		/>
		
		<div style={{width: 100}}>

			{/* 例 2 */}
			<Ellipsis title="你看我有省略号吗？"/>

			{/* 例 3 */}
			<Ellipsis>
				你看我有省略号吗？
			</Ellipsis>
			
			{/* 例 4 */}
			<Ellipsis
				placement="topLeft"
			>
				你看我有省略号吗？
			</Ellipsis>
			{/* 例 5 添加前、后缀*/}
			<Ellipsis
				suffix={
					<Tag color="#f50">#f50</Tag>
				}
				preffix="*"
			>
			</Ellipsis>
		</div>
	</>
};


{/* 例 6 */}
...
const columns = [
	{
		title: "详细内容",
		render: record => <Ellipsis
			title={record.description}
			emptyText="- -"	// 空数据时显示“- -”
			lines={3}
			copyable
		/>
	}
	...
]
...