- 博客(108)
- 资源 (2)
- 收藏
- 关注
原创 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
1423
原创 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
2786
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
1057
原创 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
1125
翻译 小程序: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
316
原创 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
1755
翻译 原生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
709
原创 使用阿里巴巴的iconfont图片库(下载到本地)
1.登录,选择喜欢的图标加入购物车2.添加至项目3.修改项目设置保存之后:下载至本地->解压代码使用<icon class="iconfont icon-caidan"></icon>效果图:
2021-09-11 15:24:51
2628
原创 微信小程序 自定义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
1979
翻译 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
340
原创 计算两个数组的交集
//计算两个数组的交集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
217
原创 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
2757
原创 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
933
原创 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
448
翻译 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
401
原创 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
175
原创 数组的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
3869
原创 解构赋值省略掉部分参数
// 解构赋值省略掉部分参数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
506
原创 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
985
原创 js移动数组元素
# 核心方法 splice('起始位置','删除数量',['...添加元素'])# 起始位置 一般是数组元素得下标# 删除数量 12345...表示删除对应的个数,**而0表示不删除**# 添加元素 就是再splice给定的位置push数据> **splice方法会改变原始数组**> **如果仅删除一个元素,则返回一个元素的数组。 如果未删除任何元素,则返回空数组**# 控制移动mobile(list, i, num) { /* list.splice(i + num
2021-04-02 17:59:11
2169
原创 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
993
原创 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
1775
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
1480
2
原创 Sass中的@extend注意
Sass在线编译:https://www.sassmeister.com/在设计网页的时候常常遇到这种情况:一个元素使用的样式与另一个元素完全相同,但又添加了额外的样式。通常会在 HTML 中给元素定义两个 class,一个通用样式,一个特殊样式。假设现在要设计一个公共box样式与一个特殊box样式,一般会这样写:/*# 先知道什么是通用样式和特殊样式- 简单一点来说特殊样式就是私有样式,比如有如下一组标签:*/<div class="public-style special-styl
2021-03-05 16:47:16
576
原创 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
335
原创 解决vscode活动栏隐藏显示以及插件gitlens图片误删或者不显示问题
一,隐藏显示活动栏隐藏之后找到:查看-外观-显示活动栏 即可正常显示二,显示插件gitlens图标ctrl+shift+p然后输入gitlens找到GitLens:Set Views Layout 点击然后点击GitLens Layout即可
2021-03-01 15:58:52
1828
原创 面试题: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
616
原创 实现一个简单的骨架屏样式
<!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
528
原创 js的reduce方法
定义和用法reduce() 方法接收一个函数作为累加器,数组中的每个值(从左到右)开始缩减,最终计算为一个值。reduce() 可以作为一个高阶函数,用于函数的 compose。注意: reduce() 对于空数组是不会执行回调函数的。语法array.reduce(function(“必填初始属性”, “必填当前元素”, “可选元素下标”, “可选。当前元素所属的数组对象。”), “可选初始值”)这个function是一个回调函数用法//计算数组元素相加后的总和:var numb
2021-01-13 16:02:31
161
原创 onmouseleave和onmouseout之间的区别
1,onmouseleave和onmouseenter - onmouseleave 事件在鼠标移出元素时触发。 - onmouseenter 事件在鼠标指针移动到元素上时触发。onmouseenter和onmouseleave事件不支持冒泡,不包含子元素2,onmouseover和onmouseout - onmouseover 事件会在鼠标指针移动到指定的元素上时发生。 - onmouseout 事件会在鼠标指针移出指定的对象时发生。onmouseover和onmouseou
2021-01-13 11:36:26
1808
原创 小程序之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
6418
原创 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
351
原创 设置el-container高度为百分百
/*把最外面的html,body设置为100%就好*/html,#app,body { height: 100%; min-width: 900px;}
2021-01-05 16:22:50
2385
原创 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
1375
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
804
原创 使用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 > cnpm@6.1.1#verdaccio#verdaccio是个啥? //可以看这里:https://gi
2020-12-26 09:56:58
152
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人