- 博客(16)
- 收藏
- 关注
RSS订阅原创 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
271
原创 VsCode自定义代码片段，提高开发效率
1.步骤：打开vs code编辑器>文件(F)>首选项>用户片段>新建全局代码片段文件>输入代码片段（下面有代码）然后新建代码片段代码片段： // 代码片段 其他的片段 大同小异 { "react": {//该代码片段的语言 "prefix": "react", // 触发的关键字 输入react按下tab键 会提示react关键字 "body": [ "import React from 'react'",
2020-10-14 14:55:40
757
原创 创建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
2237
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
441
原创 创建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
626
原创 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
1373
原创 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
1285
原创 解决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
3299
原创 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
2422
1
原创 echarts 常见功能，刻度自适应，位置移动，图例，刷新，自适应等问题
曲线数据最大值最小值自适应解决方法:（注意：只在数值轴中（type:‘value’）中有效）yAxis: { scale:true,根据数据自适应最大值最小值},或者：手动设置yAxis: { max:100, //刻度最大值 min:1,//刻度最小值},图表自适应页面的方法：window.addEventListener("resize", () => { myChart.resize();//resize 页面大小改变，调整大小});图表位置调整方
2020-09-17 11:58:15
2794
原创 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
622
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
10087
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
417
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
5218
原创 获取开始和结束时间戳方法
获取需要的时间戳(开始 and 结束 时间戳) 调用如下方法就行function getWantTimestamp(props) { //当前时间 const nowDate = parseInt((new Date().getTime() / 1000).toString()); //当前时间 switch (props) { // 当前时间时间戳 case "nowData": { return nowDate; } // 当前零点得时间戳
2020-09-01 18:27:56
1423
原创 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
2815
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人