- 博客(108)
- 资源 (2)
- 收藏
- 关注
RSS订阅原创 echarts初始化仪表盘（gauge）
注意：series的属性可以进一次抽离，例子中是没有抽离的，所以重复属性较多完整代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=devic..
2022-03-28 16:03:28
1396
原创 echarts初始化空心饼图（pie）
饼图相对比较简单，很多效果在官网上就能直接找到ps：饼图也可以多series，然后通过zlevel属性来控制层级显示完整代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport".
2022-03-28 15:51:21
2681
1
原创 echarts初始化折线图（line）
完整代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <.
2022-03-28 15:37:51
1026
原创 echarts初始化中国地图（Map）
echarts初始化中国地图vue 中可以直接使用，修改文件地址即可更多echarts例子1.http://www.ppchart.com/#/2.https://www.isqqw.com/#/homepagenpm下载echartsnpm install echarts -S完整代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <.
2022-03-28 12:15:39
1096
翻译 小程序：js+css实现瀑布流
效果图：页面：<view class="flow"> <view class="left-flow-item"> <view wx:for="{{leftList}}" wx:key="index"> <image class="img" mode="widthFix" lazy-load="{{true}}" src="{{item.url}}"></image> <view class="titl
2022-01-21 18:33:37
278
原创 window.print打印
<div> <h1>window.print默认打印</h1> <div class="page-break">内容一</div> <div class="page-break">内容二</div> <div class="page-break">内容三</div> <button class="no-print" onclick="print()">
2021-11-17 12:06:37
1724
翻译 原生js实现水印背景
参考文档：https://juejin.cn/post/6844904095749242888/* 1.通过canvas生成水印图片 2.把图片作为div的背景让其平铺*/const setWatermark = () => { let canvas = document.createElement('canvas'); canvas.width = 120; canvas.height = 80; canvas.style.border = '1px sol
2021-09-17 14:28:35
681
原创 使用阿里巴巴的iconfont图片库（下载到本地）
1.登录，选择喜欢的图标加入购物车2.添加至项目3.修改项目设置保存之后：下载至本地->解压代码使用<icon class="iconfont icon-caidan"></icon>效果图：
2021-09-11 15:24:51
2338
原创 微信小程序 自定义tabbar
app.json// 需要先定义tabBar页面// “pages” 配置里面也不要忘了"tabBar": { "custom": true, "list": [ { "pagePath": "pages/index/index" }, { "pagePath": "pages/goods/index" }, { "pagePath": "pages/add/index"
2021-09-09 18:33:47
1934
翻译 canvas 画布 arcTo 方法的理解与使用
参考文档：https://codeplayer.vip/p/j7scuarcTo(x1,y1,x2,y2,radius);x1,y1 理解为端点1;x2,y2 理解为端点2;radius 半径是基于断点2画的一个弧<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content=
2021-09-09 14:29:01
314
原创 计算两个数组的交集
//计算两个数组的交集let a = [1, 2, 3, 4, 5, 6, 7, 8];let b = [2, 4, 5, 6, 1];let ex = a.filter(n => b.includes(n)); // 相交 b.includes(n) 不相交取反console.log(ex);
2021-08-17 17:51:31
193
原创 vant的van-form组件外部button触发submit事件问题
外部button：发送短信验证码触发原因：type 属性规定按钮的类型。提示：请始终为按钮规定 type 属性。Internet Explorer 的默认类型是 “button”，而其他浏览器中（包括 W3C 规范）的默认值是 “submit”。vant的解决：<van-button native-type="button"> 发送短信验证码</van-button># native-type 指定原生 button 标签的 type 属性...
2021-07-28 16:48:40
2651
原创 elementUI合并行和列
案列地址：https://jsrun.net/JX8Kp完整代码 <!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>element-ui合并行和列</title> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css".
2021-07-20 18:39:54
908
原创 parseInt与Number的区别
//比较只有数字的字符串let num_str = '123';let parse = parseInt(num_str);let num = Number(num_str);console.log(parse);console.log(typeof parse);//numberconsole.log(num);console.log(typeof num); //numberconsole.log(parse === num); //true//比较有字母(或者中文)的数字
2021-05-17 10:12:27
432
翻译 js生成一个安全的随机字母数字Base-62字符串
参考链接:https://mp.weixin.qq.com/s/1MHR6_kNRPNt2duU4q5Pqwfunction generateUID(length){ return window.btoa(Array.from(window.crypto.getRandomValues(new Uint8Array(length * 2))) .map((b) => String.fromCharCode(b)).join("")).replace(/[+/]/g, "")
2021-05-07 10:11:01
357
原创 css实现简单的瀑布流
flex:column-count: 2; 规定多少列column-gap: 5px; 规定列间隙效果图：# 这边这个v-for是运行不了的，但是css样式是ok的，需要看demo先改下这个循环<div class="flow-goods"> <div class="flow-goods-item" v-for="(item,index) in goodsList.list" :key="index"> <di
2021-04-27 18:00:28
152
原创 数组的entries()方法
entries() 方法返回一个数组的迭代对象，该对象包含数组的键值对 (key/value)。迭代对象中数组的索引值作为 key， 数组元素作为 value。//定义数组let arr = ['法外狂徒','职业法师','北大还行','花呗宗师','人生小目标'];arr.entries();//返回一个可迭代数组/*[0, "法外狂徒"][1, "职业法师"][2, "北大还行"][3, "花呗宗师"][4, "人生小目标"]*/for(let [index,value] o.
2021-04-27 14:40:53
3793
原创 解构赋值省略掉部分参数
// 解构赋值省略掉部分参数let obj = { name:'法外狂徒', age:18, sex:'男', qq:'15946875963', phone:'15689784598'}// 利用解构得rest语法收集那些尚未被解构模式拾取的剩余可枚举属性键/* rest语法：剩余参数语法 官网：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions/Res
2021-04-12 17:46:59
486
原创 Props with type Object/Array must use a factory function to return the default value.
译文：类型为Object / Array的道具必须使用工厂函数来返回默认值。# 出现原因echoList: { type: Array, default: [] //props的属性默认值直接赋值的[]，报标题错误},# 解决# 在官网中props验证有写到：对象或数组默认值必须从一个工厂函数获取echoList: { type: Array, default: ()=>[] //数组简写 //default:()=>({}) //.
2021-04-09 11:57:28
938
原创 js移动数组元素
# 核心方法 splice('起始位置','删除数量',['...添加元素'])# 起始位置 一般是数组元素得下标# 删除数量 12345...表示删除对应的个数，**而0表示不删除**# 添加元素 就是再splice给定的位置push数据> **splice方法会改变原始数组**> **如果仅删除一个元素，则返回一个元素的数组。 如果未删除任何元素，则返回空数组**# 控制移动mobile(list, i, num) { /* list.splice(i + num
2021-04-02 17:59:11
2118
原创 el-cascader组件限制选择
//卸载watch里面，去监听el-cascader绑定数组的长度watch: { 'paint.paintFrom.format'(newValue, oldValue) { let _list = "el-cascader绑定的:options数组"; //得到用户选择的最新options //然后使用set，flat，Array函数去转换 /* el-cascader会帮你返回一个二
2021-03-18 16:58:37
946
原创 husky ＞ pre-commit hook failed (add --no-verify to bypass)错误原因及解决
husky是git Hooks的一种工具，用来验证代码规范问题# 第一种:- 卸载掉husky，然后重新npm i//个人项目阔以这么弄，团队开发一般不推荐# 第二种: - 执行git命令$ git commit -m '关闭husky验证' --no-verify//这种也不是太建议，毕竟下载husky就是用来验证的# 第三种:- 查看git日志，比如我这样挨个解决，然后重新commit的，这种好一点，让代码更规范...
2021-03-13 11:46:46
1694
1
原创 element-ui的upload限制图片的格式，大小，以及宽高
<div >不多于5张图片，600*600px，png、jpg或gif格式，大小不超过2M</div> <el-upload action="https://jsonplaceholder.typicode.com/posts/" list-type="picture-card" multiple
2021-03-10 17:44:52
1390
2
原创 Sass中的@extend注意
Sass在线编译：https://www.sassmeister.com/在设计网页的时候常常遇到这种情况：一个元素使用的样式与另一个元素完全相同，但又添加了额外的样式。通常会在 HTML 中给元素定义两个 class，一个通用样式，一个特殊样式。假设现在要设计一个公共box样式与一个特殊box样式，一般会这样写：/*# 先知道什么是通用样式和特殊样式- 简单一点来说特殊样式就是私有样式，比如有如下一组标签：*/<div class="public-style special-styl
2021-03-05 16:47:16
543
原创 vue结合echarts实现一个基础的折线图
echarts实例官网：https://echarts.apache.org/examples/zh/index.html//安装淘宝镜像# npm install -g cnpm --registry=https://registry.npm.taobao.org//vue下载echarts# cnpm install echarts -S/* cnpm - 需要下载淘宝镜像 install - 可以简写成i -S 下载到生产环境 -D 下载到开发环境 -S -D 可以在
2021-03-02 17:44:49
327
原创 解决vscode活动栏隐藏显示以及插件gitlens图片误删或者不显示问题
一，隐藏显示活动栏隐藏之后找到：查看-外观-显示活动栏 即可正常显示二，显示插件gitlens图标ctrl+shift+p然后输入gitlens找到GitLens:Set Views Layout 点击然后点击GitLens Layout即可
2021-03-01 15:58:52
1707
原创 面试题：js怎么判断是否是数组？
js怎么判断一个变量是否是数组？方法一：isArray()let a =[1,2,3];Array.isArray(a); //true方法二：instanceof操作符let a = [1,2,3];a instanceof Array; //true
2021-02-25 15:06:42
582
原创 实现一个简单的骨架屏样式
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>骨架屏</title> <style> body{ background-color: #f6f6
2021-01-16 10:16:41
507
原创 js的reduce方法
定义和用法reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。reduce() 可以作为一个高阶函数，用于函数的 compose。注意: reduce() 对于空数组是不会执行回调函数的。语法array.reduce(function(“必填初始属性”, “必填当前元素”, “可选元素下标”, “可选。当前元素所属的数组对象。”), “可选初始值”)这个function是一个回调函数用法//计算数组元素相加后的总和：var numb
2021-01-13 16:02:31
143
原创 onmouseleave和onmouseout之间的区别
1，onmouseleave和onmouseenter - onmouseleave 事件在鼠标移出元素时触发。 - onmouseenter 事件在鼠标指针移动到元素上时触发。onmouseenter和onmouseleave事件不支持冒泡，不包含子元素2，onmouseover和onmouseout - onmouseover 事件会在鼠标指针移动到指定的元素上时发生。 - onmouseout 事件会在鼠标指针移出指定的对象时发生。onmouseover和onmouseou
2021-01-13 11:36:26
1740
原创 小程序之getImageInfo报errMsg:getImageInfo:fail download image fail
错误信息：errMsg:getImageInfo:fail download image fail翻译：errMsg:getImageInfo:fail下载镜像失败这种情况一般有两种：一，域名没在小程序的白名单中也就是download合法域名里面（需要去小程序后台配置）二，第二种就是配置了，但是返回过来的网络图片链接是http的而不是https的，这个也会报这个错误...
2021-01-08 15:23:05
6237
原创 bind，call，以及apply的理解与使用
bind的理解：Function.prototype.bind()官方原话/作用：bind() 方法创建一个新的函数，在 bind() 被调用时，这个新函数的 this 被指定为 bind() 的第一个参数，而其余参数将作为新函数的参数，供调用时使用。返回值：返回一个原函数的"拷贝"，并拥有指定的 this 值和初始参数。 //例子 function demoBind(x){ console.log('我是第一个demoBind===>',this,x.int
2021-01-07 18:39:12
319
原创 设置el-container高度为百分百
/*把最外面的html，body设置为100%就好*/html,#app,body { height: 100%; min-width: 900px;}
2021-01-05 16:22:50
2328
原创 el-menu结合动态渲染实现aside侧边栏
//el-menu定义菜单选项//open ：sub-menu 展开的回调//close ：sub-menu 收起的回调//router 该模式会在激活导航时以 index 作为 path 进行路由跳转//select 菜单激活回调<el-menu class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollap
2020-12-31 10:37:11
1328
1
原创 vue组件监听原生事件@click.native
在组件上使用 v-on 只会监听自定义事件 (组件用 $emit 触发的事件)。如果要监听根元素的原生事件，可以使用 .native 修饰符，比如：<my-component v-on:click.native="doSomething"></my-component>官网：https://cn.vuejs.org/v2/guide/migration.html#%E7%94%A8-v-on-%E7%9B%91%E5%90%AC%E5%8E%9F%E7%94%9F%E4%B.
2020-12-30 11:41:07
772
原创 使用verdaccio搭建一个自己的npm私服
#这里使用的是cnpm 可以先去淘宝镜像 (https://developer.aliyun.com/mirror/NPM?from=tnpm)#或者直接运行$ npm install -g cnpm --registry=https://registry.npm.taobao.org#验证cnpm //出现下面的就ok了$ cnpm -v/cnpm --version > [email protected]#verdaccio#verdaccio是个啥? //可以看这里:https://gi
2020-12-26 09:56:58
133
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人