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 256

原创 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-domnpm install react-router-dom@5.2.0

2021-12-02 18:56:19 793

原创 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 801

原创 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 registryhttps://registry.npm.taobao.org2.创建react项目npm install -g create-react-appcreate-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 441