- 博客(66)
- 收藏
- 关注
RSS订阅原创 /deep/样式穿透失效的原因和解决办法
在vue页面，为何有的样式需要限制scoped，为何需要样式穿透，样式穿透的原理是什么，对此进行小结。
2022-05-23 23:57:31
13921
原创 iView的Select 选择器选择失效
问题：给iView的Select赋的值通过接口获取，得到数组 list，选择器的默认值 defaultValue 为数组list的第一个选择项（defaultValue = list[0]），完成后选择器切换选项失效，或点击多次才生效。<Select v-model="defaultValue"> <Option v-for="item in list" :value="item.value" :key="item.value">{{ item.label }}
2022-02-11 10:36:28
1835
原创 eCharts下载按钮
需求：实现eCharts折线图右上角显示一个下载按钮，点击下载此折线图图片。实现：方式一、使用eCharts官方工具 toolbox。方式二、自定义按钮节点，设置点击响应事件
2022-01-18 17:19:45
5077
原创 Vue通过v-for渲染的元素与$refs得到的实例对应不上
vue通过v-for渲染的组件/元素，更新key值的组件/元素会push进当前的ref，会存在通过$refs[index]拿到的组件不对应原数组对应的index数据。
2021-12-14 20:59:20
2524
2
原创 鼠标滑入后边框逐渐包裹效果
实现效果：鼠标滑入组件后，组件由无边框变为由边框包裹，边框从四个角逐渐变长包裹完整个组件；鼠标滑出后边框逐渐变短到消失
2021-11-18 20:34:47
615
原创 node-xlsx 生成并下载有超链接的excel文件
需求：将微信小程序云数据库中的数据导出为excel文件，文件按团队分为不同的sheet页，首页汇总每个sheet页的数据总数，并可点击跳转至对应的sheet页。下载时可选择今年某月份进行下载对应的数据。get到如上需求，记录一下完成时遇到的问题。问题1：如何生成并下载excel文件？思路：在云函数端通过 node-xlsx 生成excel文件流，通过cloud.uploadFile 将本地资源上传至云存储空间，在小程序端通过 cloud.downloadFile 从云存储空间下载文件。云函.
2021-03-02 21:14:28
2020
1
原创 Echarts堆叠图显示总数
遇到一个需求：柱状堆叠图除了每个“柱”内部显示数据，还要在每个“柱”上方显示总数。类似下图：解决：堆叠图新增一个总数的“柱”，此“柱”的对应data全置为0，则不会显示总数的堆叠图，再使用label的formatter显示计算出的数据总数。基本代码：...const totalStackBar = { name: '', type: 'bar', stack: 'stack', itemStyle: { normal:{
2021-02-09 19:09:09
2900
原创 echarts树图
用echarts做了两周(算上之前应该是4周)的树图，记录一下遇到的一些特性和问题。特性：1、echarts中绑定事件，通过 on方法例如：绑定click方法myChart.on('click', function (params) { console.log(params);});2、echarts的 on方法 先于 DOM点击事件执行。3、echarts实例的 _chartsViews[0]._data 有很多有用的属性。4、改变图表尺寸，在容器大小发生改变时需要
2020-11-18 21:15:44
1985
原创 css中文本显示易混淆的属性
letter-spacing: normal |length| inherit;增加或减少字符间的空白（字符间距），对中文有效。<html><head><style>.h1 {letter-spacing: 1em}</style></head><body><h1>This is header 1 这是主标题</h1><h1 class="h1">This is he..
2020-10-14 17:52:36
167
原创 echarts使主标题和副标题在同一行显示
echarts中，如果同时设置了主标题和副标题，副标题默认显示在主标题下方。若想要主标题和副标题在同一行，可以将title设置为数组，即：将主标题伪装成副标题。option = { title: [{ text: "Main Title", left:0, textStyle: { fontSize: 30, }, },{ text: "Sub Title",
2020-09-11 17:48:16
4493
原创 微信小程序发起网络请求
微信小程序请求后台数据的基本用法，并改写为Promise用法 和 async/await用法。1、基本用法：wx.request({ url: '', data: {}, header: {'content-type':'application/json'}, method: 'GET', dataType: 'json', responseType: 'text', success: (result) => {
2020-09-03 14:20:44
682
原创 JavaScript判断中英文字符
Unicode中文编码范围：16进制：\u4e00 ~ \u9fa5十进制：19968 ~ 40869找出包含中英文字符串中的中文：1、charCodeAt()方法：返回指定位置的字符的 Unicode 编码。所以判断当前位置字符的Unicode 编码是否在汉字编码范围中。function findChinese1(){ let str = "嗨~new friend（新朋友）"; let arr = []; [...str].forEach((item,ind
2020-08-14 00:31:11
1510
原创 实现图片上传时即时显示
使用HTML5中的FileReader实现图片上传时使图片即时显示，图片显示等比例缩放。实现效果：FileReader：构造函数：FileReader()属性：FileReader.error：表示在读取文件时发生的错误。FileReader.readyState：表示FileReader状态的数字。取值如下：常量名 值 描述 EMPTY 0 还没有加载任何数据. LOADING 1 数据正在被加载. DONE 2...
2020-07-20 10:15:42
376
原创 纯CSS画一只简单的小鸟
用css简单画了一只小鸟，效果图如下：代码如下：HTML：<div class="box-canvas"> <div class="body"> <div class="head"></div> <div class="wing"></div> </div> <div class="mout
2020-07-16 23:58:53
528
原创 JavaScript编程题（八）——es6练习
1、后端数据处理从某数据库接口得到如下值：{ rows: [ ["Lisa", 16, "Female", "2000-12-01"], ["Bob", 22, "Male", "1996-01-21"] ], metaData: [ { name: "name", note: '' }, { name: "age", note: '' }, { name: "gender", note: '' }, { name: "birthday"
2020-07-14 18:40:30
949
原创 持续请求/socket.io/?EIO=3&transport=polling&t=N8HrzIR
项目基本介绍：使用React，webpack，socket.io-client, Node.js, Express, socket.io 等技术，采用前后端分离开发。实现项目中的聊天室时遇到报错，一直请求下面的连接：GEThttp://localhost:3030/socket.io/?EIO=3&transport=polling&t=N8HrzIR404(NotFound)Failed to load http://localhost:3030/socket.io/?...
2020-05-14 16:59:20
7896
2
原创 React警告：Received NaN for the `children` attribute. If this is expected, cast the value to a string.
使用React框架时，组件在使用<span>{ Math.abs(goal.goalInfo.pretimes - goal.usergoalInfo.cpt_times )}</span>这一语句时出现警告：Received NaN for the `children` attribute. If this is expected, cast the value to a...
2020-04-05 17:20:43
7454
1
原创 关于ant Design中this.props.form.validateFields未执行的问题
在使用ant Designd的 form 组件时发现点击提交方法中 this.props.form.validateFields((err, values) => {}) 部分未执行，也没有报错。原因：我使用了自定义校验validator ，在自定义校验方法中有个错误，使用了未定义的变量。注意：1、使用validator 时，注意自定义方法中是否有错误；对于如何解决没有错误提示...
2020-04-03 00:35:25
5636
2
原创 错误：Error Code: 1366. Incorrect string value: '\xE5\xBA\xB7' for column 'category_name' at row 1
插入一条数据时：insert into todolist.category_table values(null,"康")出现报错：Error Code: 1366. Incorrect string value: '\xE5\xBA\xB7' for column 'category_name' at row 1插入数据为英文时不报错。原因：编码格式不对应。解决：ALTER TAB...
2020-03-27 22:50:55
657
原创 JavaScript的padStart() 和 padEnd()方法
简介：padStart() 和 padEnd() 方法是ES2017 引入了String对象的新方法，用于字符串补全长度。padStart() 用于头部补全， padEnd()用于尾部补全 。方法接收2个参数：参数一：字符串最少多少位。如果小于原字符串长度，则返回原字符串； 参数二：用来补全的字符串。不够位数则重复出现，超出位数则截取部分用来补全；如果省略该参数，则用空格补全...
2019-12-19 18:57:29
551
原创 JavaScript的简单数据类型
○△○：JavaScript的简单数据有几种？●-●：7种。○△○：有 number, string, boolean, undefined, null，再加上ES6新增的symbol，就6种啊？！●-●：ES10新增了第 七 种原始类型——bigint ，是一个任意精度的整数。打开你的控制台看看 typeof10n的结果是什么？○△○："bigint" ！一切都发生得太快了...
2019-12-16 12:10:54
148
原创 cookie基本介绍和使用
cookie：HTTP最初是一个匿名、无状态的协议，Web 服务器几乎没有什么信息可以用来判定是哪个用户发送的请求，cookie 就是一些数据，用来存储会话信息，识别用户， 实现持久会话。一、cookie的字段字段有：[name] [value] [domain] [path] [expires/max-age] [size][http] [secure] [sameSite]nam...
2019-12-14 20:59:00
1458
原创 HTTP请求首部——Authorization
前几天的任务需要用到Authorization认证，任务比较急，就照着给的例子写好了，现在任务结束了，还是来了解一下这个Authorization。Authorization是一个HTTP安全请求首部，包含了客户端提供给服务器 便于对其自身进行认证的数据。WWW-Authentication：定义了使用何种验证方式去获取对资源的连接。如果服务器希望在为用户提供对站点的访问之前先行...
2019-12-10 17:59:08
9582
原创 JavaScript编程题（七）——关于Number类型
1、获取数字 num 二进制形式第 bit 位的值。1）bit 从 1 开始2）返回 0 或 1方法一：知识点：数值的toString()方法；charAt()方法返回指定位置的字符，若超过范围位置，返回空字符，Number()对空字符返回 0。function valueAtBit(num, bit) { return Number((num.toString(2))....
2019-12-09 17:25:57
544
原创 JavaScript的toString()方法
数值、布尔值、对象和字符串值都有 toString()方法，null 和 undefined 值没有 toString()方法。toString()方法作用是返回相应值的字符串表现，字符串的toString()方法就是返回该字符串的一个副本。一般情况下，我们调用 toString()方法不必传递参数。但是，在调用数值的 toString()方法时，可以传递一个参数：输出数值的基数，基数的...
2019-12-04 23:51:54
1457
原创 JavaScript的位操作符
JavaScript的位操作符有：按位非，按位与，按位或，按位异或，左移，有符号的右移，无符号的右移。基础：ECMAScript 整数有两种类型：有符号整数（允许用正数和负数）和无符号整数（只允许用正数）。在 ECMAScript 中，所有整数字面量默认都是有符号整数，有符号整数使用 31 位表示整数的数值，用第 32 位表示整数的符号，0 表示正数，1 表示负数。 ECMAScript...
2019-12-04 00:26:00
173
原创 JavaScript编程题（六）
题1、将 rgb 颜色字符串转换为十六进制的形式，如 rgb(255, 255, 255) 转为 #ffffff1. rgb 中每个 , 后面的空格数量不固定2. 十六进制表达式使用六位小写字母3. 如果输入不符合 rgb 格式，返回原始输入方法1：1）判断参数是否符合 rgb 格式，不符合直接return；2）去除参数 中每个 , 后面的空格；3）16进制转10进制，使用num.to...
2019-12-03 11:39:03
626
原创 JavaScript编程题（五）
1、实现几个回文数相加。例如： 给你一个整数2 ，输出回文数相加结果：1+121=？输入整数3 ，输出回文数相加结果：1+121+12321=？function hui(num){ var n=""; for(var i=1;i<=num;i++){ n=n + i.toString() ; } var m=[...n].sli...
2019-11-15 18:14:24
273
原创 css——百分比设置margin（外边距）
对元素的margin（外边距）可以设置百分数值。对元素的 margin（外边距）设置百分数值：百分数是相对于父元素的width来计算的。HTML：<div class="contain"> <div class="d1"></div></div>css： .contain{ width: ...
2019-11-15 16:22:48
2199
原创 JavaScript的数值转换函数——parseInt
有 3 个函数可以把非数值转换为数值： Number()、 parseInt() 和 parseFloat()。转型函数 Number() 可以用于任何数据类型，parseInt() 和 parseFloat() 函数则专门用于把字符串转换成数值。这里说说 parseInt() 函数。parseInt() 函数更多是看其是否符合数值模式。1、它会忽略字符串前面的空格，直至找到第一个非空格...
2019-11-07 14:28:17
1028
原创 JavaScript的超时调用——setTimeout()方法
setTimeout(code,millisec)setTimeout()方法接收两个参数，第一个参数可以是包含JavaScript代码的字符串（不推荐），相当于执行eval()；或者是一个函数。第二个参数表示等待多长时间的毫秒数将当前任务添加到队列中。例子：setTimeout("go()", 10); //等待10毫秒执行go函数setTimeout("go", 10); ...
2019-10-27 12:08:06
1042
原创 webpack错误：plugins[0][1] must be an object, false, or undefined
报错信息：ERROR in ./src/index.jsModule build failed (from ./node_modules/[email protected]@babel-loader/lib/index.js):Error: .plugins[0][1] must be an object, false, or undefined对比以前写的，发现babel-loa...
2019-10-22 11:32:48
1677
原创 实现效果——内容与边框有距离
前两天遇到一个要实现的效果：一个颜色块有边框，边框与色块有一定距离，如下：当时第一个想法是：用一个元素包裹另一个元素，外部元素有一定宽度的padding，或内部元素有一定宽度的margin。今天遇到一个css属性可以实现一个HTML元素实现上图效果 ——outline属性。outline：轮廓，是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用，在元素中的位置如图...
2019-10-11 23:55:34
1767
原创 JavaScript编程题（一）
题目：一个数列: 1, 12, 123, 1234, 12345,...12345678910,1234567891011...。计算从数列的第 m 个到第 n 个(包含端点)有多少个数可以被3整除。方法一：for循环m 到 n ,循环内内嵌一个循环，算出当前的数字是多少，是否能被3整除，能则计数+1，不能计数不加1。这是最容易想到的办法，就不写出来了。方法二：改进一下方法...
2019-09-28 17:15:55
779
原创 JavaScript编程题（二）——较简单
1、定义一个函数，求任意个数字的和。function sum(...nums){ let sum=0; nums.forEach(item=>sum+=item); return sum;}2、求一个3位数的百位、十位和个位。function numEach(num){ var a=parseInt(num/100); va...
2019-09-27 00:20:55
831
原创 JavaScript编程题（三）——前端编程笔试题
昨晚做了一个公司的笔试题，里面有2道编程题，记录一下。1、定义一个函数，接收不定数量的数组作为参数，将这些数组合并为一个数组。方法有很多，我这里用ES6的剩余参数 和 扩展运算符解决。function sumArray1(...array){ let arr=[]; array.forEach(item=>arr=[...arr,...item]) ...
2019-09-26 18:10:07
578
原创 CSS动画——clip剪切动画
css中有一动画属性：clip语法：clip: rect(top,right,bottom,left); 例：clip: rect(0px, 50px, 50px, 0px);作用：实现剪切，保留部分为：width = right - left ;height = bottom - top ;如图：保留部分为黄色框内容。...
2019-09-24 22:49:34
839
原创 使用ES6的扩展运算符实现滑过字符变化样式
要求： 鼠标滑动页面上的字符串时，指向的字符样式变大，倾斜一定角度。分析： 将字符串用扩展运算符扩展为一个新的参数序列； 然后使用 map 方法将每个字符包含在<span>标签中； css 为<span>中的字符添加样式。效果预览：css：body{ background:#ffff00...
2019-09-14 00:04:33
223
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人