省略文字，动态行，查看更多显示全部组件-Toy模板网

这篇具有很好参考价值的文章主要介绍了省略文字，动态行，查看更多显示全部组件。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

备注：

使用 TypeScript 和 React的函数式组件语法。此组件的目的是显示文本，如果文本内容超出了指定的行数，它将显示一个“查看更多”的按钮。

当用户点击这个按钮时，将展示全部的文本内容。组件使用了自定义的钩子
useBoundingClientRect 来确定是否需要显示这个按钮

//index.tsx文件
import type { FC, JSX } from 'react';
import { Fragment, useState } from 'react';
import type { StandardProps } from '@tarojs/components';
import { Image, Text, View } from '@tarojs/components';

import iconDropDown from '@/assets/icons/icon-dorpdown-primary.svg';
import useBoundingClientRect from '@/hooks/useBoundingClientRect';

import './index.less';

interface EllipsisProps {
  rows?: number;
  /**
   * 收起节点
   */
  foldRender?: JSX.Element;
  /**
   * 是否显示收取按钮
   */
  showFold?: boolean;
  /**
   * 展开节点
   */
  unfoldRender?: JSX.Element;
  /**
   * 是否显示展开按钮
   */
  showUnfold?: boolean;
  onChange?: (val: boolean) => void;
}

const Ellipsis: FC<EllipsisProps & StandardProps> = ({
  rows = 1,
  children,
  className,
  showUnfold,
  unfoldRender,
}) => {
  const [show, setShow] = useState(false);
  const [rectAssist] = useBoundingClientRect('#rectAssist', [children]);
  const [rectActual] = useBoundingClientRect('#rectActual', [children]);

  const style = {
    lineClamp: rows,
    webkitLineClamp: rows,
  };

  const showMoreBtn =
    !show &&
    showUnfold &&
    rectActual?.height &&
    rectAssist?.height &&
    Number(rectActual?.height) !== Number(rectAssist?.height);

  return (
    <Fragment>
      <View
        style={{ position: 'absolute', left: 0, top: -999999, opacity: 0 }}
        className={className}
        id="rectAssist"
      >
        {children}
      </View>

      <View
        className={`lineClamp__1 ${className}`}
        style={!show ? style : { display: 'block' }}
        id="rectActual"
      >
        {children}
        {!!showMoreBtn && (
          <View className="unfold-wrap" id="unfoldWrap" onClick={() => setShow(true)}>
            {unfoldRender || (
              <View className="unfold-btn">
                <Text>查看更多</Text>
                <Image src={iconDropDown} />
              </View>
            )}
          </View>
        )}
      </View>
    </Fragment>
  );
};

export default Ellipsis;

css样式index.less

.lineClamp(@row) {
  display: -webkit-box;
  overflow: hidden;
  line-clamp: @row;
  -webkit-line-clamp: @row;
  -webkit-box-orient: vertical;
  position: relative;
}

.lineClamp__1 {
  .lineClamp(1);

  &::after {
    color: red;
    position: absolute;
    right: 0;
    bottom: 5px;
  }
}

.lineClamp__2 {
  .lineClamp(2);
}

.lineClamp__3 {
  .lineClamp(3);
}

.unfold-wrap {
  position: absolute;
  right: 0;
  bottom: 0;
  display: flex;
  background: linear-gradient(to left, #fff, #fff, #fff, rgba(255, 255, 255, 0.4));
}

.unfold-btn {
  display: flex;
  flex-direction: row;
  align-items: center;
  min-width: 32px;
  padding: 4px 10px 4px 30px;
  line-height: 1;

  text {
    color: #b89962;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 12px; /* 100% */
  }

  image {
    width: 13px;
    height: 12px;
  }
}

使用组件文章来源地址https://www.toymoban.com/news/detail-794415.html

<View>
   <Ellipsis className={styles.name}>{'未知文字文字文字'}</Ellipsis> 
</View>

到了这里，关于省略文字，动态行，查看更多显示全部组件的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

省略文字，动态行，查看更多显示全部组件

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

支付宝扫一扫领取红包，优惠每天领

二维码1

二维码2

省略文字，动态行，查看更多显示全部 组件

相关文章