Ant Design Pro小结

最新推荐文章于 2023-12-26 11:16:42 发布

攻城猴

最新推荐文章于 2023-12-26 11:16:42 发布

阅读量617

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/weixin_43453221/article/details/103636040

本文总结了Ant Design Pro在实际应用中的经验，包括Braft Editor的使用，echarts-for-react图表集成，页面打印与导出策略，React中HTML编译，lodash库的高效操作，子组件控制，前端每日一题的挑战以及同一DOM元素绑定多个点击事件的实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.对Braft Editor的使用

  this.controls = [
      'font-family',
      'font-size',
      'text-color',
      'bold',
      'italic',
      'underline',
      'text-align',
      {
        key: 'sign',
        type: 'button',
        className: '',
        text: <Button className="searchButton">重点标记</Button>,
        onClick: () => {
          const selection = window.getSelection()
          if (!selection) return
          this.props.dispatch({
            type: 'Deal/getCurrentDate',
            callBack: (res: any) => {

              let stamp = moment(res,"YYYY-MM-DD HH:mm:ss").diff(moment(this.startTime,"YYYY-MM-DD HH:mm:ss"),'seconds');
              this.setState({
                editorState: ContentUtils.insertHTML(
                  this.state.editorState,
                  `<a tag="${stamp}">${selection.toString()}</a>`
                ),
              });
            },
          });

        },
      },
      {
        key: 'answer',
        type: 'button',
        className: '',
        text: <Button className="searchButton">问/答</Button>,
        onClick: () => {
          const htmlContent = this.state.editorState.toHTML();
          // console.log(htmlContent);

          this.setState({
            editorState: ContentUtils.insertHTML(
              this.state.editorState,
              '<p style="color:#000"><span style="font-size:16px"><span>问：</span><span></span></span></p><p><span style="font-size:16px"><span>答：</span><span>  </span></span></p><p></p>',
            ),
          });
          // console.log('result=', htmlContent);
        },
      },
    ];

链接: link.

2.对echarts-for-react的使用

          <ReactEcharts
              option={mapOption}
              onEvents={this.cityClick}
              onChartReady={e => {
                this.mapEchart = e;
              }}
              style={{ height: 500 }}
            />

echarts官网链接: link.
echart-react官网链接: link.

3.打印

 @media print {
      #root {
        display: none;
      }

      #edit {
        display: block;
      }
    }
......打印
 print = () => {
    this.props.dispatch({
      type: 'Deal/printRecord',
      payLoad: {
        appointmentId: getPropsParams(this.props).id,
        personId: `${this.state.currentPerson.id}`,
        content: this.state.editorState.toHTML(),
        recordTemplateId: this.state.recordTemplateId
      },
      callBack: (res:any) => {
        window.document.getElementById('edit').innerHTML = res;
        window.print();
      }
    })
  };

打印的一瞬间采用媒体查询来让root变成 display: none;

3.导出

 export = () => {
    console.log('html =>', this.state.recordTemplateId)
    this.props.dispatch({
      type: 'Deal/exportRecord',
      payLoad: JSON.stringify({
        appointmentId: getPropsParams(this.props).id,
        personId: `${this.state.currentPerson.id}`,
        content: this.state.editorState.toHTML(),
        recordTemplateId: this.state.recordTemplateId
      }),
      callBack: (res: any) => {
        const { currentPerson } = this.state;
        exportFileFromBlob(
          res,
          `提讯笔录-${currentPerson.name}-${moment(this.startTime).format('YYYY-MM-DD')}.pdf`,
        );
      },
    });
  };
  ........
  export async function exportRecord(params: any): Promise<any> {
  return request(`${CURL}/download/recordWordDownload`, {
    method: 'post',
    body: params,
    headers: { 'Content-Type': 'application/json' },
    responseType: 'blob'
  })
}

................
export function exportFileFromBlob(blob, fileName) {
  const url = URL.createObjectURL(blob);
  /*   window.location.href = url; */
  const link = document.getElementById('download');
  link.href = url;
  link.download = fileName;
  link.click();
}

4.React中编译html

 <div dangerouslySetInnerHTML={{ __html: marked(item.content || '') }} />

dangerouslySetInnerHTMl 是React标签的一个属性

参考链接: link.

5.对lodash的使用

import _ from 'lodash';
const recfileinfo = _.get(res, "recode.recfileinfo");

参考链接: link.

6.对子组件的控制

调用    this.deleteModal.show();
<DelectModal
            wrappedComponentRef={(target: any) => {
              this.deleteModal = target;
            }}
            save={this.delete}
          />

子组件中

 constructor(props: IComponentProps & IDelectProps) {
    super(props);
    if (this.props.wrappedComponentRef) {
      this.props.wrappedComponentRef(this);
    }
  }

7.前端每日一题

参考链接: link.

8.同一个dom元素如何绑定多个点击事件

React:<button type="button" onClick={(event) => { a(); b();}}>react按钮</button>