陈序员01-CSDN博客

原创 css自定义滚动条样式

效果图：css样式：/*整体部分*/ ::-webkit-scrollbar{ width: 10px; height: 10px;}/*滑动轨道*/ ::-webkit-scrollbar-track{ border-radius: 0px; background: none;}/*滑块*/::-webkit-scrollbar-thumb{ border-radius: 5px; -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.

2020-10-24 16:12:49 220

原创 VsCode自定义代码片段，提高开发效率

1.步骤：打开vs code编辑器>文件(F)>首选项>用户片段>新建全局代码片段文件>输入代码片段（下面有代码）然后新建代码片段代码片段： // 代码片段其他的片段大同小异 { "react": {//该代码片段的语言 "prefix": "react", // 触发的关键字输入react按下tab键会提示react关键字 "body": [ "import React from 'react'",

2020-10-14 14:55:40 686

原创创建vue3.0项目教程

## 简介：Vue3 的正式版发布了，两年多的开发，99 位贡献者的努力，2600 次提交 628 次 PR，在 2020 年 9 月 19 日 Vue3 更新了正式版本，正式版本一出，代表着不会再有太大的改动了，也意味着你可以开始学习了，这篇文章主要介绍下vue-cli3.0项目搭建，分享给大家1.卸载旧的 vue-cli2 版本的脚手架 npm uninstall -g vue-cli2.安装新的 vue-cli3 版本的脚手架 npm install -g @vue/cli3

2020-09-30 16:39:42 2152 2

原创创建vue2.0项目教程

1.首先需要node环境，有node环境才能npmnode官网：https://nodejs.org/zh-cn/ 建议下载稳定版2.安装node后可以到命令提示符面板查看node的版本node -v npm -v 有版本代表安装成功了3.启动终端开始安装vue-cli全局脚手架 -g全局的意思npm install vue-cli -g4.安装vue-cli成功后，通过cd命令进入你想放置项目的文件夹 //react-demo 空文件夹放项目的cd vue-demo5.在终

2020-09-17 14:11:41 413

原创创建react项目教程

1.首先需要node环境，有node环境才能npmnode官网：https://nodejs.org/zh-cn/ 建议下载稳定版2.安装node后可以到命令提示符面板查看node的版本node -v npm -v 有版本代表安装成功了3.启动终端开始安装react全局脚手架npm install -g create-react-app4.选择一个文件夹或者新建文件夹，要放react项目，cd到要放react项目的文件夹cd react-demo5.搭建react项目 rea

2020-09-17 14:04:01 561

原创 react引入图片的两种方式

react src里面引入图片的几种方式，因为es6不支持在 img 标签内直接写图片的路径，如 img src="…/images/photo.png"/ 会引入不了，解决方法如下：（1）第一种：import 方法：如果该图片反复调用建议使用import 引入方法import imgURL from './../images/photo.png';<img src={imgURL} />（2）第二种： require方法这种方法需要注意的是，require里只能写字符串，不能写变

2020-09-17 12:36:37 1273

原创 react中使用HTML5 ＜iframe＞嵌入式标签

直接看代码吧.js文件import weather from './weather' //引入下面weather.js文件const IndexView = () =>{ return ( <iframe style={{marginTop: "-0.3vh"}} width="100%" scrolling="auto" height="100%" frameBorder="0"

2020-09-17 12:33:38 1222

原创解决react 在 ie11上运行不起来的问题

如何让react 兼容ie11react跟ie并不兼容，存在兼容问题，要想React 兼容 ie11 需要安装插件进行配置1.npm 安装：npm install react-app-polyfill2.然后在src下的index.tsx入口文件中最前面引入react-app-polyfillimport "react-app-polyfill/ie11";3.根据官网的提示，还需要在package.json文件中的browserslist中添加"ie 11" 或者"ie >= 9"

2020-09-17 12:15:37 3080

原创 css动画实现涟漪效果波纹动态效果

效果图：图上是echarts，本文是使用的是css3动画制作的，效果一样.html<div class="GreenStatus"></div>.css/* 绿色小圆点 */.GreenStatus { width: 10px; height: 10px; background-color: #6cb552; border-radius: 50%; display: inline-block; position: rel

2020-09-17 12:06:53 2255 1

原创 echarts 常见功能，刻度自适应，位置移动，图例，刷新，自适应等问题

曲线数据最大值最小值自适应解决方法:（注意：只在数值轴中（type:‘value’）中有效）yAxis: { scale:true,根据数据自适应最大值最小值},或者：手动设置yAxis: { max:100, //刻度最大值 min:1,//刻度最小值},图表自适应页面的方法：window.addEventListener("resize", () => { myChart.resize();//resize 页面大小改变，调整大小});图表位置调整方

2020-09-17 11:58:15 2652

原创 react ＜column/＞如何处理返回的中文字段数据 for in 哈希结构体

返回的响应体结构处理成后页面显示的样子基础 for in 实现案例：values: { D区: "26.02", 温度: "26.02", 湿度: "2" }function dataDispose(values){ let res = [] for (const key in values) { //key=中文字段 res.push(<span key={key}>{key}:{values[key]}</span>)

2020-09-17 11:03:58 549 1

原创实现ant design的＜Select＞多选框组件中加上全选功能案例

本文用了是React+TypeScript+ant design的实例通过 ant design select 属性Api 提供的 dropdownRender 完成ant design select 地址Select props 两个属性都会用到属性说明dropdownRender自定义下拉框内容setFieldsValue设置表单的值代码：import React, {useState} from 'react'const IndexView = (

2020-09-17 10:33:02 9521 2

原创 route上使用react-transition-group

react-transition-group简介：react-transition-group 一个官网提供的动画过度库，css动画的方式，比较局限，涉及到一些js动画的时候没法处理了，借住这个react-transition-group模块可以更方便的实现更加复杂的动画效果，而官方提供的三个组建（Transition,CSSTransition,TransitonGroup）。http://reactcommunity.org/react-transition-group/ 官网安装 react-t

2020-09-03 16:50:21 361 1

原创 react-transition-group的使用方法

react-transition-group简介：react-transition-group 一个官网提供的动画过度库安装# npmnpm install react-transition-group --save#如果用了 TypeScript 需要安装 @typenpm install @types/react-transition-group# yarnyarn add react-transition-groupCDN/外部由于Reaction转换组相当小，在应用程序中包含

2020-09-03 16:25:24 5131

原创获取开始和结束时间戳方法

获取需要的时间戳(开始 and 结束时间戳) 调用如下方法就行function getWantTimestamp(props) { //当前时间 const nowDate = parseInt((new Date().getTime() / 1000).toString()); //当前时间 switch (props) { // 当前时间时间戳 case "nowData": { return nowDate; } // 当前零点得时间戳

2020-09-01 18:27:56 1364

原创 react-hammer库的详细介绍和实现滑动触摸点击事件方法

react-hammer 简介react-hammer 是一个帮助 react 实现移动端拖拽效果的插件，其实React-hammer就是基于hammer.js 构建而成的一个更适合在 React 中使用的触摸插件，react-hammer里面封装了很多js的事件（滑动，点击，触摸，移动，双击，缩放，拖拽等），比起写原生js事件更加容易使用，并且兼容性很强hammer.js 简介我们已经学习了HTML5中关于移动设备的触摸、手势等控制事件等知识，然而，在实际的JavaScript编写过程中，这些控制需

2020-09-01 13:49:09 2488

陈序员的博客