- 博客(21)
- 收藏
- 关注
RSS订阅原创 echarts大屏字体自适应的方法
echarts大屏字体自适应的方法步骤大屏字体自适应的方法步骤主要介绍了echarts大屏字体自适应的方法步骤，用echarts做大屏可视化的时候会遇到不是用电脑投屏而是直接在大屏打开的情况，这时候大屏幕下固定的px为单位的字体就会显得很小。有一种解决方法就是采用rem为单位，根据屏幕的宽度调整html的font-size.获取屏幕宽度并计算比例 function fontSize(res) { let docEl = document.documentElement,
2022-01-14 18:40:18
2048
1
原创 Vue项目中通过axios设置通用header
一般情况下我们设置header都是在axios的响应拦截器中进行设置，如下面代码所示：axios.interceptors.request.use(function(config){ //比如是否需要设置 token config.headers.token='eysasmdsakwnfnasdklasj' return config})不过我们可以试想一下axios有没有提供给我们一个一劳永逸的方法，设置或删除某个特定的header呢，让它在每次请求中都出现。axios文档中恰好有相关设
2021-12-03 14:17:49
5287
原创 Es6的Object.defineProperty方法
Object.defineProperty()方法直接在一个对象上定义一个新属性，或者修改一个已经存在的属性，并返回这个对象 value：设置属性的值 writable：值是否可以重写。 true|false enumerable: 目标属性是否考可以被枚举。 true | false configurable: 目标属性是否可以被删除或是可以在此修改特性 true|false set：目标属性设置值的方法 get：目标属性获取值的方法 假
2021-12-02 09:20:20
993
1
原创 Vue3的composition API使用
1.setup()vue3中的composition API中最重要的就是setup方法了，相当于组件的入口，所有的composition API都必须放到setup()中的使用。setup是在组件实例初始化之前执行的(beforeCreated之前)，是整个组件的入口函数，这个时候数据和方法还没有进行挂载，因此在setup中this并不会执行当前组件实例，也不能通过this获取组件中的数据和方法了。在模板中使用到的变量和方法必须在setup中return出来，才能使用。export default
2021-07-14 10:49:24
588
1
原创 海康威视关于Promise对象的笔试题
问题如下：红灯3秒亮一次，绿灯1秒亮一次，黄灯2秒亮一次；如何使用Promise让三个灯不断交替重复亮灯？分析：先看题目，题目要求红灯亮过后，绿灯才能亮，绿灯亮过后，黄灯才能亮，黄灯亮过后，红灯才能亮……所以怎么通过Promise实现？换句话说，就是红灯亮起时，承诺2s秒后亮绿灯，绿灯亮起时承诺1s后亮黄灯，黄灯亮起时，承诺3s后亮红灯……这显然是一个Promise链式调用，看到这里你心里或许就有思路了，我们需要将我们的每一个亮灯动作写在then()方法中，同时返回一个新的Promise，并将其状态由
2021-06-03 17:21:11
235
原创 vue3.0之Global API Change-全局API修改
vue3入口文件，采用api为createApp，然后把创建出来的对象mount到Dom节点上vue2的写法：从vue导出了一个全局的对象，然后在上面进行了一系列的配置，比如use、mixin等一系列方法，然后再新建vue的实例，调用$mount方法挂载到Dom节点，我们发现vue2的全局配置在一定程度上修改了vue对象一系列的属性或者说是全局状态，这些操作都是对vue对象操作的，在一定程度上会有一些问题问题一：在单元测试中，全局配置非常容易污染全局环境。问题二：在不同的apps中，共享一份有不同
2021-04-10 14:54:44
429
原创 vue3.0之Suspense内置组件
使用Suspense注意点：（1）解决异步请求的困境。（2）Suspense是Vue3推出的一个内置的特殊组件，有两个template slot，刚开始会渲染一个fallback内容，直到达到某个条件以后才会渲染正式的内容。（3）如果使用Suspense，在setup( )中需要返回一个promise，而不是直接返回一个对象。简单的Demo示例AsyncShow.vue （子组件）<template> <h1>{{result}}</h1></te
2021-04-10 13:27:38
578
原创 vue3.0之Teleport
为什么使用Teleport新的特性呢？因为有时候用组件来表示一切界面中发生的逻辑，不过有些特例处理起来比较麻烦，比如在某个组件渲染的时候，在某种条件下需要显示一个全局的对话框dialog或者是modal组件，弹出一个浮层让用户来完成一些确定和取消的操作。一般的做法如下：会造成的问题：（1）我们写一个这样的dialog组件那么在渲染的时候就会将dialog渲染产生的HTML存在在这上面，变成父子结构的形式，造成dialog组件被嵌套的非常深，对于对话框来说，从用户感知的角度应该是一个独立的组件，通常应
2021-04-07 20:45:39
356
原创 vue3.0之setup()函数配合watch侦听
setup()函数是同beforecreate和created函数差不多一起运行的，而且只执行了一次，所以第一次执行了，而更新的时候不会触发，这时候就需要使用watch了例子：使用watch按钮，每次点击网页title进行更改信息。<template> <div id="app"> <!-- <img alt="Vue logo" src="./assets/logo.png" /> --> <h1>{{greetings}
2021-04-07 19:18:57
4473
原创 TypeScript 交叉类型
TypeScript交叉类型是将多个类型合并为一个类型。这让我们可以把现有的多种类型叠加到一起成为一种类型，它包含了所需的所有类型的特性。interface IPerson { id: string; age: number;}interface IWorker { companyId: string;}type IStaff = IPerson & IWorker;const staff: IStaff = { id: 'E1006', age: 33,
2021-04-06 16:49:13
228
原创 TypeScript 联合类型和类型别名
联合类型联合类型通常与null或undefined一起使用：const sayHello = (name:string | undefined) => { /* ... */};例如,这里name的类型是string | undefined 意味着可以将string或undefined的值传递给sayHello函数。sayHello('maker');sayHello(undefined);通过这个示例，你可以凭直觉知道类型 A 和类型 B 联合后的类型
2021-04-06 16:28:13
256
原创 TypeScript 断言与类型守卫
TypeScript 断言有时候你会遇到这样的情况，你会比TypeScript更了解某个值的详细信息。通常这会发生在你清楚地知道一个实体具有比它现有类型更确切的类型。通过类型断言这种方式可以告诉编译器，“相信我，我知道自己在干什么”。类型断言好比其他语言里的类型转换，但是不进行特殊的数据检查和解构。它没有运行时的影响，只是在编译阶段起作用。类型断言有两种形式："尖括号"语法let someValue:any = "this is a string";let strLength:number =
2021-04-06 15:32:05
201
原创 TypeScript基本类型
Boolean类型let isDone:boolean = false;// Es5: var isDonge = false;Number类型let count:Number = 10;//Es5: var count = 10;String 类型let name:string = "viking";//Es5: var name = "viking";Array 类型let list:number[] = [1,2,3,4];//Es5: var list = [1,2,3,
2021-04-06 14:47:10
195
原创 闭包理解
最近看到的一些文章，终于，有人用于一种让我明白方式对闭包进行了解释，我将在本文中尝试使用这种方法来解释闭包。准备在理解闭包之前，有个重要的概念需要先了解一下，就是 js 执行上下文。这篇文章是执行上下文 很不错的入门教程，文章中提到：当代码在JavaScript中运行时，执行代码的环境非常重要，并将概括为以下几点：全局作用域——第一次执行代码的默认环境。函数作用域——当执行流进入函数体时。(…) —— 我们当作 执行上下文 是当前代码执行的一个环境与作用域。换句话说，当我们启动程序时，我们从
2021-04-06 10:33:37
79
原创 Vue3.0与Vue2.0的v-model的使用区别
v-model 升级在使用 Vue 3 之前就了解到 v-model 发生了很大的变化， 使用过了之后才真正的 get 到这些变化， 我们先纵观一下发生了哪些变化， 然后再针对的说一下如何使用：变更：在自定义组件上使用v-model时， 属性以及事件的默认名称变了变更：v-bind的.sync修饰符在 Vue 3 中又被去掉了, 合并到了v-model里新增：同一组件可以同时设置多个 v-model新增：开发者可以自定义 v-model修饰符有点懵？别着急，往下看 在 Vue2 中， 在组件上使
2021-04-06 09:05:04
2262
原创 右侧边栏书签效果
这里写自定义目录标题工作需要创建一个侧边栏展开收起的书签容器HTML部分代码css部分代码JS效果交互部分代码效果展示工作需要创建一个侧边栏展开收起的书签容器只是简单的功能实现，没有加入动画过渡效果，供以后需要时使用HTML部分代码 <div class="ag-right-box"> <div class="div-content"> <div class="title"> 任务点
2021-03-26 16:15:00
316
原创 Echarts折线图拐点突出显示效果
代码如下： //初始化数据录入情况echarts实例 var echarts_dataEntry = echarts.init(document.getElementById('echarts_dataEntry')); option = { title: { // text: '折线图堆叠' }, tooltip: { trigger:
2021-03-18 16:05:10
2790
原创 vue调用后台接口，既进入.then()成功回调事件函数中，同时也进入.catch()方法中
vue调用后台接口，既进入.then()成功回调事件函数中，同时也进入.catch()中造成这种结果的原因是：在.then()方法中有逻辑错误的代码存在，.catch()会将.then()方法中的这些错误捕捉到，所以就导致了即使调用后台接口成功也会执行.catch()方法的现象。解决办法:逐一排查.then()方法中的代码，找到错误的代码，问题自然而然的就会迎刃而解。...
2020-12-31 11:39:22
8118
原创 带有X关闭按钮的输入框
HTML5中的新特性search属性，在input中设置type=“search”即可<input type="search" placeholder="请输入您要查询的内容" >显示效果如下：
2020-10-19 16:00:27
506
原创 Layui中layer弹出层右上角X关闭按钮样式修改
Layui中layer弹出层右上角X关闭按钮样式修改由于项目刚好用到layer弹出层，于是我使用了layer.open()做了一个页面层的弹出效果，但是在做的过程中我发现右上角的关闭按钮并不是自己想要的样式，于是对以下代码进行了修改。修改前的关闭按钮样式：修改后的关闭按钮样式：修改前代码：//页面层 layer.open({ type: 1, title:false, skin: 'layui-layer-demo'
2020-09-24 16:17:33
7363
2
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人