wpb1109-优快云博客

原创 React+TS实现两小球碰撞

TS代码 import React, { Component, createRef } from 'react'; import './index.less' interface Props { } interface State { } class Ball extends Component<Props, State> { startX: number = 0 parent?: HTMLDivElement child!: HTMLCollection; .

2021-12-13 09:19:32 255

原创 react+TS实现返回顶部

第一种 js代码 import { Component, createRef } from "react"; import './scrolltop.css' interface Props { } interface State { } export default class ScrollTop extends Component<Props, State>{ ball = createRef<HTMLDivElement>(); time: num..

2021-12-10 10:43:12 422

原创 React路由报错 ‘Switch‘ is not exported from ‘react-router‘.

配置路由报错 'Switch' is not exported from 'react-router'. npm uninstall react-router-dom npm install react-router-dom@5.2.0

2021-12-02 18:56:19 792

原创 JS数据转换 —— 树形结构和平铺结构的转换

正向-树形结构转平铺 // 正向-树形结构转平铺 // 从外到内依次递归，有 children 则继续递归 function treeToArr(data, pid=null, res=[]) { data.forEach(item => { res.push({ pid: pid, id: item.id, name: item.name }); if(item.children && item.children.length !== 0) {

2021-09-16 19:45:52 638

原创 React+tsx实现选项卡功能

tsx代码 import { Component } from "react"; import './index.less' interface Props { } interface User { ID: string, text: string } interface Con { ID: string, text: string } interface State { ButtonIndex: number ButtonList: User[]

2021-09-16 19:40:50 799

原创 vue脚手架中实现二级联动

html代码 <template> <div class="linkage"> <div class="linkage-button" ref="linkage-button"> <div class="linkage-button-list" ref="linkage-button-list"> <div :class=" index == ButtonListIn

2021-09-16 19:36:32 173

原创创建react项目，并配置less，以及配置less报错的解决方式和修改源

1.修改源查看源 npm config get registry 默认源 npm config set registry https://registry.npmjs.org 切换淘宝源 npm config set registry https://registry.npm.taobao.org 2.创建react项目 npm install -g create-react-app create-react-app 项目名称 3.在react中配置les...

2021-09-16 19:28:11 346

原创 React+tsx实现拖拽效果 (PC端+移动端)

tsx代码 import './index.less' import { Component, createRef } from 'react' interface Props { } interface State { } class Drag extends Component<Props, State> { disX: number = 0; disY: number = 0; dragElement = createRef<HTMLDivElemen

2021-09-16 19:11:15 589

原创 vue 中进度条小球

交叉 <template> <div class="about"> <div class="line"></div> <div class="line active"></div> <div class="small-ball" @touchstart="FnStart"></div> <div class="small-ball ac" @touchstart="F

2021-08-23 11:53:37 440