- 博客(61)
- 问答 (1)
- 收藏
- 关注
RSS订阅原创 echarts线的颜色修改
//左上温度湿度Echarts initlt() { this.chartsL_t = this.$echarts.init(this.$refs.chartsl_t); this.optionlt = { tooltip: { trigger: "axis", }, legend: { data: ["温度1", "温度2"], textStyle: {
2022-03-21 18:06:11
4372
原创 echarts 渐变
series: [ { name: "电流(A)", type: "line", showBackground: true, itemStyle: { color: "#437EE0" }, areaStyle: { color: { type: ...
2022-03-02 20:07:20
536
原创 ElementUi 表格的滚动条获取
在el-table身上有个bodyWrapper属性，我们可以通过这个属性拿到真实DOM从而来操作滚动条代码： <el-table ref="chatListRef">...</el-table> // 滚动条滚动到底部 this.$refs.chatListRef.bodyWrapper.scrollTop = this.$refs.chatListRef.bodyWrapper.scrollHeight...
2022-02-18 17:34:05
2373
原创 vue自定义指令 页面加载触发点击事件 （传参调用函数）
vue页面加载调事件，传参<button @click = aaa(bbb) v-trigger v-show = 'false'>按钮</button> var vm = new Vue({ el: "#financingCheck", // 自定义指令 自动触发点击事件 v-trigger directives:{ trigger:{ i
2021-12-27 17:00:58
1494
原创 getBoundingClientRect 视口的距离
const onScroll = () => { //getBoundingClientRect相对视口的距离 const rect = refAutor.current!.getBoundingClientRect() if (rect.top <= 0) { setIsShowAuthor(true) } else { setIsShowAuthor(false) } }//副作用 useEffect(() => .
2021-12-09 21:32:04
347
原创 代码高亮highlight.js
实现嵌入文章中的代码带有语法高亮效果通过 highlight.js 库实现对文章正文 HTML 中的代码元素自动添加语法高亮示例import hljs from 'highlight.js'import 'highlight.js/styles/vs2015.css'import { useEffect } from 'react'export default function Question () { useEffect(() => { // 配置 highlight.js
2021-12-09 20:40:07
532
原创 防XSS攻击
XSS攻击人们经常将跨站脚本攻击（Cross Site Scripting）缩写为CSS，但这会与层叠样式表（Cascading Style Sheets，CSS）的缩写混淆。因此，有人将跨站脚本攻击缩写为XSS。XSS攻击通常指的是通过利用网页开发时留下的漏洞，通过巧妙的方法注入恶意指令代码到网页，使用户加载并执行攻击者恶意制造的网页程序。这些恶意网页程序通常是JavaScript，但实际上也可以包括Java、 VBScript、ActiveX、 Flash 或者甚至是普通的HTML。攻击成功后，
2021-12-09 19:31:33
229
原创 React 搜索框 封装关键字高亮函数
思路：函数需要传入两个参数，第一个参数为被查询的元素，第二个参数为查询的关键字。给查询到的关键字用包裹实现代码如下：// 封装高亮函数(被查询的元素，查询字符)function highLight (str: string, keyword: string) { // 使用replace通过正则查找keyword里对应的字符 (区分大小写)，(match)是匹配的字符，返回一个模板字符串给查询到的关键字添加<span></span>标签 return str.re
2021-12-08 18:35:40
548
原创 用IntersectionObserver实现图片懒加载
懒加载的基本思路当dom元素进入可视区域时，才去加载它利用浏览器提供的 IntersectionObserver，监听图片元素是否进入可视区域，进入后才真正去设置图片元素的 src 属性进行图片加载格式：var dom = dom元素// 实例化一个观察者// 它的参数1是一个回调：当被观察的目标进入视口/离开视口就会调用var observer = new IntersectionObserver((entries)=>{ console.log(entries[0].isInte
2021-12-08 09:16:00
509
原创 401问题-响应拦截器
401错误的场景有如下两种情况会出现401错误：未登陆用户做一些需要权限才能做的操作（例如：关注作者），代码会报出401错误。这种情况下，应该让用户回到登陆页。登录用户的token过期了整体目标是：通过axios响应拦截器来处理401问题。理解token过期登陆成功之后，接口会返回一个token值，这个值在后续请求时通过请求头时带上（就像是开门钥匙）。但是，这个值一般会有有效期（具体是多长，是由后端决定），在我们的项目中，这个有效期是2小时。如果你上午8点登陆成功，到了10：01分，则to
2021-12-05 09:22:09
1523
原创 React非组件之内的路由跳转-封装工具
封装独立的history创建文件 src\utils\history.tsimport { createBrowserHistory } from 'history'const history = createBrowserHistory()export default history使用：import history from '@/utils/history'function App () { return ( <div className="app">
2021-12-04 20:36:32
506
原创 React滚动条优化-滚动条滚动到最底部
当消息较多出现滚动条时，有后续新消息的话总将滚动条滚动到最底部。声明一个 ref 并设置到聊天列表的容器元素上// 用于操作聊天列表元素的引用const chatListRef = useRef(null)<div className="chat-list" ref={chatListRef}>通过 useEffect 监听聊天数据变化，对聊天容器元素的 scrollTop 进行设置：// 监听聊天数据的变化，改变聊天容器元素的 scrollTop 值让页面滚到最底部useEf
2021-12-04 20:01:07
4445
1
原创 WebSocket
WebSocket 是一种数据通信协议，类似于我们常见的 http 协议。初次接触 WebSocket 的人，都会问同样的问题：我们已经有了 HTTP 协议，为什么还需要另一个协议？它能带来什么好处？答案很简单，因为 HTTP 协议有一个缺陷：通信只能由客户端发起。http基于请求响应实现。举例来说，我们想了解今天的天气，只能是客户端向服务器发出请求，服务器返回查询结果。HTTP 协议做不到服务器主动向客户端推送信息。这种单向请求的特点，注定了如果服务器有连续的状态变化，客户端要获知就非常麻烦。我们
2021-12-04 19:58:07
410
原创 react路由拦截组件
判断是否有Token有则放行，没有则跳转登录页import { hasToken } from '@/utlis/storage'import { Route, Redirect, RouteProps } from 'react-router-dom'//用PrivateRoute 包裹的路由需要token才能访问-----//<PrivateRoute path ='/home'>//<home />//</PrivateRoute>export con
2021-12-04 11:46:36
816
原创 自定义hooks-逻辑复用-封装useEffect和useSelector
导入用到的包将相同的逻辑，直接封装到 useInitState 函数中将不同的地方，作为 useInitState 函数的参数将拿到的状态作为 useInitState 函数的返回值// 逻辑复用--页面加载发请求存到redux中-拿回来渲染import { RootState } from '@/types/store'import { useEffect } from 'react'import { useDispatch, useSelector } from 'react-redu.
2021-12-03 22:33:11
1150
原创 自定义Hooks-逻辑复用-倒计时代码
// 自定义Hooks逻辑复用 ---倒计时import { useEffect, useRef, useState } from 'react'// useCountDown(倒计时的总时间, 倒计时结束执行的操作)export default function useCountDown (initCount = 10, callBack = () => {}) { const timeId = useRef<{ id: number }>({ id: 0 }) cons
2021-12-02 19:31:22
1119
原创 一篇博客带你了解TypeScript的基本用法
TypeScript介绍TypeScript是JavaScript的超集， 完全兼容JavaScript代码的同时 还给我们提供了类型支持的概念。TS属于静态类型的编程语言它要先编译，再执行。不能直接执行，需要编译成js才能执行它会在编译期间做类型检查，从而提前发现错误。配合 VSCode 等开发工具，TS 可以提前到在编写代码的同时就发现代码中的类型错误，减少找 Bug、改 Bug 时间生态Vue 3 源码使用 TS 重写、Angular 默认支持 TS、React 与 TS 完美配合，T
2021-11-24 12:07:45
1057
原创 null，undefined 的区别
null 和 undefined 基本同义 ，他们在 if 语句中 null 和 undefined 都会转为false，他们转换成number数据类型时，null 会转成 0，undefined 会转成 NaNnull的类型是Objct，undefined类型是undefined 并不全等他们的区别是null表示没有对象，该处不应该有值典型的场景是：作为函数的参数，表示该函数的参数不是对象作为对象原型链的终点undefined表示缺少值，即此处应该有值，但没有定义典型的场景是：
2021-11-15 16:51:48
834
原创 React中的那些Hook的使用
Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特，Hook 在 class 内部是不起作用的。但你可以使用它们来取代 class 。???? State Hook（useState）useState可以为函数组件提供状态当我们想要在函数组件中，使用组件状态时，就要使用 useState 这个Hook 了useState的使用：????1. 导入useStateimport {useState} from 're
2021-11-13 18:34:52
1423
1
原创 React的Hooks是什么？
hook是函数 他让函数组件拥有生命周期和状态等，原本 在Class 组件中才提供的功能Hooks 只能在函数组件中使用可以理解为通过 Hooks 为函数组件钩入 class 组件的特性Hooks 前后，组件开发模式的对比React v16.8 以前： class 组件(提供状态) + 函数组件(展示内容)React v16.8 及其以后：class 组件(提供状态) + 函数组件(展示内容)Hooks(提供状态) + 函数组件(展示内容)混用以上两种方式：部分功能用 class 组
2021-11-12 21:33:04
669
原创 Vue项目中优化方案有哪些？
Vue的优化方案有以下几点：使用 mini-css-extract-plugin 插件抽离 css配置 optimization 把公共的 js 代码抽离出来通过 webpack 处理文件压缩不打包框架、库文件，通过 cdn 的方式引入小图片使用 base64配置项目文件懒加载UI 库配置按需加载开启 Gzip 压缩...
2021-11-10 15:43:03
959
原创 Vuex 的出现解决了什么问题？（总结vue中的一些知识点）
主要解决了以下二个问题:1.多个组件依赖于同一状态时，对于多层嵌套的组件的传参将会非常繁琐，并且对于兄弟组件间的状态传递无能为力2.跨组件传参的行为需要变更同一状态。以往采用父子组件直接引用或者通过事件来变更和同步状态的多份拷贝。以上的这些模式非常脆弱，通常会导致无法维护的代码。...
2021-11-08 23:58:50
847
原创 React组件之间的通讯（未完）
React组件通讯的三种方式1，父子组件传值（props）2，兄弟组件传值（props）3，跨组件传值（createContext ）使用props传值 我们需要注意这三点：单向数据流（自上而下，当父组件的传过来的数据在父组件内发生了变化，子组件也会改变，子不能修改父）只读的（只能读，不能修改 ，谁传过来的数据就在谁的组件里修改）可以传递任何数据（对象，数组，函数，jsx…）porps的基本用法：1.父子组件通讯1-1父传子目标：把父组件里的num 传给子使用父组件：impo
2021-11-08 21:26:52
216
2
原创 watch、methods 和 computed 的区别?（总结vue里的一些知识点）
methods,watch 和 computed 都是以函数为基础的，我们把他们分为以下几个方面对比：默认加载时：先加载computed 然后再加载watch，不加载methods触发条件：computed 与 watch 都是以 Vue 的依赖为基础，当所依赖的数据发生变化的时候会（自动）触发相关的函数去实现数据的变动methods 里面是用来定义函数的，需要手动才能执行对比watch、computed：computed：vue的计算属性，支持缓存，只有依赖数据发生改.
2021-11-07 16:20:04
218
原创 怎么在 watch 侦听开始之后立即被调用？（总结vue中的一些知识点）
watch 是vue的侦听器 可以侦听data/computed 属性值的改变 当数据发生变化时，及时做出响应并处理。他有三个属性 ：1，deep 深度监听2，immediate 立即侦听(网页打开handler执行一次)3，handlerwatch中需要具体执行的方法我们想在侦听开始之后立即被调用 可以设置他的 immediate:true 就可以了...
2021-11-07 14:15:59
603
原创 Vue.cli 中怎样使用自定义的组件（总结vue中的一些知识点）
大体可以分为4步一，在 components 目录新建你的组件文件二，在需要用到的页面import中导入三，使用component注册四，在 template 视图中使用组件标签注意：如果是驼峰命名法注册命名的组件 使用时用“-”代替...
2021-11-06 22:36:20
841
原创 Vue 组件里的定时器要怎么销毁？（总结vue中的一些知识点）
分两种情况一 ，页面中有多个定时器可以在data 里定义一个对象 对象里给每个定时器取个名字一 一映射 在beforeDestroy （实例销毁之前）里for in循环定时器的对象 clearInterval 清除全部定时器二 ，只有单个定时器给定时器一个名字 直接使用clearInterval（定时器名）...
2021-11-06 22:12:18
524
原创 Hello React （创建自己的第一个React 页面）
Rract是啥？React 是用于构建用户界面的 JavaScript 库构建用户界面. User Interface，对咱们前端来说，简单理解为：HTML 页面javscrtipt库。不是框架，是库， react 全家桶才是框架react 全家桶：react: 核心库react-dom: dom操作react-router：路由,redux：集中状态管理背景Rract最牛逼！全球使用最多特点声明式用类似于html的语法来定义页面。react中通过数据驱动视图的变
2021-11-05 23:15:42
2421
1
原创 Vue 组件如何进行传值的?（总结Vue的一些知识点）
在Vue中的组件传值分为3种：父传子、子传父、和兄弟之间传值；第一种父传子：主要是通过子组件上定义props接收来实现具体实现步骤是：1. 父组件引入子组件并注册，在子组件标签上添加要传递的属性2. 在子组件上定义一个props对象，定义好接收的属性名，接收有两种形式一是通过数组形式，要接收的属性[]，接收过来的数据可以直接使用，二是通过对象的形式来接收{}，对象形式可以设置要传递的数据类型和默认值。第二种子传父：主要是通过 $emit来实现具体步骤是：1..
2021-11-05 22:31:45
344
原创 组件中写 name 选项有什么作用？（总结Vue的一些知识点）
1.当项目使用keep-alive时移除keep-alive状态下组件自动缓存功能我们在App.vue中使用了keep-alive导致我们第二次进入的时候页面不会重新请求ajax，因为mounted() 钩子函数只会执行一次。有两个解决方案,一个增加activated()函数,每次进入新页面的时候再获取一次数据。还有个方案就是在keep-alive中增加 exclud=“name”，移除选中页面的缓存2.DOM做递归组件时一个组件要用自己的时候，可以通过自己的名字来使用自己。比如说d.
2021-11-05 22:30:17
778
原创 css强制一行显示超出的部分显示点点点
要达到的效果：1.首先盒子应该有固定的宽度width:200px2.设置 溢出隐藏overflow: hidden3.设置文本强制在一行显示 white-space: nowrap;4.设置文本溢出显示省略号text-overflow: ellipsis;做完这几步我们就能拿到想要的效果了...
2021-11-04 17:58:46
3928
原创 防抖的使用
防抖(debounce)触发同一事件太快，以致于发送了多次请求，所以需要防抖 减少一段时间内事件发送的次数 减轻服务器压力 一段时间内用户无操作则发送请求 这段时间内又被触发，则重新计时。实现原理：设置一个定时器，通过闭包，抓住定时器变量，控制定时器的添加和清除实现防抖在vue中 时间函数的名字在data里定义好 然后把时间函数赋给他data () { return { // 定时器的名---防抖 timer: null, } } methods: {
2021-11-02 22:06:31
309
原创 写项目时简单封装了一个点击弹出视频播放的组件（需要可以拿去玩玩）
效果图：因为封装的时候主要是为了让代码更简洁 没想复用这一块 所以使用起来不是很灵活 可以参考一下具体如下：父组件：给点击弹出视频的元素添加一个点击事件把视频的url地址传过来 我这里添加的是movesrc属性是视频的播放地址//父组件<artVidao :src="scopes" ref="vidao" />//使用$refs使用子组件里的方法弹出视频checkVideoFun() move (row) { this.scopes = row t
2021-11-01 22:52:40
252
原创 history路由模式和hash路由模式的区别
hash模式hash模式 ：使用 URL 的 hash 来模拟一个完整的 URL, 其显示的网络路径中会有 “#” 号http://www.abc.com/#/hellohash 虽然出现URL中，但不会被包含在HTTP请求中，对后端完全没有影响，因此改变hash后刷新, 也不会有问题、hash 模式下，只有 hash/# 符号之前的内容会被包含在请求中，如 http://www.abc.com，因此对于后端来说，即使没有做到对路由的全覆盖，也不会返回 404 错误history模式histor
2021-10-30 00:22:35
207
原创 导入Excel遇到的格式问题
1. Excel表格导入时，将中文key转为英文keyExcel表格中读入的是姓名,而后端需要的是username[{'姓名'：'小张'， '手机号': '13712345678'}{.....}] 我们需要将他转换为[ {'username'：'小张'，'mobile': '13712345678'}, {.....} ]复制代码把一个对象数组中的每个对象的属性名，从中文改成英文思路：对于原数组每个对象来说找出所有的中文key得到对应的英文key拼接一个新对象： 英文ke
2021-10-28 23:00:24
596
原创 RBAC权限管理（不同用户角色进入到系统能访问的页面不同）
RBAC权限控制（效果图在底部）为了达成不同的帐号登陆系统后能看到不同的页面，能执行不同的功能的目标，我们有很多种解决方案，RBAC(Role-Based Access control)权限模型 ，也就是基于角色的权限分配解决方案。三个关键点:用户： 就是使用系统的人（员工）权限点：这个系统中有多少个功能（例始：有3个页面，每个页面上的有不同的操作）角色：不同的权限点的集合通过给不同用户分配不同的角色，实现页面级别的权限管理 。实现步骤1.首先我们将路由分为动态路由和静态路由动态路由：指
2021-10-27 22:16:41
4576
原创 当添加和编辑用同一个弹出框时做表单校验
const validatorName = (rule, value, callback) => { if (this.isEdit) { this.listName.filter((it) => it.id !== this.formData.id).map(item => item.name.trim()).includes(value) ? callback(value + '重复了') : callback() } else { .
2021-10-27 01:38:28
335
原创 Vue动态组件
Vue动态组件 有一个容器 要装不同的组件 这个容器就可以理解为动态组件 component 标签就是动态组件标签 他可以实现同一个挂载点 切换显示不同的组件 有点类似tap栏切换 <component :is="comName"></component>他身上有个is属性 表示当前要显示的组件名实现点击切换组件<template> <div class="department-container"> <div class=
2021-10-25 21:31:17
397
空空如也
关于vue的点击切换样式
2021-09-17
TA创建的收藏夹 TA关注的收藏夹
TA关注的人