- 博客(24)
- 收藏
- 关注
RSS订阅
1原创 滚动条样式修改
::-webkit-scrollbar伪类选择器可以修改滚动条的样式，仅支持webkit内核的浏览器使用。一、滚动条的组成1）::-webkit-scrollbar 定义整个滚动条（常设宽高）颜色外观属性2）::-webkit-scrollbar-button 定义滚动条上按钮 (上下箭头)属性3）::-webkit-scrollbar-thumb 定义滚动条滚动滑块属性4）::-we...
2022-03-22 14:33:18
571
原创 antd--CountUp组件
CountUp组件是一个在指定时间内，从一个数字动态变化到另一个数字，让数字实现滚动效果。1、安装插件npm install react-countup2、安装成功之后在页面引入import CountUp from 'react-countup';3、使用时直接当成普通的组件来使用<CountUp />4、常见的属性1）decimals：number 显示的小数位数2）delay：number 显示的小数位数（delay={0}自动启动计数）3）d
2022-03-18 18:01:17
694
原创 react文件上传
1、react文件上传可以使用 input[type=file]来实现。1）在.tsx页面编写如下代码。<div className={'box'}> <input className={'btn'} type={'button'} value={'上传文件'} /> <div className={'text'}>{fileName}</div> <input className="fileinp" type="file" a
2022-03-08 14:26:08
2381
原创 react遍历指定数量的数据
1、用map方法和slice方法遍历指定的数据数量1）可以先用slice方法截取n个元素。students.slice(0, 10);2）再用map方法对截取到的数据进行遍历。students.slice(0, 10).map();
2022-03-08 14:14:11
1258
原创 echarts的样式修改
1、折线图线条样式修改const option = { xAxis: { type: 'category', data: ['篮球','足球','橄榄球','羽毛球'], }, yAxis: { type: 'value', }, series: [ { data: ['2','1','1','4'],
2021-12-30 11:03:00
490
原创 数组函数some()、every()、filter()用法
1、some() 用于检测数组中的元素是否满足指定条件，依次执行数组的每个元素。 （1）如果有一个元素满足条件，则表达式返回true, 剩余的...
2021-12-29 18:23:18
1353
原创 React表格内容换行并用省略号显示
1、单行文本溢出显示省略号。.table { width: 240px; word-break: break-all; // 允许在单词内换行。 text-overflow: ellipsis; // 溢出用省略号显示。 overflow: hidden; // 超出的文本隐藏。 white-space: nowrap; // 溢出不换行。}2、多行文本溢出显示省略号。 ...
2021-12-22 10:35:24
600
原创 限制input框的字数
限制input框内输入32个字节，16个字。 const changeNickName = (e: any) => { let count = 0; for (let i = 0; i < e.target.value.length; i++) { if (e.target.value.charCodeAt(i) > 255) { count += 2; } else { count++; }
2021-12-14 17:39:49
1662
原创 moment常用操作及语句
一、日历时间// .calendar()以日历格式表达，去掉.calendar()是正常格式返回moment().calendar(); // 当前时间————今天10:00moment().subtract(9,"days").calendar(); // 当前时间前9天，2021/11/07moment().subtract(4,"days").calendar(); // 当前时间前4天，上星期五10:00moment().subt.
2021-12-14 17:31:33
822
原创 antd的Table组件实现自定义分页数据条数
1. 在Table组件上的pagination属性上可以实现自定义分页数据条数。<Table rowSelection={{ type: selectionType, ...rowSelection, }} columns={columns} dataSource={datas} rowKey={record => record.id} pagination={{ page
2021-12-10 18:27:36
2752
原创 antd右侧菜单栏点击更换icon
点击侧边导航的二级菜单时更换一级菜单的icon。1. 首先，把更换icon前后对应的图片添加到路由里面。import first from '@/assets/sideBar/first .png';import firstActive from '@/assets/sideBar/first_active.png';export const routes = [ { name: '一级菜单', icon: first, activeIcon: firstActi
2021-12-01 18:04:32
2012
原创 解决uni-app的跨域问题
方案一：在根目录下新建一个js文件（vue.config.js），在该js文件中配置跨域问题。module.exports = { devServer: { open: true, host: 'localhost', port: 8080, https: false, //以上的ip和端口是我们本机的;下面为需要跨域的 proxy: {//配置跨域 '/api': {...
2021-12-01 15:47:16
653
原创 VS Code的常用快捷键
1.**写一个标签名，直接按tab键** 会自动的补全2.**!+tab** 生成html的基本骨架3.**ctrl+/** 补全单行注释4.**alt+shift+a** 补全多行注释5.**shift+alt+向下的箭头** 复制上一行代码6.**ctrl+x** 删除当前行代码7.**div.名字+tab ** 生成一个带class名字的标签： div.box+tab ==> <div cl...
2021-12-01 15:45:30
95
原创 知识点概括
一、 React1. 脚手架 1）全局安装脚手架：npm i -g cteate-react-app 2）进入要创建项目的目录，创建脚手架：create-react-app 文件名 3）进入项目目录，启动项目：yarn start 或 npm start二、 Antd1. 安装antd yarn add antd2. 按需引入组件样式（不需要在App.js中再引入样式） 1）安装依赖：yarn add react-app-rewir......
2021-12-01 15:41:14
247
原创 关于Git的命令
一、git简介 git是一个开源的版本控制系统，git的作者就是linux的作者，所以在git bash里面可以使用linux中的大部分命令。下图中~叫家目录，Desktop是桌面，window系统也是多用户的OS，每一个用户都有一个目录，叫就家目录 。 linux常用的命令： （1）touch xxx.txt 创建一个文件名字是xxx.txt ...
2021-12-01 15:34:27
637
原创 select选择器设置
1. 搜索支持根据输入过滤标签。 optionFilterProp：搜索时过滤对应的option属性。 optionFilterProp={'children'}：表示对内嵌内容进行搜索。 optionFilterProp={'label'}：通过options属性配置选项内容，使用其来对内容进行搜索。2.设置 Select 的模式。 mode={'multiple'}：设置 Select 的模式为多选。 mode=...
2021-11-12 16:14:09
1198
原创 umi3.0代理配置（跨域处理）
umi遇到跨域问题时可以去.umirc.ts配置文件进行代理配置。proxy：{'/api':{ target:'http://1.99.97.156:8088/group', // 接口域名 changeOrigin:true, secure:false, // 如果是https接口，需配置这个参数 }}配置好后，发送请求的时候可以直接使用你配置好的进行发送，以便解决跨域问题。export const groupList: IAPiData<Group
2021-11-09 16:09:26
2929
原创 Modal中的确认和取消按钮
1. 取消Modal中的确认和取消按钮。 这里通过在<Modal>标签中添加footer属性设置。<Modaltitle="删除"visible={visible}confirmLoading={confirmLoading}onCancel={this.handleCancel}footer={[] // 设置footer为空，去掉 取消 确定默认按钮}></Modal>2. 自定义Modal的按钮。<Moda..
2021-11-05 16:56:00
10341
原创 CSS常见的样式设置
1. 通过positon属性实现右对齐。.right { position:absolute; right: 0px;}2.通过float属性实现右对齐。img { float:right;}3. 通过text-align属性实现右对齐。div { text-align: right;}
2021-11-05 16:44:08
387
原创 设置伪元素的层级低于父元素层级
一般情况下，默认伪元素::after的层级在::before之上，并且伪元素的层级高于父元素。设置伪元素层级在父元素之下有两种办法：1. 使用3d转换。通过设置transform-style:preserve-3d;和transform:translateZ(-1px);，可以保证伪元素的层级只在父元素之下，而不在其他父辈的父辈之下。.father{ height: 50px; width: 50px; background:blue; transform-style.
2021-11-05 15:58:36
2209
原创 ECharts折线图中多条折线的展示
1. 打开折线图默认进去只展示一条折线图，其他折线图隐藏，只有用户点击时才可切换其他的折线图。 这里主要是通过selected来设置的（设置false是默认不显示），selected中的数据必须与series中的数据保持一致。 var option = { legend: { x : 'center', borderWidth : '1', selected: { '天数' : false, ..
2021-11-05 15:27:43
4532
原创 将react里面class类改写成Hooks的形式
这里以antd中的Layout布局里面的侧导航栏开关的实现为例。下面是antd里面使用class类的写法。import { Layout, Menu } from 'antd';import { MenuUnfoldOutlined, MenuFoldOutlined, UserOutlined, VideoCameraOutlined, UploadOutlined,} from '@ant-design/icons';const { Header, Sider, C
2021-11-05 14:48:21
577
原创 antd中的自动换行
1. antd中<Row>里面的<Col>自动换行的办法。 方法一：在需要换行的地方，添加一个空的<Col>标签。 如：<Col span={24}></Col> 方法二：把需要进行换行的内容从From表单中取出来，用<Space>标签包裹，可实现自动换行。 如：原代码如下，想将重置按钮换行。<Form> <...
2021-11-05 14:25:44
5271
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人