@kne/react-clamp

react-clamp

描述

处理文本省略号

安装

npm i --save @kne/react-clamp

概述

可以将字符串溢出部分作为省略号显示，可以支持展开收起操作

示例

示例代码

• 单行或者多行省略
• 展示单行或者多行省略
• clamp(@kne/react-clamp),space(antd/lib/space),divider(antd/lib/divider)

const {default: Clamp} = clamp;
const {default: Space} = space;
const {default: Divider} = divider;

const BaseExample = () => {
    return <Space direction="vertical">
        <div>单行省略:</div>
        <Clamp width={200}>哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</Clamp>
        <Divider/>
        <div>多行省略:</div>
        <Clamp width={200} options={{clamp: 2}}>哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</Clamp>
    </Space>;
};

render(<BaseExample/>);

• 带有展开收起操作的情况
• 展示带有展开收起操作的情况，当字数可以完整显示则展开选项不出现，当字数超过时出现。
• clamp(@kne/react-clamp),space(antd/lib/space),input(antd/lib/input)

const {default: Clamp} = clamp;
const {default: Space} = space;
const {default: Input} = input;
const {useState} = React;

const BaseExample = () => {
    const [value, setValue] = useState("哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈");
    return <Space direction="vertical">
        <Input.TextArea value={value} onChange={(e)=>{
            setValue(e.target.value);
        }} autoSize/>
        <Clamp.Expand width={200} options={{clamp: 2}} text={value}>{({
                                                                          needExpand,
                                                                          isExpand,
                                                                          change,
                                                                          clampElement
                                                                      }) => {
            return <div>
                {clampElement}
                {needExpand ? <a onClick={() => change(!isExpand)}>{isExpand ? "收起" : "展开"}</a> : null}
            </div>;
        }}</Clamp.Expand>
    </Space>;
};

render(<BaseExample/>);

API

属性名	说明	类型	默认值
tagName	容器标签	string	span
text	内容	string	-
children	内容和text一样，当text存在优先去text	string	-
width	容器宽度	string|number	-
options	{clamp} clamp:行数，超过行数省略	object	{clamp:1}

Clamp.Expand

属性名	说明	类型	默认值
children	一个渲染函数可以接收到参数children({needExpand,isExpand,change,clampElement}) needExpand：是否需要收起，isExpand：是不是收起状态，change：调用后可以切换展开收起状态，clampElement：被Clamp包裹的内容，原样输出即可	function	-

其他参数参考Clamp，将会原样传给Clamp，注意：由于children参数被占用，只能通过text参数向Clamp传入内容