- 博客(120)
- 收藏
- 关注
RSS订阅
原创 什么是webSocket？怎么使用webSocket中的第三方socket.io包
什么是webSocket？怎么使用webSocket中的第三方socket.io包http 协议http中文意思: 超文本传输协议, 定义服务器和客户端的传送格式请求发送的数据包, 叫请求报文, 格式如下响应回来的数据包, 叫响应报文, 格式如下HTTP 协议：客户端与服务器建立通信连接之后，服务器端只能被动地响应客户端的请求，无法主动给客户端发送消息。一次请求才能对应一次响应由于 http 是一次请求对应一次响应，无法达到即时通信的效果，所以在后面的 html5 .
2021-08-30 14:30:36
1484
2
原创 React + JavaScript 实现可拖拽进度条
totalTime: 设置总时间（秒）: 设置初始时间（秒）onChange: 时间变化时的回调函数。
2025-04-14 12:54:53
440
原创 echarts 图表在 div 容器盒子中根据 div盒子的大小变化自适应伸缩
echarts 图表在 div 容器盒子中根据 div盒子的大小变化自适应伸缩。// echarts 图标自适应缩放。// 参数是产生缩放的 DOM 盒子。// echarts 容器盒子。
2025-01-03 09:28:08
324
原创 case 管理页面静态布局以及功能实现
在做 react 项目的时候，项目需求中有一个展示家族成员 case 管理的画面，左侧以列表的形式展示成员以及成员相关的case 列表，左侧则是与列表case 时间相对应的图表展示实现方式如下：import { useState, useEffect, useRef } from 'react'import { Link } from 'react-router-dom'import { generateClient } from 'aws-amplify/api';import { Drop
2024-12-27 17:14:55
447
原创 react-router-dom v6 版本的使用方式以及踩坑
在目前 React 项目中使用 路由，默认安装版本已经升级到版本，相较于 v5 版本 v6 做了哪些改变？使用时有哪些踩坑？
2024-10-29 16:24:56
356
原创 前端页面中使用 ppt 功能，并且可以随意插入关键帧
要在前端页面中实现类似 PowerPoint 的功能，并且能够随意插入和控制关键帧动画，你可以使用 HTML、CSS 和 JavaScript 结合的方式来创建一个互动幻灯片系统。以下是一个详细的实现方案，包括如何插入和控制关键帧动画：首先，创建一个基本的 HTML 页面结构，用于展示幻灯片和按钮。2. JavaScript 实现幻灯片切换和关键帧动画通过 JavaScript 实现幻灯片的切换，并插入和控制关键帧动画。3. 高级功能和自定义动画你可以根据需要添加更多高级功能，比如：如果需要更复杂
2024-09-13 10:57:39
1218
原创 绝对定位导致内容自动换行问题解决
今天在做一个定位元素的时候遇到一个嵌套定位之后，使用绝对定位的元素的内容自动换行的问题，希望不换行只在一行显示。
2024-09-03 20:39:09
516
原创 Vue2 -- 自定义单选内容的单选框组件
之前做的一个项目，在项目中有一个关于人员权限分配的功能，给人员指定各个模块的权限信息，分为项目要求画面中只显示 W R 两个按钮控制指定权限信息，都不选择的时候权限为 none效果图
2023-03-30 18:00:17
979
原创 vue+elementui 项目 table表格自定义排序规则
在列中设置 sortable 属性即可实现以该列为基准的排序，接受一个 Boolean，默认为 false。可以通过 Table 的 default-sort 属性设置默认的排序列和排序顺序。可以使用 sort-method 或者 sort-by 使用自定义的排序规则。如果需要后端排序，需将 sortable 设置为 custom，同时在 Table 上监听 sort-change 事件，在事件回调中可以获取当前排序的字段名和排序顺序，从而向接口请求排序后的表格数据。
2022-09-30 15:32:44
6106
2
原创 vue 项目通过环境变量来设置项目 title
env.[mode].local # 只在指定的模式中被载入，但会被 git 忽略。.env.local # 在所有的环境中被载入，但会被 git 忽略。.env.[mode] # 只在指定的模式中被载入。.env # 在所有的环境中被载入。.env.development 开发环境。.env.production 生产环境。在 package.json 文件中配置。.env.staging 测试环境。
2022-09-23 15:55:56
2150
原创 vue 项目css预处理语言伪元素样式乱码解决
vue 项目 dart-sass在打包过程中会将伪元素content中的内容转义，会出现乱码问题。
2022-09-22 16:15:27
1468
原创 vue+element-ui 表格/列表的拖拽排序 --- sortablejs 包
简介：Sortable.js是一款优秀的js拖拽库，支持ie9及以上版本ie浏览器和现代浏览器，也可以运行在移动触摸设备中。支持 Meteor、AngularJS、React、Vue、Knockout框架和任何CSS库，如Bootstrap、Element UI。在做公司新项目的时候，提的新需求，原本定义的是点击箭头对列表进行排序，后来更改UI式样的时候要求做成拖拽排序…中文文档：https://www.itxst.com/sortablejs/f7nqyvbn.html。接下来简单介绍一个拖拽排序的包。
2022-09-03 22:31:18
879
2
原创 react 脚手架配置跨域代理
方法1在 package.json 文件中添加 proxy 节点{ "proxy": "需要代理到的 url（后端 url）"}这个方法简单但不是很完美，而且只能代理一个 URL，交易使用方法2方法2在 src 文件夹下创建 setupProxy.js 文件注意：这个文件里面得使用 commonjs 语法，不能使用 es6 语法const proxy = require('http-proxy-middleware')// 这里通常是导出一个对象，在这里导出一个函数modu
2022-05-28 22:44:52
330
1
原创 vue 路由守卫 -- 全局前置守卫
beforeEach在这个守卫里面可以做一些防止用户非法进入页面的操作，在进入页面的时候可以做一些用户信息验证，判断是否具有 token ，不具有的话禁止用户进入页面，可以提高安全性router.beforeEach((to, from, next) => { const token = localStorage.token; if(token) { next(); } else { if(to.path === '/index') { next() } else {
2022-03-24 14:00:00
1105
原创 vue + element-ui 前端实现分页效果，便于用户浏览
在项目中，后端可能不支持分页，请求回来数据很多，放到页面中不利于浏览查找，因此前端可以做一个伪分页效果代码<el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="[10, 20, 30, 50]" :page-size="10" layout="sizes, prev, pag
2022-03-01 18:34:42
1151
原创 input 框只允许输入正整数数字
原生js – input在项目中有些时候我们希望 input 框之能输入数字，比如 购物车里的商品数量等等<body> <input type="text" class="inp" maxlength="5"> <script> let inp = document.querySelector('.inp') inp.addEventListener('input', (e) => { in
2022-02-25 16:45:00
3650
原创 封装一个函数，输出2-n（任意数字）之间的素数
封装一个函数，输出2-n（任意数字）之间的素数function fn(n) { let arr = [] for (let i = 2; i <= n; i++) { for (let j = 2; j <= i; j++) { if (i % j === 0) { arr.push(i) } } if (arr.length === 1) {
2022-02-21 17:22:54
400
原创 vue 自定义多选框组件
自定义多选框组件<template> <div class="checkBox"> <input v-model="isInherit" @click="handlerChecked" :style="`width: ${width}px; height: ${height}px;`" type="checkbox" id="inp" /> <label for="inp"> <span :style="`font-
2022-02-17 16:28:16
1783
原创 vue + elementUI 手动控制 tree 组件节点的展开状态
vue + elementUI 手动控制tree组件节点的展开状态在日常工作中，会时常接触到 tree 结构的目录，在手动合并目录之后，不想一个一个再去展开，就需要一个按钮可以帮助用户一键展开 tree 结构，顺着这个需求寻求解决方法解决方案如下：<template> <div id="app"> <el-button ref="openBtn" @click="open">展开</el-button> <el-button r
2022-01-20 17:15:00
2429
1
原创 vue2 基础入门
vue2 基础入门一、vue 简介1.什么是 vue官方给出的概念：Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的前端框架。2.vue 的特性vue 框架的特性。主要体现在两个方面数据驱动视图双向数据绑定2.1 数据驱动视图 在使用了 vue 的页面中，vue会监听数据的变化，从而自动重新渲染页面的结构好处：当页面数据发生变化时，页面会自动重新渲染！注意：数据驱动视图是单向的数据绑定。2.2 双向数据绑定在填写表单时，双向数据绑定可以辅助
2022-01-15 18:21:15
5475
原创 htm引入element-ui后，报错GET file:///G:/new-vue2/dist-web/fonts/element-icons.woff net::ERR_FILE_NOT_FOUND
htm引入element-ui后，图标加载不出来，报错GET file:///G:/new-vue2/dist-web/fonts/element-icons.woff net::ERR_FILE_NOT_FOUND，解决办法点击下载根据报错的路径 找到对应的文件，新建 fonts 文件，把下载好的 两个文件 放进去即可解决问题...
2022-01-07 16:19:11
909
原创 解决使用 element-ui 的 table 组件时，表格里面有按钮聚焦问题
在按钮点击事件里面添加如下代码即可let r= this.tableData.findIndex((item) => item.index === row.index)document.querySelector(`tbody tr:nth-child(${r+1}) .el-table_1_column_4 .el-button`).blur()
2022-01-07 15:54:49
831
原创 vue 中通过添加原生 input 实现文件上传
文件上传是通过 input 框 且 type = 'file' 来实现的文件上传功能，在页面标签合适位置添加<input type="file" name="avatar" accept="image/gif,image/jpeg,image/jpg,image/png" style="display:none" @change="changeImage($event)" ref="avatarInput" /><!-- 在点
2021-12-30 17:45:00
5386
2
原创 vue3.0 入门基础
vue3前置为什么学vue3目标：了解vue3现状，以及它的优点，展望它的未来Vue3现状：vue-next 2020年09月18日，正式发布vue3.0版本。但由于刚发布周边生态不支持，大多数开发者处于观望。现在主流组件库都已经发布了支持vue3.0的版本，其他生态也在不断地完善中，这是趋势。element-plus 基于 Vue 3.0 的桌面端组件库vant vant3.0版本，有赞前端团队开源移动端组件库ant-design-vue Ant Design Vu.
2021-12-18 19:15:00
819
翻译 使用 Vue.js 构建 VS Code 扩展
使用 Vue.js 构建 VS Code 扩展Visual Studio (VS) Code 是开发人员在日常任务中最喜欢使用的代码编辑器之一。它的构建考虑到了可扩展性。在某种程度上，VS Code 的大部分核心功能都是作为扩展构建的。您可以查看 VS Code 扩展存储库 ( https://github.com/microsoft/vscode/tree/main/extensions ) 以了解我在说什么。VS Code 在底层是一个电子 ( https://www.electronjs.org
2021-12-17 19:30:00
1585
4
原创 vue2 与 vue3 生命周期对比
周期对比vue2vue3beforeCreatesetupcreatedsetupbeforeMountonBeforeMountmountedonMountedbeforeUpdateonBeforeUpdateupdatedonUpdatedactivetedonActiveteddeactivetedonDeactivetedbeforeDestoryonBeforeUnmountdestoryedonUn
2021-12-16 15:15:00
1181
转载 vue中keep-alive的使用及详解
vue中keep-alive的使用及详解概念keep-alive 是 Vue 的内置组件，当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 transition 相似，keep-alive 是一个抽象组件：它自身不会渲染成一个 DOM 元素，也不会出现在父组件链中。作用在组件切换过程中将状态保留在内存中，防止重复渲染DOM，减少加载时间及性能消耗，提高用户体验性原理在 created 函数调用时将需要缓存的 VNode 节点保存在 this.cache 中／在 render（页面渲
2021-12-13 17:35:42
418
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人