徐同保的专栏

原创 react 轮播图 react-slick

import Slider from 'react-slick'import "~slick-carousel/slick/slick.css"; import "~slick-carousel/slick/slick-theme.css"; //轮播图改变 const handleAfterChange = () => { const activeDom = [...document.getElementsByClassName('js-slider-m...

原创 display:flex 元素垂直居中，有间距，右对齐，gap属性

.m-design-header-action{display: flex;padding: 0 18px 0 0; align-items: center; width: 180px;gap: 8px;text-align: right;justify-content: flex-end;}

原创 antd tabe表头出现遮挡

antd table 表头文本禁止换行（white-space:nowrap;），设置表格高度，出现纵向滚动条（scroll={{ y: 200 }}），这个是表头和表格主体部分被渲染成两个table，表头文本出现遮挡解决办法：表头不应该通过样式禁止换行，应该通过样式加大表格主体单元的的最小宽度，把表头撑开...

原创 url转二维码（js,qrcode）可以带logo

import QRCode from 'qrcode' import { Image } from 'antd'const [qrCodeImageUrl, setQrCodeImageUrl] = useState()useEffect(() => { QRCode.toDataURL(document.location.href) .then((url) => { console.log(url) s...

原创 react项目打包优化

优化前：优化中：优化完成：要点：1.路由懒加载2.在路由懒加载前把自己开发的公共组件全部引入3.剔除掉比较大的公共组件（例如富文本组件），在业务页面中单独引入import React, { Suspense, lazy } from 'react'import { Switch, Route, Redirect, useHistory } from 'react-router-dom'import Loading from ...

原创 react-dnd 拖拽

Index.js:import React from 'react'import { connect } from 'react-redux'import { withRouter } from 'react-router-dom'import { Form, Button, Collapse, Col, Row } from 'antd'import Header from './Header'import useList from './useList'...

原创 react-smooth-dnd 拖拽实例

import React, { useState } from 'react'import { Container, Draggable } from 'react-smooth-dnd'import { v4 as uuidv4 } from 'uuid'export default function CardPlus() { const [toolList, setToolList] = useState([ { id: 't0', nam...

原创 react中div的全屏与退出全屏

import React, { useState, useRef } from 'react'import { Tabs, List, Input, Image } from 'antd'import Api from '../../../../../api'import moment from 'moment'import { deepClone } from '../../../../../utils/tools'import { Icon } from '../../../../....

原创 使用mock.js伪造图片数据，图片链接是枚举值

const Mock = require('mockjs')const moment = require('moment')const getImage = () => { const urlArr = [ 'http://images.gongzuoshouji.cn/teacher/2021-08-09/84751fbcf153487f868a21a77048d19c.jpg', 'http://images.gongzuoshouji.cn/teache...

原创 moment生成前一天的时间

moment生成前一天的时间：const moment = require('moment')moment().subtract(1, 'day').format('YYYY-MM-DD')批量： for (let i = 0; i < 100; i++) { //这些值在mock的批量数据中是随机的 const temp = Mock.mock({ name: '@cname', date: moment().subtract(i, '.

原创 Ant Design RangePicker预设常用的日期范围

<Form.Item name="dateRange" label="时间范围"> <RangePicker ranges={{ 今天: [moment(), moment()], 昨天: [moment().startOf('day').subtract(1, 'day'), moment().endOf('day').subtract(1, 'day')],...

原创 css文字太多时添加省略号

.m-title{width: 250px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap}

原创 node如何发生邮件，nodemailer

const nodemailer = require("nodemailer")let transporterconst emailInit = async () => { // Generate test SMTP service account from ethereal.email // Only needed if you don't have a real mail account for testing let testAccount = await no...

原创 sqlite3，在node中使用，轻量级数据库

db/index.js:var sqlite3 = require('sqlite3').verbose()var db = new sqlite3.Database('my.db')//执行sql语句const runSql = async (sql) => { return new Promise(async (resolve, reject) => { db.run(sql, (err) => { resolve(err) }) })

原创 使用fiddler修改网页的js文件

把网页的请求的js文件保存到本地并修改，使用fiddler拦截原来的请求，替换为本地的js文件

原创 在控制台修改js变量的值，模拟异常，方便调试

原创 react路由懒加，项目经常上线导致没有刷新的用户出现js文件加载失败： ChunkLoadError: Loading chunk 42 failed.

解决方案：使用错误边界：import React, { Component } from 'react'//错误边界//https://zh-hans.reactjs.org/docs/error-boundaries.html#gatsby-focus-wrapperexport default class ErrorBoundary extends Component { constructor(props) { super(props); this.state =