- 博客(116)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 美团二面算法题-输出每对有效括号内的内容；
这个题真的很简单啊，，，，但是我在面试的时候太紧张了，只想到用栈，确没想到栈里面应该存什么，，，，，，啊啊啊啊啊啊，刚结束面试，就想到了这么做，真遗憾。
2023-10-17 10:19:13
271
原创 antv/l7地图，鼠标滚动，页面正常滑动-- 我们忽略的deltaY
在官网项目中，需要使用一个地图，展示产品的分布区域及数量。希望的交互是，鼠标放上标点，tooltip展示地点和数量等信息。鼠标滚动，则页面随着滚动。但是鼠标事件是被地图代理了的，鼠标滚动意味着地图的缩放。这个设置了之后，我们发现鼠标在地图上是滚不动的状态，就是我们无论如何滚动鼠标，页面都没有动静。其实就是我们的鼠标事件被地图给代理了，但是他这里没有处理我们禁用了缩放和拖拽之后，将鼠标事件脱离代理。以此记录一下这个问题的解决办法，也加深一下自己对这个属性的了解。我们首先想到的就是关闭地图的缩放。
2023-08-04 15:47:21
1254
原创 html生成pdf--print-js，保存下载到本地，可选中复制,且解决font-size不生效问题
网上有很多方法，但是都或多或少存在问题，大部分的都是先生成图片，然后再生成pdf文件。一语点醒梦中人呀，不仅可以预览，还可以保存为pdf，还可以选中复制。基于此，去调研了一下，找到一个比较好用的库，兼容性挺好，样式也能保留。本次的需求基于上次有升级，上次是直接生成pdf，只是为了看。这次的需求是预览账单并保存为pdf，保存的pdf是可以选中复制的，那么之前的方案就不能用了。因为我的页面最开始对账单是不显示的，状态是’display: none’，预览打印出来的就是空白，解决办法：在打印前后处理dom状态。
2023-03-21 18:38:32
1316
1
原创 html2pdf 一键生成pdf实践
项目中需要将查询的图表及表格一键生成pdf，便于运营查看操作。经调研，目前社区有合适的插件实现，html2pdf.js。
2022-12-21 17:34:38
1033
原创 vue3模板动态ref使用，获取子组件元素
我们在平时做业务的时候，父子组件通信会经常用到ref（我比较喜欢用这个方式，传值方便，省去一堆的watch或者computed）当我们在列表调用子组件的时候，就会用到动态ref。比如：我点击计划任务，每一行的计划任务点开都使用的同一个组件popover，如果如果我们模板使用同一个ref，即：这样调用，可以打开popover，但是很多时候，点击的和打开的不是同一个。这个时候，就需要我们将每一个ref都唯一，这个时候，我们就会用到动态ref.......
2022-06-20 14:26:01
3219
原创 vue3+vite项目，动态svg build后，线上找不到图片问题
好多时候，我们使用是svg都是动态的，就会有不同的src，这时，src就需要是一个动态的变量。我们按常规配置：模板使用上面这样使用，在本地都是找不到文件的。但是直接在模板中这样使用是可以的这是因为，把变量解析成了字符串，没有按路径去查找。模板使用上述这样使用，在本地是没有问题的，但是部署到线上就找不到了，查看源代码，线上把src最终解析成了[Object Object],可见打包后，没有去解析出真正的路径。费了老半天劲，各种方式去试过，最后在vite文档中找到了答案；URL方式，不能使用模板
2022-06-20 11:34:41
3037
原创 冷知识：font-size最小12px的误区
背景我们在做项目的时候，有时会遇到很长的文字，产品想要在一定的宽度完全显示，但是基于我们的认知时浏览器默认的最小字体的12px，就很难想到说去再减小字体显示。其实浏览器设置font-size最小为12px是为了中文而产生了，这还是源于咱们的中国文字文化博大精深，字体比较复杂，更小的字体会看不清楚，所以浏览器针对中文限制了最小字体大小12px。中文语言下英文语言下当我们把浏览器语言设置为其他语言的时候，font-size是不受限制的。中文最小字体解决方案当我们是中文环境
2022-03-11 11:42:24
5506
2
原创 flex布局下，多个Echarts图表resize有问题
场景项目中，我们需要实现一列多行，多个图表，使用flex布局宽度自适应。给图表绑定了resize事件，当窗口从小到大变化时，每个图表resize正常，但是从大变小时，图表resize异常。多方排查之后，才发现是echarts没有兼容flex布局的方式。布局方面项目里我们的布局是固定一列，剩余均分自适应。该组件多个地方使用，内容项不固定，可能4项，也可能3项，所以布局我们使用了flex。.container { display: flex;}.flex-item1 { width:
2022-02-18 15:10:01
2543
5
原创 leetcode---乘最多水的容器
题目（leetcode题库 11）给你 n 个非负整数 a1，a2，…，an，每个数代表坐标中的一个点 (i, ai) 。在坐标内画 n 条垂直线，垂直线 i 的两个端点分别为 (i, ai) 和 (i, 0) 。找出其中的两条线，使得它们与 x 轴共同构成的容器可以容纳最多的水。说明：你不能倾斜容器。来源：力扣（LeetCode）链接：https://leetcode-cn.com/problems/container-wit
2021-09-24 17:33:24
283
原创 实现一个内容超出显示省略号，并鼠标浮入显示tooltip，不超出的不显示tooltip组件
实现一个内容超出显示省略号，并鼠标浮入显示tooltip，不超出的不显示tooltip组件ps：该组件是基于element-plus，使用vue3最新的setup语法糖实现的。不清楚的大家可以根据我的思路用其他技术栈实现。背景项目中有很多地方有超出显示省略号，然后鼠标浮入显示tooltip的需求。在这之前，我发现项目中有些是鼠标浮入都显示tooltip，无关乎是否超出；还有一些甚至超出显示省略号，而没有加tooltip，也就是这种情况用户连完整信息都不清楚。我感觉这应该不是产品想要的效果，可能是之
2021-09-22 15:10:07
2972
原创 令人振奋的ES2021几个新特性
ES20211.promise新增pormise.any()方法 Promise.any(iterable);ps: Promise.any() 方法依然是实验性的，尚未被所有的浏览器完全支持。它当前处于 TC39 第四阶段草案（Stage 4）这个方法用于返回第一个成功的 promise 。只要有一个 promise 成功此方法就会终止，它不会等待其他的 promise 全部完成。 // 只要一个返回成功，即进入.then(),所有都失败就返回一个失败的 promise 和Aggr
2021-05-18 16:40:34
317
原创 vue3数据的响应式原理----学习
数据的响应式原理基本步骤Proxy拦截值跟踪更改它的函数：我们在 Proxy 中的 getter 中执行此操作，称为 effect触发函数以便它可以更新最终值：我们在 Proxy 中的 setter 中进行该操作，名为 trigger深入原理把一个普通的 JavaScript 对象作为 data 选项传给应用或组件实例vue会使用带有getter和setter的处理程序遍历其所有property并将其转换为Proxy(ie : Object.defineProperty。但是Proxy 版.
2020-12-15 15:46:27
416
原创 vue 递归组件的使用及组件间的数据传递
背景项目需求原型图如下可以添加/删除条件和条件组添加的条件组和父组件有相同的功能由此可以判断，这是一个递归组件的调用规划数据结构递归类型的数据结构，那么子和父的数据结构是一样的，那我们不难想到父里边带children数组，所以我们大概是这样的数据结构： let parent: { id: 1, ... children: [ { id: 1, ... children: [
2020-12-09 17:31:58
2812
原创 vue3中ref与reactive的异同
ref与reactive的异同ref与reactive 定义基本元素类型数据时，ref定义的是包装后的响应式数据，而reactive 定义的还是原来的类型const num1 = 2;const num2 = ref(2);const num3 = reactive(2);console.log(num1) // 2console.log(num2) // RefImpl {_rawValue: 2, _shallow: false, __v_isRef: true, _value: 2}c
2020-11-10 15:01:19
1182
原创 再读vue3 文档
不建议同一节点使用v-if和v-for。若同时使用v-if的优先级较高，所以v-if是访问不了v-for中的变量的。解决：可以移入模板// 不可取<li v-for="todo in todos" v-if="!todo.isComplete"> {{ todo }}</li>// 替代方法<template v-for="todo in todos"> <li v-if="!todo.isComplete"> {..
2020-11-10 14:57:02
203
原创 vue3变化
Global API全局Vue Api已更改为使用应用程序实例vue2创建全局组件（new Vue()）缺点全局配置使得在测试期间很容易意外地污染其他测试用例全局配置使得在同一页面上的多个“app”之间共享同一个 Vue 副本非常困难，但全局配置不同vue3引入：createApp 返回一个应用实例import { createApp } from 'vue'const app = createApp({})vue2.x全局api在vue3.x中变化对比2.x 全局
2020-09-22 17:18:43
519
原创 ES2020的新特性
说在前面：ES2020（即 ES11）于（2020 年 6 月）已经正式发布，在此之前进入 Stage 4 的 10 项提案均已纳入规范，成为JavaScript 语言的新特性ES2020ESmodule迎来了一些增强import() ： 一种可以用动态模块标识异步引入模块的语法ES module 是一套静态的模块系统静态加载：import/export 声明只能出现在顶层作用域，不支持按需加载和懒加载静态标识：模块标识只能是字符串字面量，不支持运行时动态计算而来的模块名语法 .
2020-09-22 11:04:04
498
原创 git commit回退三种姿势
git commit 回退作为弄清楚三个点工作区（working tree）： 本地编辑器暂存区（index）：git add操作后进入暂存区，可用git status查看本地仓库（repository）：git commit 后进入本地仓库修改commit当我们第一次提交后，发现还有修改没有提交，通常我们想的是在add/commit一次，这样存在的问题呢就是会有一些扰乱我们的commit信息。比如我们第二次commit提交信息可能是“删除上次提交的debugger”其实我们两次提交内容
2020-08-20 14:42:55
97187
3
原创 远程搜索数据过大，显示慢的问题解决
在今天有一个需求是，下拉框可搜索远程数据，最开始做的时候用的本地数据延迟模拟，没有考虑数据量过大的问题。当远程请求时，数据量过大显示很慢，而且很冗长，到不了底的感觉。遇到的问题：1.触发输入框就发起请求（反复发请求，不可取）2.将远程数据直接渲染到模板（数据太多会卡顿，还不好看）解决办法：1.在组件创建时就发起请求，将所有数据暂存本地（解决1）2.每次显示只截取一部分显示，此时就下方可点击增加显示数据，每次增加50条。 <template> <e
2020-08-14 17:41:51
853
1
原创 VSCode安装插件leetcode
在leetcode上刷算法题，有点儿像在记事本上打代码，很不方便。vscode的leetcode插件，很好的解决了这一问题，让我们不用登官网就可以刷题。1.安装插件leetcode注意： 如果安装时提醒你安装不成功，请手动安装时有两个解决方法：1）、更新VSCode到最新版本。2）、按提示在官网去下载安装文件，即手动安装。2.切换到中文版3.登录leetCode账号（我是用github账户登录的，大家可以选择其他方法，遇到问题百度也可以解决）4.做题吧..
2020-08-06 20:08:49
791
原创 真机测试移动端项目---在手机上访问我们的移动端网页
最近在做毕业设计，做的是一个移动端的项目，由于还没有买服务器这些东西，纯前端，就还没有去配置微信公众号的接口。可是一般浏览器看到的手机界面和真机上显示还是有差别的，故而去寻找了一个真机测试的方式。（目前认为最方便的方式）具体步骤是：1、确保电脑和手机在同一个局域网（三个方式）： 1）、手机开热点，电脑连接； 2）、电脑开热点，手机连接； 3）、电脑手机连接同一个...
2020-04-08 14:23:41
1083
1
原创 vue+ts报错：Property 'option' has no initializer and is not definitely assigned in the constructor
最近在从头写一个vue+ts的项目，我们都知道typescript是js的一个超类。js是弱类型语言，在开发中存在一些问题。这可能也是ts这几年发展这么快的原因之一。在项目中老是遇到这个问题：问题原因：1.可能是属性的类型不对2.可能是没有初始化3.可能为undefined或者null(在ts中，这两个是单独的类型，是其他类型的子类型)看了官网，大概有一下几种解决办法：...
2019-10-17 14:43:02
11072
原创 js数组方法
数组扁平化采用闭包function arrfun () { let result = []; return function arrFlat(arr) { arr.forEach(e => { if (e instanceof Array) { arrFlat(e); } else { ...
2019-09-30 15:31:01
177
原创 给定一字符串数组，重复字符串后带上编号，没有重复的不作处理，生成一个新数组
题目描述：给定一字符串数组，重复字符串后带上编号1，2，3，...，没有重复的不作处理，不能改变元素组顺序，生成一个新数组例子：输入： ['a','aaa', 'bb', 'aaa', 'ccc', 'bb', 'aaa']， 输出：["a", "aaa1", "bb1", "aaa2", "ccc", "bb2", "aaa3"]解题思路： 1.对象存储，key为原...
2019-09-29 17:43:52
995
原创 node学习---基础模块
node模块fs文件系统模块----负责读写文件ps：和其他js模块不同的是，fs文件系统模块同时提供了同步和异步的方法读取文件readFile(file, ‘utf-8’, callback) ： 异步读取文件 — 回调函数中捕获错误和获取读取的值，回调函数参数(err, data)readFileSync(file, ‘utf-8’) ：同步读取文件 — 利用try{...}...
2019-09-29 17:14:06
267
原创 eslint相关配置..eslintrc.js文件
一般我们项目中会有一套严格的代码规范，这个eclint就是检查我们的代码是否符合规范，下面是较完整的相关配置eslint定义值含义0 禁用此规则1 不符合规则即给出警告2 不符合规则即报错{// 环境定义了预定义的全局变量。"env": {//环境定义了预定义的全局变量。更多在官网查看"browser":true,"node":true,"commonjs":true...
2019-09-23 17:01:33
426
原创 关于module的require和import的区别
require()/import命令/import()函数区别：require是运行时加载，即动态加载。而import命令是静态加载，在编译时就加载。 import()函数是动态加载，与require不同的是，import()函数返回一个promise，是异步加载。而require是同步加载。import()函数使用场景：按需加载button.addEventListener('c...
2019-08-27 10:14:35
567
原创 关于js的严格模式限制--------use strict
ES6的模块自动采用严格模式，不管你有没有在模块头部上加上“use strict”严格模式主要有以下限制：* 变量必须声明后在使用* 函数的参数不能有同名属性，否则报错* 不能使用with语句* 不能对只读属性赋值，否则报错* 不能使用前缀0表示八进制数，否则报错* 不能删除变量delete prop，否则报错。只能删除属性delete global[prop]* ...
2019-08-27 09:30:40
319
原创 关于对象的key为另一对象的情况
问题描述：下面的代码中，c的值是多少？var a = {};var b = {};var c = {};c[a] = "123";c[b] = "456";console.log(c)分析： 我们都知道，对象的key不能是对象，而这儿的a和b都是对象，那么这样写c有值吗？那我们就来打印看看就知道了：结果就是这个样子了。那我们看到c的结构，不免就知道了，c的key值是...
2019-08-16 10:07:48
525
原创 vue-router详解----学习总结
动态路由匹配响应路由参数的变化路由参数配置const router = new VueRouter({ routes: [ //动态路由参数，以冒号开头 { path: '/user/:id', component: ComponentName } ]})路由参数获取$route.params.id路由中设置多段路径参数，对应的值都会设置到$ro...
2019-08-14 16:11:58
383
原创 关于数组中删除元素遇到的问题
数组中删除元素最开始的想法是调用数组的forEach()方法，根据条件找到的index索引删除该项问题：当删除一个元素时，不会发生意外，就可以这样操作，但是当删除数组中多个元素时，这样就会出错了，会出现有些项删不了的情况（还有可能报错）原因：我们的需求是将状态为status = 0 的项删除掉：思路一：那就forEach()遍历数组，找到对应的索引进行删除let lists = ...
2019-08-12 19:35:26
672
原创 angularJs service服务(例子主要用angular内置服务http服务)
angularJs service服务什么是服务？服务是一个广义的概念，它包括应用所需的任何值、函数或特性。狭义的服务是一个明确定义了用途的类。它应该做一些具体的事，并做好。Angular 把组件和服务区分开，以提高模块性和复用性。 通过把组件中和视图有关的功能与其他类型的处理分离开，你可以让组件类更加精简、高效。理想情况下，组件的工作只管用户体验，而不用顾及其它。 它应该提供用于数据绑...
2019-08-01 14:41:05
702
1
原创 关于Vue 组件中computed获取经getters变化的store中的state
问题描述：当computed中的属性是从store.state中获取的时候，我们拿到的属性值是store中state的初始值还是getters计算后的值？问题发现：页面中渲染是19，而vue-devtools中state还是18 引发的思考这是Store中的state和getters这是组件中的computed页面上展示的结果是：我打印thi...
2019-07-31 20:01:32
10978
原创 Vuex 5大核心内容详解
vuex 状态管理vuex是vue.js应用程序的状态管理模式。集中式存储管理应用所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。状态管理模式new Vue({ //state: 驱动应用的数据源 data () { return { count: 0 } }, //view： 以声明方式将state映射到视图 templat...
2019-07-31 16:11:15
618
原创 Vue---全局配置详解
全局配置Vue.config 是一个对象，它包含了所有Vue的全局配置。可以在启动应用前修改配置slient —取消Vue所有的日志与警告类型： boolean默认值： false用法： Vue.config.slient = trueoptionMergeStrategies —自定义合并策略的选项类型： { [key: string]: Function }默认值： {...
2019-07-30 17:05:31
1635
原创 Vue的内置组件--component/transition/transition-group/keep-alive/slot
Vue的内置组件component作用：渲染一个“原组件”为动态组件。依is的值，来决定那个组件被渲染props:is: -string|ComponentDefinition|ComponentConstructorinline-template: -boolean用法：动态组件由 vm 实例的属性值 componentId 控制<component :is="comp...
2019-07-29 20:22:00
404
原创 vue报错：Component template should contain exactly one root element. If you are using v-if on.....
今天在写项目的时候遇到的问题：代码如下：<template> <div class = "a">{{time}}</div> <test-component></test-component></template>报错如下：意思是说：组件模板应只包含一个根元素。如果在多个元素上使用v...
2019-07-29 17:21:13
1118
原创 typeScript 学习总结（基础篇）
typeScript 学习总结（基础篇）typeScript 数据类型原始数据类型（Primitive data types）原始数据类型：布尔值（boolean）/数值（number）/字符串（string）/null/undefined/ES6中的Symbol类型定义类型语法：let varName: type = [对应类型的赋值]； //也可单独赋值 布尔值（使用bool...
2019-07-26 16:32:07
514
原创 html meta标签相关属性设置
<!DOCTYPE html> H5标准声明，使用 HTML5 doctype，不区分大小写<head lang=”en”> 标准的 lang 属性写法<meta charset=’utf-8′> 声明文档使用的字符编码<meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″...
2019-07-25 14:14:55
221
操作系统（第四版）期末复习总结.pdf
2021-03-21
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人