RichTextShow.js 2.07 KB
Newer Older
周宏民's avatar
周宏民 committed
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75
/*
 * @Title:富文本展示,可预览图片
 * @Author: hongmye
 * @Date: 2022-03-21 14:44:49
 */
/**
 * 1.引入组件 import RichTextShow from '@/components/RichText/RichTextShow';
 * 示例:<RichTextShow content={this.state.content} onClickImg={src => {}} />;
 *
 *  2.传递方法  onClickImg 点击图片回调(不需可不传)
 *
 *  3.传值接收  content  富文本内容
 *             fileList 附件列表
 *
 *
 */
import { Image } from 'antd';
import { useEffect, useState } from 'react';
import FileListItem from './fileListItem';
import styles from './index.less';
function RichTextShow(props) {
  const [imgVisible, setImgVisible] = useState(false);
  const [imgPreviewSrc, setImgPreviewSrc] = useState('');
  const [fileList, setFileList] = useState([]);
  const onPreview = (e) => {
    e.stopPropagation();
    const src = e?.target?.src || null;
    if (!src) return;
    setImgPreviewSrc(src);
    setImgVisible(true);
    props.onClickImg && props.onClickImg(src, e.target);
  };
  useEffect(() => {
    setFileList(props.fileList);
  }, [props.fileList]);
  useEffect(() => {}, [props.content]);
  return (
    <div style={{ ...props.style }}>
      <div
        className={styles.RichTextShow}
        onClick={onPreview}
        dangerouslySetInnerHTML={{ __html: props.content || '' }}
      />
      {fileList && fileList.length > 0 && (
        <div className={styles.RichTextFileList}>
          <FileListItem
            list={fileList}
            onDel={(val) => {
              onDelFile(val);
            }}
            onPreview={(val) => {
              if (!val) return;
              setImgPreviewSrc(val.path);
              setImgVisible(true);
            }}
          />
        </div>
      )}
      <Image
        width={200}
        style={{ display: 'none' }}
        src={imgPreviewSrc}
        preview={{
          visible: imgVisible,
          src: imgPreviewSrc,
          onVisibleChange: (value) => {
            setImgVisible(value);
            if (!value) setImgPreviewSrc('');
          },
        }}
      />
    </div>
  );
}
export default RichTextShow;