- 博客(45)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 解决使用echarts时警告There is a chart instance already initialize on the dom.的两种方法
解决控制台警告There is a chart instance already initialize on the dom.的两种方法
2022-10-25 15:29:47
5500
5
原创 ReactHooks+ts（函数组件）原生轮播
1.下载依赖（第一个是js依赖，第二个是ts依赖）npm install smoothscroll-polyfill --savenpm i --save-dev @types/smoothscroll-polyfill2.创建tsx文件import React, { useRef, useState, useEffect } from 'react'import './index.less'import smoothscroll from 'smoothscroll-polyfi
2022-05-30 15:26:00
373
1
原创 react18.0.0+ts路由配置
1.下载依赖npm i react-router-dom@5.2.0 react-router-config @types/react-router-config @types/react-router-dom -S2.在src目录下创建views文件夹，views内创建Home，About，Navbar三个tsx文件，其中Navbar用来控制路由，其他两个页面用来展示Home:import React, { Component } from "react"; export defa
2022-05-12 21:52:59
2234
2
原创 React+Ts+Hook通过改变元素高度来实现原生下拉
tsx中// 原生下拉（改变高度实现下拉效果）import {useEffect,useRef} from 'react'import './index.less'export default () => { const PullBox=useRef<HTMLDivElement | null>(null); let disY:number = 0; let y:number=0; let scale:number=0; let clientHeigh
2022-04-11 15:32:31
766
原创 react+ts手写一个简易轮播
这里包了两个大盒子，外面的设置x轴溢出滚动属性，里面的大盒子设置的宽度比外面的盒子要大，然后js使用scrollTo设置left值实现滚动，设置属性behavior的值为smooth实现平滑过渡。这里需要用到smollscroll-polyfill插件，如果没有使用这个插件，ios平滑过渡会不管用。tsx中import { Component, createRef } from "react";import './index.less';import smoothscroll from "sm
2022-03-30 19:57:49
1018
原创 react+ts实现左右联动
index.tsx中import { Component, createRef } from "react";import './index.less'interface Props {}interface NavListType { ID: string, Content: string}interface ContentListType { ID: string, Content: string}interface State { Ind
2022-03-28 16:12:23
453
原创 react+ts项目localStorage定时清除
import React, { Component, createRef } from 'react';interface Props {}interface State {}interface List { name: string, Age: string, address: string}export default class LocalClear extends Component<Props, State> { constructo.
2022-03-28 10:39:54
1088
原创 react+ts仿浏览器
index.tsx中import React, { Component, createRef } from 'react';import './index.less'interface Props{}interface State{ ButtonList:List[] Index:number}interface List{ id:string, txt:string}export default class AA extends Component&
2022-03-28 09:13:37
531
原创 react+ts滑动双球，区间定位相应图标加色
这是在for循环的标签内使用三元运算符，刚开始让所有的按钮颜色为红色，然后判断不在那个区间中的元素，背景色设置为灰色。index.tsx中//标签里写的切换import { Component } from "react";import './index.less';interface Props {}interface State { Num: number, MaxNum: number, ButtonList:Button[],}interface Butto
2022-03-21 20:31:53
720
原创 Vue反向代理
在vue.config.js中写devServer: { proxy: { // 配置跨域 "/api": { target: 'http://www.ibugthree.com/', // 想要访问接口域名 changeOrigin: true, // 开启跨域,在本地创建一个虚拟服务,然后发送请求的数据,并同时接收请求的数据,这样服务端和服务端进行数据交互就不会有问
2022-03-21 14:37:23
1198
原创 react+ts配置别名
1.首先将config文件夹暴露出来在命令提示符中依次输入以下代码git add .git commit -m '-'npm run eject2.打开config文件夹中的webpack.config.js文件，找到alias，就如下图所示位置配置3.找到tsconfig.json文件（这个文件在最外面），在compilerOptions 中配置"baseUrl": "./", "paths": { "@/*": ["src/*"] }
2022-03-17 07:44:17
1039
原创 css文字超过两行溢出隐藏
.title { width: 300px;//设置宽 overflow: hidden; //超出隐藏 text-overflow: ellipsis; //溢出用省略号显示 display: -webkit-box; // 将对象作为弹性伸缩盒子模型显示。 // 控制行数 .
2022-03-16 09:51:59
4684
1
原创 ts版axios二次封装
src中创建一个api文件夹，里面有两个文件request.tsimport axios from "axios";export const Service = axios.create({ timeout: 8000, //延迟时间 method: 'POST', headers: { "content-Type": "application/x-www-form-urlencoded", "pc-token": "4a82b
2022-03-14 20:22:00
808
原创 【React+TS】从零开始搭建react+typescript+router+redux+less+px2rem自适应+sass+axios反向代理+别名@（写到redux了）
一、通过create-react-app脚手架创建项目create-react-app 项目名 --template typescript在vscode中打开项目，可以看到顺利生成了react项目中有文件的后缀为tsx,此时说明成功创建了react+typescript项目，然后在命令提示符（也就是cmd打开的黑框）中cd+项目名进入项目，输入npm start即可打开项目。二、配置路由先下载依赖npm i react-router-dom@5.2.0 react-router-
2022-03-14 20:16:20
1473
1
原创 新版react中px转rem(webpack创建的项目)
1.安装postcss-pxtoremnpm i lib-flexible postcss-pxtorem -s2.在src目录下index.js里引入lib-flexibleimport "lib-flexible";3.修改webpack.config.js（这个文件在node_modules文件夹下的react-scripts文件夹下的config文件夹中）先引入const pxtorem = require('postcss-pxtorem');然后找到下图位置添加
2022-03-14 18:10:28
1716
2
原创 vue3遇到的数据渲染的坑
vue3异步可以使用suspense组件来实现了，在App.vue文件中用suspense标签包住<router-view/>标签，数据就能异步渲染出来了<suspense><router-view/></suspense>
2022-03-11 15:39:22
781
原创 vue+ts定义axios数据类型报错解决
在src目录下创建一个名字为axios.d.ts的文件，里面写import * as axios from 'axios'// interface Item {// ID: number// activity: string// after_sale: string// authen: string// bright_point: string// buy_time: string// car_price: string//
2022-03-11 15:35:13
1982
原创 关于数组去重
基本数据类型去重arr = [...new Set(arr)]; //这个只能去重基本数据类型引用数据类型去重 var obj = {}; arr = arr(function (item, next) { obj[next.ID] ? "" : (obj[next.ID] = true && item.push(next)); return item; }, []);这是利用reduce方法遍历数组,re
2022-01-30 17:24:12
918
原创 Vue vue-lazyload懒加载
1.下载插件npm install vue-lazyload -D2.在main.js中配置（当然也可以在组件中配置）// import Vue from "vue";import VueLazyload from "vue-lazyload";Vue.use(VueLazyload, { loading: require("../../assets/images/default.gif"), //加载中显示的图片 attempt: 3, preload:700 //预加载
2022-01-24 15:36:09
444
原创 微信小程序接口调用渲染
可以直接写onload函数中，也可以加在点击事件里 // 调用接口，发送网络请求 wx.request({ url: 'http://www.ibugthree.com/oldcar/getCarList/', //仅为示例，并非真实的接口地址 method: 'POST',//传输方式 //data里写的是参数 data: { page: 1, }, header
2022-01-05 15:51:36
428
原创 vue原生下拉刷新，上滑加载，延迟加载，预加载
<template> <div class="load-more"> <div class="load-more-loading"> <!-- <img src='./../assets/image/loading.gif'> --> </div> <div ref="loadMore" @touchstart="FnStart" @touchmove=.
2021-12-13 10:03:23
436
原创 react+ts双球交叉与碰撞
index.tsximport { Component } from "react";import './index.less';interface Props {}interface State { Num: number, MaxNum: number,}class Drag extends Component<Props, State>{ constructor(props: Props) { super(props); this.st
2021-12-13 08:32:46
83
原创 react+ts双球交叉和碰撞
index.tsximport { Component } from "react";import './index.less';interface Props {}interface State { Num: number, MaxNum: number,}class Drag extends Component<Props, State>{ constructor(props: Props) { super(props); this.st
2021-12-13 08:27:37
643
原创 react+ts点击返回顶部
index.tsximport './index.less'import { Component } from 'react'interface Props {}interface State {}class GoTop extends Component<Props, State>{ n: number = 0; start: number = 0; time: number = 1000; count: number = 0;
2021-12-10 10:37:52
259
原创 react+ts配置redux
下载依赖npm i react-redux react -D在公共目录src下的index.js中进行路由与redux进行连接import ReactDOM from 'react-dom';import './index.css';import App from './App';import reportWebVitals from './reportWebVitals';import {HashRouter as Router} from 'react-router-dom';
2021-12-08 11:45:49
1015
原创 TypeScript+React中axios的使用需要
在src下创建一个axios.d.ts的文件，并定义接口的类型里面写import axios from 'axios';declare module 'axios' { export interface AxiosResponse<T = any> extends Promise<T> {}}或者// axios接口的处理import * as axios from 'axios'declare module 'axios' { interfa
2021-12-07 16:16:20
841
2
原创 vue和react配置axios二次封装
先下载axiosnpm install axios然后在src文件夹里创建一个api文件夹，这个文件夹里有两个文件，request.js和index.jsrequest.js中写import axios from "axios"; export const Service = axios.create({ timeout: 3000, //延迟时间 method: 'POST', headers: { "content-Typ
2021-12-07 11:49:15
358
原创 react路由配置
1、下载相关依赖npm ireact-router-config -snpm i react-router-dom -s2、index.js中引入import{HashRouterasRouter}from'react-router-dom'3、app.js中引入import{Link}from'react-router-dom'import{renderRoutes}from'react-router-config';importro...
2021-12-02 19:13:44
395
原创 react配置反向代理
1、下载相关依赖cnpm i http-proxy-middleware --save -dev2、在src目录下新建 setupProxy.js 的文件3、然后在setupProxy.js写如下代码（2020-6-23日下载的版本）const { createProxyMiddleware } = require('http-proxy-middleware')module.exports = function (app) { app.use(createProxyMiddl...
2021-12-02 16:29:33
287
原创 ‘react-app-rewired‘ 不是内部或外部命令，也不是可运行的程序或批处理文件。
依赖没有装全，再装一下 react-app-rewirednpm install react-app-rewired
2021-09-13 12:16:30
4364
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人