郭德峰-CSDN博客

原创 vue3.0+ts实现拖拽

1.html部分<template> <div class="about"> <h1>拖拽demo</h1> <p id="drag"></p> </div></template>2.js部分<script lang="ts">import { reactive, toRefs, onMounted } from "vue";export default

2022-04-26 10:48:32 824

1.代码块<template> <div class="cont"> <input v-for="(item,index) in tabbutton" :key="item.ID" @click="Fnstart(index)" :class="selectindex===index?'button-item ac':'button-item'" type="button" :value="item.text"> <div

2022-04-26 10:45:52 376

原创 vue里使用vuex记录位置

在你跳转前的页面里添加跳转到详情页的路由 @click="$router.push('/details')"2.在你的router文件夹下里的index跳转前的路由里设置 { path: '/teacher', name: 'teacher', component: () => import(/* webpackChunkName: "about" */ '../views/teacher.vue'), meta: {...

2022-04-18 11:36:28 695

原创 Vue.js小球抛物线懒人代码

<template><div> <div>你的内容部分  <div class="box" @click="addClick"></div>//这里的点击事件加给你要触发抛物的元素 </div>  <div v-for="(ball, index) in balls" :key="index"> .

2022-04-18 11:34:09 95

原创 react+ts实现小球交叉，小球互推，并高亮

代码tsx部分import { Component, createRef } from "react";import './xian.less'; interface Props { }interface State { Num: number, MaxNum: number, Rightlist: xian[] Leftlist: xian[]}interface xian { id: string, text: number}

2022-04-18 11:31:49 60

原创 react+函数组件（hook）实现轮播

import React, { useEffect,useState,useRef } from 'react';import './index.less'import banner1 from './b793160fbad541631a022e0ab497bb8.jpg';import banner2 from './b8287ba40b27869d00a2aa27a9f5195.jpg';import banner3 from './bb56fd4164f3d576684b1278ee74e9.

2022-04-18 11:25:19 214

原创小球交叉

tsx代码import React,{Component,createRef} from 'react'import './pull.less'class Pull extends Component{ Indexone=createRef<HTMLDivElement>() Parent: any = React.createRef(); BallLeft: any = React.createRef(); BallRight: any = React

2022-03-18 10:05:14 62

原创拖拽强制刷新记录位置

tsx代码import React, { Component, createRef } from "react";import './tuozhuai.less'export default class Navbar extends Component { disX: number = 0 disY: number = 0 x: number = 0 y: number = 0 num: number = 0 drag = createRef<

2022-03-17 17:22:57 46

原创 react+typescript+自动轮播选项卡

tsx 代码import React, { Component } from "react";import "./xuanxiangka.less";// reduximport { connect } from "react-redux";// import { setName, setAge } from "../store/action";interface Props {}interface State { SelectIndex: number, B

2022-03-17 16:16:59 68

原创 window.scroll({ behavior: ‘smooth‘ }) 在移动端不生效的问题解决

首先，遇到问题，一般百度解决不了。如果你是百度搜到我的那你真是幸运，反正我百度没搜到解决方法，最后还得靠goole。先直接上解决方案：// 安装这个插件yarn add smoothscroll-polyfill 或者 npm i smoothscroll-polyfill 在你需要解决问题的页面引入：import smoothscroll from 'smoothscroll-polyfill';执行这个方法：smoothscroll.polyfill(); 好了问题解决。

2021-12-09 11:15:35 1480

原创 React+TypeScript如何使用Redux

记录一下React+TypeScript如何使用redux一、截至本篇文章发布依赖均为最新版本，版本号如下"@types/react": "^17.0.37","@types/react-dom": "^17.0.11","@types/react-redux": "^7.1.20","react": "^17.0.2","react-dom": "^17.0.2","react-redux": "^7.2.6","react-router-dom": "^6.0.2","rea

2021-12-07 16:58:36 434

原创 typescript配合react创建项目

1.先创建项目create-react-app 项目名称--template typescript2.剩下的就跟react配置是一样的

2021-12-06 17:16:21 267

原创 typescript+react项目中如何配置api（axios）

1.首先先下载依赖npm i @types/axios -S2.在src文件夹下创建一个api的文件3.在api文件夹中创建两个.ts结尾的文件4.request.ts中的配置import axios from "axios";export const Service = axios.create({ timeout: 8000, //延迟时间 method: 'POST', headers: { "content-Ty.

2021-12-06 16:04:59 924

原创 react导航栏二级联动

效果图js 代码 import { Component } from "react";import './scroll.less' class Scroll extends Component { constructor(...args) { super(...args) this.state = { list: [ { id: 1, title: '列表1' }, ..

2021-12-06 16:00:32 212

原创 typescript+react实现选项卡功能

1.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-12-06 15:59:36 371

原创 vue解决ios橡皮筋回弹

通过监听 touchmove 事件：当手指在屏幕上滑动的时候连续地触发。在这个事件发生期间，调用preventDefault()事件可以阻止滚动。

2021-11-11 15:55:23 2507

原创 react配置px转换rem

安装相关的依赖npm i lib-flexible --savenpm i postcss-px2rem --save主要用来暴露项目配置npm run eject！如果运行npm run eject报错，出错的原因应该是仓库里面代码没有提交，如下提交一下git add .git commit -m '自定义名'npm run eject然后打开项目中 config->webpack.config.js 进行配置// 在配置文件中添加如下两行代码..

2021-09-01 15:44:54 238

m0_60584958的博客