- 博客(48)
- 资源 (1)
- 收藏
- 关注
原创 使用阿里字体图标
iconfont-国内功能很强大且图标内容很丰富的矢量图标库,提供矢量图标下载、在线存储、格式转换等功能。阿里巴巴体验团队倾力打造,设计和前端开发的便捷工具。iconfont-阿里巴巴矢量图标库。
2024-08-07 11:27:30
181
原创 解决使用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
5767
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
385
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
2268
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
782
原创 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
1031
原创 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
483
原创 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
1094
原创 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
553
原创 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
726
原创 Vue反向代理
在vue.config.js中写devServer: { proxy: { // 配置跨域 "/api": { target: 'http://www.ibugthree.com/', // 想要访问接口域名 changeOrigin: true, // 开启跨域,在本地创建一个虚拟服务,然后发送请求的数据,并同时接收请求的数据,这样服务端和服务端进行数据交互就不会有问
2022-03-21 14:37:23
1225
原创 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
1077
原创 css文字超过两行溢出隐藏
.title { width: 300px;//设置宽 overflow: hidden; //超出隐藏 text-overflow: ellipsis; //溢出用省略号显示 display: -webkit-box; // 将对象作为弹性伸缩盒子模型显示。 // 控制行数 .
2022-03-16 09:51:59
4729
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
826
原创 【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
1604
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
1755
2
原创 vue3遇到的数据渲染的坑
vue3异步可以使用suspense组件来实现了,在App.vue文件中用suspense标签包住<router-view/>标签,数据就能异步渲染出来了<suspense><router-view/></suspense>
2022-03-11 15:39:22
800
原创 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
2036
原创 关于数组去重
基本数据类型去重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
923
原创 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
456
原创 微信小程序接口调用渲染
可以直接写onload函数中,也可以加在点击事件里 // 调用接口,发送网络请求 wx.request({ url: 'http://www.ibugthree.com/oldcar/getCarList/', //仅为示例,并非真实的接口地址 method: 'POST',//传输方式 //data里写的是参数 data: { page: 1, }, header
2022-01-05 15:51:36
442
原创 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
450
原创 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
89
原创 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
649
原创 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
274
原创 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
1022
原创 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
856
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
360
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人