weixin_58487208-优快云博客

原创展开对象中的对象

如下图：需求：需要将personInfo对象解构出来放到原对象当中。思路：利用展开运算符和Object.assgin方法合并成一个result对象再去用一个新变量接收。this.$axios.post(this.baseUrl + this.currentModule.result.requestUrl, params).then(res => { this.resultData.length = 0; if (res.

2022-05-24 17:24:39 448

原创评论界面收起和展开的实现

html结构：<div class="thumb-up-modal-content-comment"> <template v-if="commentData.length"> <div class="thumb-up-modal-content-comment-item"

2022-05-10 21:41:55 1028

原创 vue开发单页面应用容易遇到的问题：某些css在切换路径时不加载

最近被css问题坑到了，element 的 table 表格中的某些样式或者伪元素在切换路径之后不重新加载了，本来想试试用刷新页面来解决，但是太影响用户体验。不过大部分地方都还是能正常显示，该挂载的元素还是能挂载。我猜测可能是由于这个项目大部分<style>标记内没有用scoped来防止样式污染问题，但是我在自己的代码里面加了都没用，包括::v-deep也试了。因为这个毕竟是elementui的table表格，需要样式穿透来改变。处理过程：第一步：伪元素更换成img标签防止后续不加载

2022-04-25 18:36:55 817

原创 echarts tooltips 自定义 formatter 显示图例颜色

我们在设置tooltips的自定义格式时一定会遇到这种情况：formatter 是一个函数时，这个函数的第一个参数有如下属性，并且由于tooltips是鼠标移动事件（本人猜测），每次移进去都会触发这个函数，我们可以打印出来：由于我设置的是多折线图所以是一个数组并且据我观察这个formatter本质是一个模板字符串现在就只要把这个color属性拼接在formatter字符串里面就成了代码如下：formatter: function(params) {

2022-04-20 11:14:27 3963 2

原创关于对象属性值是字符串时不能使用indexOf的解决办法

当需要去判断对象的属性值字符串当中是否存在某一段字符串时，不可直接去使用：对象名.属性名.indexOf('需要检查的字符串‘)，具体原因可能是防止这个属性可能有一个indexOf同名对象。解决办法：声明一个变量str去接收属性值，再去判断:如果写在img标签里面，最好是提取出来在script标签里面去写...

2022-04-20 10:58:38 835

原创 vue子组件（图表）数据更新而视图不更新的问题解决（附深度监听与立即监听）

背景：子组件是echarts的柱状图，数据datas以数组形式由props传递进来思路：通过watch监听datas的改变，记得加上立即监听和深度监听 watch: { datas: { handler(val) { this.$nextTick(() => { this.initChart(); }); },

2022-03-08 16:09:21 2275

原创关于对象的属性与对应值互相转换的方法

如果发现后端返回的对象中属性与对应值正好相反，推荐这样做：let columnMap = {};// mapInfo是后端返回的键值对相反的对象for (let key in mapInfo) { columnMap[mapInfo[key]] = key; }以下是错误示范，虽然转换成功了，代码冗余，并且后面的将英文转换成中文的部分不懂为什么不起作用：// 利用后端返回的键值对转换需求数据的key transCN

2022-03-07 16:02:20 684

原创给双折叠table表格的空数组添加请求数据

用到的ui组件：elementUI的table表格需要结合tree-props来使用：这个配置项是关键，我们可以用它来灵活控制每个父节点下有多少子节点以及节点内容html结构:<div class="repetition-call" id="repetition-call"> <LayoutChart :defaultConfig="baseConfig.repetitionCall"> <tem

2022-03-05 12:08:01 363

原创让页面滚动固定位置：滚动事件不生效的情况（可用的三种方法）

需求是页面滚动到指定位置或指定元素（让该元素的顶端与视口顶部距离为0）首先可以用window.scrollTo(x,y),不推荐。因为这个方法经常失效，且一般是滚动定值使用。其次是document.documentElement.scrollTop = document.getElementById('el').clientHeight,不推荐。最后是最能达到效果的document.getElementById('el').scrollIntoView({behavior: 'smooth'})

2022-02-28 15:10:29 2275 1

原创 sessionStorage与localStorage

sessionStorage: 会话存储。关闭产生会话存储的页面或关闭浏览器时sessionStorage清空；localStorage: 本地存储。仅当使用window.localStorage.removeItem('属性名')或window.localStorage.clear()时清空打印出来的话会发现两者属性相同getItem('属性名') 获取此属性名对应的存储属性的值setItem('属性名'，属性值) 存入属性remove('属性名') 移除指定属性clear(

2022-02-17 14:33:48 346

原创关于eslint配置项的报错:Failed to load config “standard“ to extend from.

对于这个问题: 首先考虑是不是eslint初始化时的下包出问题了, 通常是这样, 解决起来也很容易, 下载以下几个包:yarn add eslint-plugin-promise eslint-plugin-node eslint-plugin-import eslint-plugin-standard eslint-config-standard -D而我遇到的问题却没有这么简单起初我以为是nodemodules中的eslint-config-standard的问题在...

2021-12-01 23:13:19 10021 2

原创 antd-mobile 移动端UI库使用 Form 表单以及Input 输入框显示没有导出项

今天用antd-mobile 见鬼了, 竟然显示没有Form和Input! 其他的组件都没问题, 还有个button上的type属性报错. 第一反应便是仔细查看单词是否写错, 反反复复在官网上对比, 完全是一致的, 然后去百度, 有人也遇到和我一样的问题:我就试试用了一下这个方法, 去下了个rc-form, 发现明明下了这个插件却说在nodemodules里面根本没有这个东西.又给我整不会了正当我抓耳挠腮之际, 突然想到会不会是版本问题(虽然我反反复复用...

2021-12-01 21:46:10 1530

原创创建一个新项目时的eslint配置选项

首先创建一个React-ts项目:npx create-react-app react_demo --template typescript或者vue项目(前提有装vue-cli):vue create vue_demo然后安装eslintnpm i eslint//或者yarn add eslintvscode 中有eslint辅助插件也建议安装:该扩展设置中可以随时提供eslint的运行状态:都确认勾上了之后就可以在状态栏右下角点击eslint...

2021-11-25 20:24:38 2682

原创 TypeScript入门: 函数的参数与返回值类型定义

函数声明类型定义格式: function fn(a: number, b: number): number { return a+b}函数表达式类型定义格式: const fn = (a: number, b: number): number => a+b可以将拥有相同形参和实参的函数当做一个整体来定义:const fn: (n1: number, n2: number) =>number = (a,b) => a+b其中类型定义部分可提炼:...

2021-11-24 12:00:42 625

原创 VSCode 中 TypeScript 类型提示信息失效

如果发现自己的vscode鼠标悬停时没有类型提示可在设置中搜索 '提示',找到'控制是否显示悬停提示'选项, 勾上提示就出现了

2021-11-24 11:07:10 4375 2

原创防抖与节流

函数防抖（debounce）：当连续触发事件时，一定时间段内没有再触发事件，事件处理函数才会执行一次，如果设定的时间到来之前，又一次触发了事件，就重新开始延时.将几次操作合并为一次操作进行。原理是维护一个计时器，规定在延迟时间后触发函数，但是在延迟时间内再次触发的话，就会取消之前的计时器而重新设置。只有最后一次操作能被触发应用场景:搜索联想函数节流（throttle）：当连续触发事件时，保证一定时间段内只调用一次事件处理函数.使得一定时间内只触发一次函数。原理是通过判断是否到达一定时间来触发函

2021-11-22 16:54:10 413

原创宏任务与微任务

可以用一个超现实的例子来形容:宏任务是一个核桃壳,那微任务就是这个核桃壳里的仁.为什么说这是超现实的例子呢?因为你吃完这个核桃仁可能会发现里面竟然还有一个核桃,甚至循环往复.常见的宏任务: 整个代码块, setTimeout, setInterval为什么说这些是宏任务?因为它就像核桃壳一样,里面是必定有核桃仁(或者下一个核桃)的.而微任务在什么时候执行呢?就是擦嘴巴(渲染)前执行.每个宏任务执行完后准备执行下一个宏任务前必定要渲染, 这个条理性是必然的, 就好像吃完东西必须擦嘴巴一样.

2021-11-21 21:49:27 517

原创非组件环境下拿到路由跳转信息

背景: 需要在非组件环境跳转到指定页面, 言外之意也就是不能使用useHistory了.react-router-dom中直接有Router这个包，但是它Router 没有history属性安装react-router-dom时，默认会安装history包，我们可以通过这个包来自己创建history对象为了能够在非组件环境下拿到路由信息，需要我们自定义 Router 的 history// App.js部分代码import { Router, Route, Switch, Redire

2021-11-18 21:54:23 517

原创 react中的css污染问题(CSS Modules)

由于项目创建时,子组件都被导入到了父组件中,而子组件同级的css文件又顺延上去,结果就是组件之间相同选择器样式在其他组件上全部生效,从而造成组件之间样式相互覆盖.解决: 1)手动给各个子组件样式文件内容外层包一个统一的属性名,比如子组件名(前提是用sass/less); 2)CSS IN JS:以js的方式来处理css 。思想是让css有局部作用域全局作用域这样的区分(推荐方案)CSS IN JS是什么CSS IN JS：是使用 Java...

2021-11-17 19:35:32 1322

原创 redux-thunk中间件的使用

一、作用 redux-thunk 可以处理函数形式的action.从而就可以在函数形式的action中执行异步操作代码.使用前:actions/const action1 = {type: 'todos/add', payload: '学习redux'}// 组件使用dispatch(action1)使用后:actions/const action1 = async (dispatch) =>{ const res = await 异步动作(...

2021-11-15 21:07:37 326

原创 React: Reducer 的分离与合并遇到的问题报错‘store.getState is not a function‘

分离: 将reducer部分分类管理,防止reducer函数冗长;合并: 用redux中的combineReducers将分离的各个reducer整合在store下的index文件夹中示例:src/store/reducer/book.jsexport default function book (state = ['三国演义', '水浒传'], action) { console.log(action) switch (action.type) { case 'book/

2021-11-14 21:22:52 1784

原创 react中使用Switch语句简略笔记

语法:function App () {var d = new Date().getDay()switch (d) { case 0: case 6: text = "周末时间!"; break; case 4: case 5: text = "撑一撑,快解放了!"; break; default: text = "我真是苦命儿..."; } return...

2021-11-14 08:38:36 1067

原创 vue修饰符简略总结

vue修饰符主要分为:1.表单修饰符;2.事件修饰符;3.按键修饰符,其中包含特殊修饰符: 系统修饰键, .exact修饰符;4.鼠标按钮修饰符;5.其他修饰符,包含: .sync, .prop, .camel一、表单修饰符(用法一致为表单元素使用v-model时加修饰符:v-model.修饰符) 1) .trim: 去除仅首尾的空格 2) .lazy...

2021-11-12 23:10:38 606

原创 react容易遇到的问题: JSX行内样式处理

格式:<dom元素 style={ {css属性1：值1,css属性2：值2} }></dom元素>此写法也是JSX的一个特殊点,本来JSX的大括号解析不允许出现对象,但style行内样式是允许的.示例写法:// 行内样式<h1 style={ {color: 'red', width: 200, backgroundColor: 'black'} }> 我是黑底红字的h1</h1>首先,其内部的短横线写法要改为小驼峰写法;其

2021-11-11 23:04:42 928

原创 vue资料整理: package.json中配置的作用

1、 Name:项目名称 2、 Version: 项目版本 3、 Description: 项目安装的依赖项描述4、 Author：作者(字符或对象)5、 Prinate：项目是否私有 6、 Scripts:npm run *** 命令用于调用 node 执行的.js 文件7、keywords：关键词。一个字符串数组，对这个npm包的介绍。组件库必需，便于使用者在npm中搜索。一般不使用8、homepage：项目主页9、bugs：开发者的联系方式，代码库的issues地址

2021-11-11 09:12:17 274

原创 vue资料整理: scss 是什么？在 Vue.cli 中的安装使用步骤是？有哪几大特性？

是css 的预编译。使用步骤：第一步：先装 css-loader、node-loader、sass-loader 等加载器模块第二步：在 build 目录找到 webpack.base.config.js，在那个 extends 属性中加一个拓展.scss 第三步：在同一个文件，配置一个 module 属性第四步：然后在组件的 style 标签加上 lang 属性，例如：lang=”scss” 特性: 可以用变量，例如（$变量名称=值）；可以用混合器，例

2021-11-11 08:56:13 476

原创 vue资料整理: is 这个特性主要用在哪些方面?

1）动态组件 <component :is="componentName"></component>， componentName 可以是在本页面已经注册的局部组件名和全局组件名,也可以是一个组件的选项对象。当控制 componentName 改变时就可以动态切换选择组件。 2）is 的用法有些 HTML 元素，诸如 <ul>、<ol>、<table>和<select>，对于哪些元素可以出现在其内部是有严格限制的。而有些

2021-11-09 18:38:51 357

原创 vue资料整理: 在 Vue 实例中编写生命周期 hook 或其他 option/properties 时，为什么不使用箭头函数？

箭头函数自己没有定义 this 上下文，而是绑定到其父函数的上下文中。当你在 Vue 程序中使用箭头函数时，this 关键字并不会绑定到 Vue 实例，因此会引发错误。所以在编写如钩子函数这类时强烈建议改用标准函数声明。...

2021-11-09 14:09:53 311

原创 vue资料整理: nextTick的原理

1.为什么使用nextTick?Vue 是异步修改 DOM 的并且不鼓励开发者直接接触 DOM，但有时候业务需求中必须对数据更改--刷新后的 DOM 做相应的处理，这时候就可以使用 Vue.nextTick(callba ck)这个 api 了。 2. 理解原理前的准备首先需要知道事件循环中宏任务和微任务这两个概念,常见的宏任务有 script, setTimeout, setInterval, setImmediate, I/O, UI rendering 常见的微任务有process.n...

2021-11-09 10:04:01 598

原创 vue资料整理: 首屏加载的优化方式

1、把不常改变的库放到 index.html 中，通过 cdn(内容分发网络) 引入 2、Vue 路由的懒加载 3、不生成 map 文件 4、Vue 组件尽量不要全局引入 5、使用更轻量级的工具库 6、开启 gzip 压缩 7、首页单独做服务端渲染8、利用LocalStorage缓存资源9、图片资源压缩，大量使用精灵图...

2021-11-07 16:04:56 75

原创 vue资料整理：如何重置data

要初始化 data 中的数据，可以使用 Object.assign()方法实现重置 data 中的数据1）Object.assign()方法基本定义 Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。用法： Object.assign(target, ...sources)，第一个参数是目标对象，第二个参数是源对象，就是将源对象属性复制到目标对象，返回目标对象 2）具体使用方式 ...

2021-11-07 11:45:48 232

原创 Vue资料整理：操作 data 中数组的方法中哪些可以触发视图更新，哪些不可以，不可以的解决办法有哪些

可以触发视图更新的有：push()、pop()、shift()、unshift()、splice()、sort()、reverse()这些方法会改变被操作的数组； filter()、concat()、 slice()这些方法不会改变被操作的数组，返回一个新的数组；不可以触发视图更新的：利用索引直接设置一个数组项，例：this.array[index] = newValue 直接修改数组的长度，例：this.array.length = ne...

2021-11-07 11:36:34 588

原创 vue资料整理: VNode实现思路

首先要构建一个 VNode 的类，DOM 元素上的所有属性在 VNode 类实例化出来的对象上都存在对应的属性。例如 tag 表示一个元素节点的名称，text 表示一个文本节点的文本，chlidren 表示子节点等。将 VNode 类实例化出来的对象进行分类，例如注释节点、文本节点、元素节点、组件节点、函数式节点、克隆节点。然后通过编译将模板转成渲染函数 render，执行渲染函数 render，在其中创建不同类型的 VNode 类，最后整合就可以得到一个虚拟 DOM（...

2021-11-07 11:28:43 330

原创 vue资料整理: VNode 与虚拟DOM 是什么,原理如何

1.VNode 是什么 VNode 是 JavaScript 对象，VNode 表示 Virtual DOM，用 JavaScript 对象来描述真实的 DOM 把 DOM 标签，属性，内容都变成对象的属性。就像使用JavaScript 对象对一种动物进行说明一样:{name: 'Hello Kitty', age: 1, children: null}2.VNode 的作用通过 render 将 template 模版描述成 VNode，然后进行一系列操作...

2021-11-06 21:25:20 882

原创 vue资料整理: 对Vue的单向数据流的理解

数据从父级组件传递给子组件，只能单向绑定。子组件内部不能直接修改从父级传递过来的数据。所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行，这点类似单工通讯。这样会防止从子组件意外改变父级组件的状态，从而导致你的应用的数据流向难以理解。额外的，每次父级组件发生更新时，子组件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变 prop。如果你这样做了，Vue 会在浏览...

2021-11-06 21:12:52 108

原创 vue资料整理: SPA的理解与优缺点

单页 Web 应用 (single-page application 简称为 SPA) 是一种特殊的 Web 应用。它将所有的活动局限于一个 Web 页面中，仅在该 Web 页面初始化时加载相应的 HTML、JavaScript 和 CSS。一旦页面加载完成了，SPA 不会因为用户的操作而进行页面的重新加载或跳转。取而代之的是利用 JavaScript 动态的变换 HTML 的内容，从而实现 UI 与用户的交互。由于避免了页面的重新加载， SPA 可以提供较为流畅的用户体验。得益于 ajax，我们可以实现

2021-11-06 20:50:40 627

空空如也

空空如也