- 博客(70)
- 收藏
- 关注
RSS订阅原创 将下列对象组合为树状结构
数据结构如下图展示： let treeList = [] const map = {} data.forEach(item => { map[item.id] = item }) data.forEach(item => { const parent = map[item.errorPid] if (parent) { (parent.children || (parent.children = [])).push(item) } else { treeList
2022-02-17 13:40:04
491
原创 elementUI Input 输入框清空后获取不到再次输入的值
出现BUG： 页面的根据搜索条件搜索数据，清空以后重新输入，获取的还是之前的值； elementUI 的表单验证，在一次失去焦点后无法再次触发； 解决：需要在失焦后重新赋值 <el-input placeholder="请输入内容" prefix-icon="el-icon-search" clearable v-model="filters.name" @blur="filters.name = changeValue($event)" ></el-input> chan
2021-11-16 13:54:45
1725
原创 vue prop不同数据类型(数组，对象..)设置默认值
常用的数据类型的设置默认值的写法： Number, String, Boolean, Array, Function, Object refAge: { type: Number, default: 0 }, refName: { type: String, default: '' }, hotDataLoading: { type: Boolean, default: false }, hotData: { type: Array, default: () => {return
2021-10-21 15:18:51
2284
原创 elementUI实现el-select嵌套el-tree
html部分 <el-form-item label="树型结构"> <el-select v-model="treeData" placeholder="请选择..." ref="mySelect" > <el-option :value="treeDataValue" style="height: auto" > <el-tree ref="tree"
2021-09-28 22:47:03
866
原创 git版本回退
查看版本号 git reflog 回退 /*** * HEAD@{n} 为版本号 */ git reset --hard HEAD@{n}
2021-09-18 13:55:10
161
原创 格式化金额到千分位
方法一： // 格式化金额(无保留小数) function toThousands(num) { var result = [], counter = 0; num = (num || 0).toString().split(''); for (var i = num.length - 1; i >= 0; i--) { counter++; result.unshift(num[i]); if (!(counter % 3) && i != 0)
2021-09-13 17:08:41
413
原创 根据某个对象属性对数组进行排序
// 根据每个人的年龄，升序排序数组person const person = [ {name:"jack", age:21}, {name:"rose", age:17}, {name:"mike", age:23}, {name:"jonny", age:9} ]; function objectSort(age) { // 比较函数通过age属性获得对象的年龄进行比较 // 比较函数作为函数返回值返回给sort return function
2021-08-24 14:40:50
394
原创 js二维数组转一维数组方法
var arr1 = [[0, 1], [2, 3], [4, 5]]; var arr2 = arr1.reduce(function (a, b) { return a.concat(b)} ); // arr2 [0, 1, 2, 3, 4, 5] var arr1 = [[0, 1], [2, 3], [4, 5]]; function flatten(arr) { return [].concat( ...arr.map(x => Array.isArray(x) ? flatten(x)
2021-08-24 14:22:34
380
原创 Vue组件间的传值
父子传值: 1、父传子：子组件通过props方法接受数据 2、子传父： 子组件写法： <button @click="toParent('我要去父组件')">向父组件传值</button> toParent(val) { this.$emit('parentFn',val) } 父组件接收： 定义子组件的方法 <child @parentFn="change($event)"></child> change(data) { conso
2021-07-26 10:43:54
131
原创 vue项目中折线图的渲染
本文以echart5.0版本实现，4.0版本引入详见柱状图引入 import * as echarts from 'echarts' export default { data () { return {} }, methods: { init () { let oldData = {'2021-03-03': [{'type_id': '25a7185abf5611eaa8a9000c29d3cc31', 'type_name': '厨余垃圾', 'weight
2021-07-07 10:07:02
418
原创 windows10版本下，JDK环境变量配置
1、安装jdk 官网地址：https://www.oracle.com/java/technologies/javase/javase-jdk8-downloads.html 一路“下一步”安装成功。中间提示更改安装地址，看你自己意愿。我安装在了D盘。 2、环境配置 此电脑右键打开属性 > 高级系统配置 > 环境变量 > 系统变量 (注意不是用户变量哦！！！) 点击“新建” ，弹出窗口，环境的变量：JAVA_HOME 变量值为Java的安装路径，本人为： D:\Java
2021-05-25 10:44:59
260
原创 Vue项目中如何监听多个对象
使用computed配合watch监听变量变化 1、先在computed中，用需要监听的值(start、end)定义一个对象(dateRange) 2、然后在watch中监听这个对象(dateRange) data() { return { start:'', end:'' } }, computed: { dateRange() { const { start, end } = this return { start, end } }
2021-05-21 14:54:25
1009
原创 涨知识啦！nrm切换镜像源
nrm切换镜像源 1、作用：npm的镜像源管理工具。有时候国外资源太慢，使用这个就可以快速地在 npm 源间切换 2、全局安装 npm install -g nrm 3、使用。查看可选镜像源<nrm ls> nrm ls
2021-04-15 11:33:01
340
原创 Echarts内置渐变器：new echarts.graphic.LinearGradient(a,b,c,d,arr)
Echarts实现渐变颜色 如果给echarts图设置颜色，我们会在 option 中 传入 color 字段的一个数组 let option = { color:['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83', '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'] } 对于颜色渐变的起始角度，还有渐变程度，并非直接用数字就可以直白表达出来的 color: [
2021-04-13 14:54:08
5416
原创 VUE利用正则表达式给特定文本添加颜色
利用正则表达式给特定文本添加颜色 展示如下： <div class="content">审核内容：<span v-html="filterWord(content)"></span></div> 注意：方法一定一定要写在v-html里面，不然会将标签显示在页面的哦！！！ data() { keyword: ['人们','在'], content:'人们都在吃饭，人们都在睡觉，人们都在打豆豆。' } methods: { filterWord (t
2021-04-09 17:12:33
1512
原创 isNaN() 和Number.isNaN()
isNaN() 和Number.isNaN()的用法： 1、isNaN()是ES5的方法，Number.isNaN()是ES6的方法。 2、isNaN：通过Number方法把参数转换成数字类型，如若转换成功，则返回false，反之返回true，它只是判断参数是否能转成数字，不能用来判断是否严格等于NaN。 3、如果要判断某个值是否严格等于NaN不能用这个方法，ES6提供了Number.isNaN方法用来判断一个值是否严格等于NaN，它会首先判断传入的值是否为数字类型，如不是，直接返回false。
2021-04-02 10:13:40
750
原创 VUE的路由(二)：传参
<div @click="goDetail(3)">查看详情</div> 一、动态传参，刷新页面数据不会丢失 goDetail(id) { this.$router.push({ path: `/detail/${id}`, }) } 路由表配置 { path: '/detail/:id', name: 'detail', component: detail } 子组件获取 this.$route.params.id 二、通过路由属性
2021-04-01 10:35:39
167
原创 VUE的路由(一)：模式
abstract模式 适用于所有JavaScript环境，例如服务器端和Node.js. 如果没有浏览器API，路由器将自动强制进入此模式。 hash模式 就是指 url 尾巴后的 # 号以及后面的字符, 请求的时候不会被包含在 http 请求中 只会携带#之前的，所以每次改变hash不会重新请求加载页面 hash 改变会触发 hashchange 事件 hash变化会被浏览器记录，浏览器的前进和后退都能用。 能兼容到ie8 history模式 ...
2021-04-01 10:13:14
120
原创 javaScript检测对象是否包含有数组中的某一项
如何判断对象是否含有数组中的某项，如果没有该项则插入该项并赋值0 题干： let arr = [“a”, “b”, “c”, “d”] let obj = {a:12,b:13} 期望结果：res = {a:12, b:13, c:0, d:0} Method 1： arr.forEach(item => { if (obj.hasOwnProperty(item)) { obj[item] = obj[item] } else { obj[item] = 0
2021-03-31 10:36:54
247
原创 Typescript入门学习（一）
一、安装TypeScript 1、通过npm（Node.js包管理器） npm install -g typescript 2、安装Visual Studio的TypeScript插件 二、创建第一个.ts文件 在编辑器里，创建一个hellowWorld.ts文件 let demo:string = "Hello World" console.log(demo) 三、运行文件 tsc hellowWorld.ts 编译结果为：hellowWorld.js文件，展示为： "use st
2021-03-22 10:45:49
114
原创 解决Vscode提示code安装似乎损坏
打开vscode，老是有这样一句提示 原因：安装了一个叫background的拓展，并且编辑器的标题栏会显示不受支持四个字 解决方案： 1、下载一个叫Fix VSCode Checksums的拓展 2、ctrl+shift+P打开命令面板 3、输入：Fix Checksums: Apply 4、重启vscode即可 ...
2021-03-14 17:34:50
2404
1
原创 NODE环境配置之Windows篇
1、了解node.js 简单的说 Node.js 就是运行在服务端的 JavaScript。Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型，使其轻量又高效。Node.js 的包管理器 npm，是全球最大的开源库生态系统。 2、下载node.js 下载地址：https://nodejs.org/en/download/ 3、安装 1.双击“node-v6.9.2-x64.msi”，开始安装Node
2021-03-03 10:49:23
621
原创 封装26个大写字母方法
function AToZ(){ let arr = []; for(var i=0;i<26;i++){ // String.fromCharCode：接受一个指定的 Unicode 值，然后返回一个字符串 // 65代表字母A arr.push(String.fromCharCode(65+i)) } return arr } AToZ() ...
2021-03-03 09:43:19
214
原创 js操作数组与字符串的转换
1、字符串转数组 1、str.split(",",length)：将字符串按某个字符切割成若干个字符串，并以数组形式返回 参数说明： 1）指定分隔符，指定从哪儿进行分隔的标记 2）指定要返回数组的长度 let str = '1,2,3' console.log(str.split(',')) // ["1", "2", "3"] console.log(str.split(',',2)) // ["1", "2"] console.log(str.split('-')) // ["1,2,3"]
2021-02-25 15:01:04
551
原创 vue项目使用vue-awesome-swiper及填坑
1、下载插件 npm install --save vue-awesome-swiper 2、引入 1.全局引入 在 main.js 里引入（全局）: import VueAwesomeSwiper from 'vue-awesome-swiper' Vue.use(VueAwesomeSwiper) import 'swiper/dist/css/swiper.css' 2.局部引入 <script> import 'swiper/css/swiper.css' import {
2021-02-24 15:59:34
871
原创 闭包的知识点
1、含义 闭包是指有权访问另外一个函数作用域中的变量的函数 闭包是一种特殊的对象，它由两部分组成：执行上下文（代号 A），以及在该执行上下文中创建的函数 （代号 B），当 B 执行时，如果访问了 A 中变量对象的值，那么闭包就会产生，且在 Chrome 中使用这个执行上下文 A 的函数名代指闭包。 2、变量的作用域 1、全局变量：在函数内部可以直接读取全局变量 var a = 5 //定义全局变量a function closure() { console.log('获取全局变量a：' + a
2021-02-22 11:35:26
349
原创 JS操作字符串常用方法及增删改查
1.截取从 start 位置开始， end 位置结束(不包含 end) 的字符串，返回一个新字符串 2.若参数为负数，需要从尾部位置倒数 负数参数长度 作为生效位置 3.start 大于 end ，则返回空字符串；start 大于字符串长度，返回空字符串
2021-02-19 11:24:29
1003
原创 使用js向字符串开始位置追加字符串
向字符串开始位置追加字符串 str = “全剧,片花预告,穿帮,精选” // [“全部”，“全剧”，“片花预告”，“穿帮”，“精选”] let str = '全剧,片花预告,穿帮,精选' str.slice(0,0) // "" str.slice(0,0).concat('全部，') // "全部，" str.slice(0,0).concat('全部，', str) // "全部,全剧,片花预告,穿帮,精选" str.slice(0,0).concat('全部，', str).split(',')
2021-02-19 10:37:34
5194
原创 canvas实现电影票随机座位
<canvas id="myCanvas" width="600" height="600" style="background:#eee"></canvas> <button id="btn1">1个</button> <button id="btn2">2个</button> <button id="btn3">3个</button> var myCanvas = document.
2021-02-10 14:50:59
1449
原创 Math.xx()函数常用方法汇总
Math 是数学函数，但又属于对象数据类型 typeof Math => ‘object’ console.dir(Math) 查看Math的所有函数方法 Math对象 绝对值 Math.abs() Math.abs(-12) => 12 取整 // 1.向上取整 // 即小数部分直接舍去，并向正数部分进1 Math.ceil() Math.ceil(12.1) = 12 Math.ceil(12.8) = 12 Math.ceil(12.0) = 12 Math.ceil(-12..
2021-02-07 10:09:16
377
原创 JS数组遍历常用方法总结
arr.some(item,index,array) 用法：检测数组中的元素是否满足指定条件 参数： 1. item：数组中正在处理的元素。 2. index：数组中正在处理的元素的索引值。(可选) 3. array：被遍历的数组。 执行：依次检测数组中每一个元素是否符合给定函数的条件，返回布尔值，不会对空数组处理，不改变原数组 返回： 1、如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测。 -2、如果没有满足条件的元素，则返回false。 注意：有一个满足就返
2021-02-04 14:45:34
349
原创 JS操作数组之增删改查总结
万能方法：splice() 向数组指定位置添加任意数量的元素 用法：传入至少3个参数： 1：增加时，起始位置、要删除的元素个数、要添加的元素，第二个参数传0 2：删除时，起始位置、要删除的元素个数，第二个参数传要删除的个数 3：改，参考增加和删除 let arr = [-2, -1, 0, 1, 2, 3] arr.splice(3,0,0.2,0.4,0.6,0.8) console.log(arr) // [-2, -1, 0, 0.2, 0.4, 0.6, 0.8, 1, 2, 3] arr.sp
2021-02-02 11:00:42
356
原创 vue移动端使用手势库---alloytinger
操作图片拖拽、缩放、长按 下载 npm i alloyfinger --save 使用（全局注册） // main.js import AlloyFinger from 'alloyfinger' import AlloyFingerPlugin from 'alloyfinger/vue/alloy_finger_vue' Vue.use(AlloyFingerPlugin,{ AlloyFinger }) 使用 <div v-finger:pinch="p
2021-01-13 15:25:41
1461
原创 mpvue微信小程序开发总结（二）--- vant-weapp组件
使用vant-weapp组件 本文以vant-weapp为例 步骤见官网快速上手：https://vant-contrib.gitee.io/vant-weapp/#/quickstart 注意事项： webpack.base.config.js配置 - 作用: 在编译的时候在小程序中复制node_modules文件加下的vant-app/dist目录 new CopyWebpackPlugin([ { from: resolve('node_modules/vant-weapp/dist'
2020-12-28 15:51:03
534
3
原创 mpvue微信小程序开发总结（一）--- 创建及配置项目
一、熟悉结构 官网地址：http://mpvue.com/mpvue/ 二、创建项目 # 全局安装 vue-cli $ npm install --global vue-cli # 创建一个基于 mpvue-quickstart 模板的新项目 $ vue init mpvue/mpvue-quickstart my-project # 安装依赖 $ cd my-project $ npm install # 启动构建 $ npm run dev 三、下载微信开发者工具 下载地址：https://dev
2020-11-26 11:31:04
482
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人