前端一些工具和便捷类记录

可惜不可惜

已于 2023-07-06 16:09:10 修改

阅读量121

点赞数

文章标签： git 前端 typescript node.js chrome Powered by 金山文档

于 2023-03-08 11:40:31 首次发布

本文链接：https://blog.csdn.net/x54955901/article/details/129399760

版权

工具类

nvm下载

windows：https://github.com/coreybutler/nvm-windows/releases/download/1.1.10/nvm-setup.exe ，

mac:待补充

vscode下载

window：https://pc.qq.com/search.html#!keyword=vscode =>(电脑管家的软件管理搜索比外面的各种搜索结果更纯粹)

mac:待补充

git下载

window:https://pc.qq.com/search.html#!keyword=git （同上面vscdeo的下载方式）

mac:待补充

4. iconfont一键导入购物车插件

链接: https://pan.baidu.com/s/1uhacY5Nlhg7YxOf12m3GNw?pwd=aaaa 提取码: aaaa

代码类

代码块备注

示例：

上述常规备注并不会带有其文字的提示可以更改为：

则会带有提示，进阶类

/**
   * 修改存放地点
   * ----------
   * @param params {
   *  地点ID id:string
   *
   *  地点名称 placeName:string
   * @returns
   */

在文字下方增加【----】方框内的内容会把文字的字体大小增加，@param 则为请求的参数，@returns为接口返回的参数。

ProTable

使用dataSource传值时，需要配合request方法区请求数据，如果碰到时间类传参，会报一个错误Cannot read properties of undefined (reading '0')，该错误是因为本身不search时会自己设置该参数，但是参数并不存在（因为我们并没有进行筛选），解决方法为使用“&&”，示例如图：

2.使用rowSelection时存在切换分页的情况，来回切换分页选择数据会丢失：增加一个参数“preserveSelectedRowKeys: true”

 const rowSelection = {
    preserveSelectedRowKeys: true,
    selectedRowKeys,
    onChange: onSelectChange,
  };

3.使用Protable时，开启了rowSelection然后head层会多出一个所选信息的展示，如何隐藏tableAlertRender | alwaysShowAlert

 <ProTable
   rowSelection={rowSelection}
   tableAlertRender={false}/> // 这行配置项开启即可隐藏头部

EditProTable

当使用可编辑表格时，valueType为valueType: 'treeSelect',设置数据源的方法：

antd（^5.0.0）

DatePicker日历组件存在中英文解决：

ok看了官方文档以后发现就是locale的问题，开始从入口文件“app.tsx”开始解决，看到

import 'dayjs/locale/zh-cn';
import locale from 'antd/es/date-picker/locale/zh_CN';

然后再去页面内的组件中区测试，看有没有解决

如何下载文件

1.确定响应头-->后端返回的响应类型（如图）

在request中返回时设置它的response为blob格式，然后处理所返回的数据

以下是我的例子：

1.接口层面

2.返回的数据层面

antd-moble

vscode设置类

代码块高亮设置，点击右下角齿轮（快捷键：Command+，|Ctrl+，）图标进入设置页面，找到Guides:Bracket Pairs（控制是否启用括号对指南）

UMI4

设置右上角登录的用户名

首先确定app.tsx在src的目录下，然后在layout中书写rightContentRender，具体实现为（React.Node结构）

rightContentRender: () => {
      return (
        <div>
          // 这行为展示的用户名
          <span style={{ marginRight: '10px' }}> {admin && admin.name}</span>
          // 这里为下拉框 
          <Dropdown menu={{ items }}>
            <a onClick={(e) => e.preventDefault()}>
              <Space>
                {currentUser?.username}
                <CaretDownOutlined />
              </Space>
            </a>
          </Dropdown>
        </div>
      );
    },

其余参数还在探索待更新