Hi-Sun的博客

vue3实现一个接球小游戏

Helloyaling — Thu, 11 Jul 2024 17:59:29 +0800

使用 Vue3 + ts + canvas 实现一个web端接球小游戏，主要交互包括：操作键盘的【】来滑动手柄去接球、游戏开始、游戏暂停、游戏继续、游戏重新开始、游戏失败，用到的知识包括：ts、canvas绘图、事件监听器的添加与移除，定时器的使用与移除。

vue3实现简单登录页面

Helloyaling — Tue, 09 Jul 2024 16:24:56 +0800

使用 Vue3 + ts + scss + element-plus 实现简单的用户登录界面，登录方式包括：手机验证码登录、手机账号密码登录、扫码登录

TS实现排序算法之选择排序

Helloyaling — Mon, 08 May 2023 09:56:26 +0800

TS实现排序算法之选择排序

React实现插入变量输入框

Helloyaling — Thu, 20 Apr 2023 17:36:19 +0800

本文提供一个插入变量组件，该组件可实现在输入框内插入固定格式的变量值，包含必要的校验，在文章末还提供一个联动插入变量输入模块的组件，该模块包含变量输入框模块+可编辑表格模块+预览模块

TS实现排序算法之选择排序

Helloyaling — Tue, 12 Jul 2022 10:21:41 +0800

TS实现排序算法之选择排序

TS实现排序算法之插入排序

Helloyaling — Mon, 11 Jul 2022 19:16:43 +0800

TS实现排序算法之插入排序

TS实现排序算法之冒泡排序

Helloyaling — Mon, 11 Jul 2022 19:15:30 +0800

TS实现排序算法之冒泡排序

TS实现原生数组方法之pop()、push()、shift()、unshift()

Helloyaling — Mon, 11 Jul 2022 19:08:31 +0800

TS实现原生数组方法之pop()、push()、shift()、unshift()

TS实现原生数组方法之遍历：filter()

Helloyaling — Mon, 11 Jul 2022 19:05:48 +0800

TS实现原生数组方法之遍历：filter()

TS实现原生数组方法之遍历：reduce()

Helloyaling — Mon, 11 Jul 2022 19:04:49 +0800

TS实现原生数组方法之遍历：reduce()

TS实现原生数组方法之遍历：every()、some()

Helloyaling — Mon, 11 Jul 2022 19:01:57 +0800

TS实现原生数组方法之遍历：every()、some()

TS实现原生数组方法之遍历：forEach()、map()

Helloyaling — Mon, 11 Jul 2022 18:59:51 +0800

使用TS实现原生数组方法之遍历-forEach()、map()

TS实现原生数组方法之slice()

Helloyaling — Mon, 11 Jul 2022 18:54:54 +0800

使用TS实现原生数组方法-slice()

TS实现原生数组查找方法：find()、findIndex()、includes()、indexOf()、lastIndexOf()

Helloyaling — Mon, 11 Jul 2022 18:52:11 +0800

使用TS实现原生数组查找元素方法，包括find()、findIndex()、includes()、indexOf()、lastIndexOf()

TS实现数组原生方法之flat()

Helloyaling — Mon, 11 Jul 2022 18:48:05 +0800

使用typescript实现原生数组flat方法

使用React Hooks实现三列选择对话框

Helloyaling — Wed, 24 Nov 2021 15:26:55 +0800

效果如下图所示： import { FC, useState } from 'react'; import { Button } from 'antd-mobile'; export interface LocationCityType { cityId: string; cityName: string; } //城市列表 const activityCityList = [{ cityId: "110100", cityName: "北京" }, { cityId: "310

react函数组件+antd实现多选框全选取消全选单选功能

Helloyaling — Mon, 27 Sep 2021 18:55:25 +0800

import React, {FC,useState} from “react”; import { Checkbox, Divider, Form} from “antd”; const newPortrait: FC = () => { const [chooseLabel, setChooseLabel] = useState([]) // 选择的多选标签 const [checkAll, switchCheckAll] = useState(false); // 全选

针对antd的多级多选框Checkbox只有第一个勾选有效的问题原因之一

Helloyaling — Mon, 27 Sep 2021 16:15:52 +0800

如下图所示的一层嵌套一层的多选框，需要在Checkbox外包裹一层Checkbox.Group，否则每次点击选中，尽管checked属性已经变为了true，但是页面上只对第一次点击勾选的选项有效，后面点击的均无效，即都没有勾选上 ...

react函数组件+ts+antd实现基本表单

Helloyaling — Mon, 27 Sep 2021 16:02:31 +0800

使用React函数组件以及antd实现基本的表单，实现效果如下图所示，具有基本的表单校验功能 import React, { FC, useState } from "react"; import { Button, Checkbox, Form, Input } from "antd"; const Test: FC = () => { const [profileNameLength, setProfileNameLength] = useState(0)

Vue项目部署到Linux服务器

Helloyaling — Tue, 16 Jun 2020 21:04:21 +0800

首先用到两个软件，一个是Xshell，一个为Xftp，下面是我的百度网盘文件，永久有效嗷。链接：https://pan.baidu.com/s/1ZkasG_HzgIEdUqdIgCBPaw 提取码：s1r1 其中Xshell为终端连接工具，我们连接Linux服务器用的就是它，而Xftp则帮助我们在windows系统下和Linux系统进行文件传输,首先我们安装下载完两个软件以后，先打开Xshell,点击左上角新建，输入Linux服务器的主机号，端口号密码等，连接服务器，然后再打开Xftp，点击窗.