樱颜-优快云博客

原创用react class写选项卡

react hook 实现一个简单的选项卡功能

2022-06-13 09:46:15 289 1

原创两小球冲突，仿优信，拖动小球

小球互相排斥less:要记住写路由！

2022-06-01 21:01:00 503

原创 vue3.0 插槽，插槽的作用，匿名，具名，作用域

一看就懂的vue3插槽写法，匿名，具名，作用域

2022-05-10 15:33:38 679

tsx：import React, { Component,createRef} from 'react'import "./index.less"export default class index extends Component { index:number=0; x:number=0; x1:number=0; res=createRef<HTMLDivElement>() Hua=createRef<HTMLDivElement>()

2022-05-06 09:53:07 149

原创 react标题左右滑动轮播图

在我们日常中，不管在看什么软件的时候都有轮播图一样的东西效果图：我们话不多说：tsx:import {useRef,useEffect} from "react"import { start } from "repl"import "./index.less"export default function Swiper() { const drag = useRef<HTMLDivElement | null>(null) let x:number=0

2022-05-04 11:35:15 691

原创 react和vue的区别应用场景

目录：1. 监听数据变化的实现原理不同2. 数据流的不同3. HoC和mixins4. 组件通信的区别5. 模板渲染方式的不同6. 渲染过程不同7. 框架本质不同8. 开发过程中9. 开发应用时应用场景：react 和 vue 是我们做前端中必不可少的，一般看公司都在使用什么，你就要用什么，一般规模大的公司都会使用react+ts/react+hook，小公司使用vue2.0多一点，但不是全方面的，那么我们来说说react和vue有什么区别：1. 监听数据变化

2022-05-02 19:12:49 1149

原创 v u e 3.0写下拉刷新

先要下载vue3.0,在views里新建vue项目先看效果图：这是没上拉之前：这是上拉了之后：然后复制下面的代码：<template> <div class="pulldown" ref="pulldown"> <div class="pulldown-top"></div> <div class="pulldown-bottom"></div> <

2022-04-26 17:16:33 562

原创 v u e 3.0 写拖拽

先要下载vue3.0,在views里新建vue项目先看效果图：然后复制粘贴下面的代码<template> <div ref="drag" class="drag"></div></template><script lang="ts" setup>import {ref,onMounted} from "vue"const drag=ref(null)const disX=ref<number&gt..

2022-04-26 16:30:34 368

原创 v u e 3.0写选项卡

先要下载vue3.0,在views里新建vue项目先看效果图：然后复制粘贴下面的代码<template> <div class="tab"> <input v-for="(item,index) in tabButton" @click="FnStart(index)" :key="item.ID" :class="index===tabIndex?'btn ac':'ac'" type="button" :value="item.t.

2022-04-26 16:26:35 409

原创 git 用户名密码不正确报错

我在建立git仓库时，弹框上说我用户名还有密码错误，就报错：那么我们用别的办法是没有用的，所以，只要重新能在登录一次就可以，那么我们先打开控制面板>用户账号>凭据管理器选普通凭据删除就可以了，然后在git里面重新创建就可以了...

2022-04-25 19:49:52 1864

原创用react来实现PC端拖拽

效果图：tsx:import {useRef,useEffect} from 'react'import './index.less'export default function Drag() { let disX:number=0; let disY:number=0; let x:number=0; let y:number=0; const boxRef=useRef<HTMLDivElement | null>(null);.

2022-04-21 09:46:16 1049

原创用react来实现移动端和 PC端都可以实现的左右联动右边固定不动

效果图：tex:import React, { Component, createRef } from 'react'import './index.less'interface Props {}interface Content { ID: string, text: string, top: number, height: number}interface Button { ID: string, text: string}interface Stat

2022-04-21 09:40:31 720

原创用 js 来实现让别人复制不了你的页面文字

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do.

2022-04-21 09:32:49 173

原创 html 2048 简单小游戏

效果图：html 代码：<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>2048小游戏</title> <style> * { font-family: arial; /* user-select: none;*/ font-w

2022-04-13 08:28:25 5058 1

原创 echarts饼图和条形统计图实例

效果图：代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &.

2022-04-01 10:55:09 947

原创 react 写左右联动

效果图：代码：tsx:import React, { Component, createRef } from 'react'import './index.less'interface Props {}interface Content { ID: string, text: string, top: number, height: number}interface Button { ID: string, text: string}inter.

2022-03-30 09:41:17 581

原创 HTML写简单贪吃蛇

HTML简单贪吃蛇，会变色的贪吃蛇

2022-03-30 08:23:35 1313 1

weixin_58160355的博客