- 博客(166)
- 收藏
- 关注
RSS订阅
原创 vue 拖拽放大缩小容器组件
代码可以直接运行实现的效果：可以向四个方向以及四个角落进行拉伸，拖拽封装到GitHub上了：https://github.com/GuLinLing/vue-resize-box<style scoped> .resize-box { position: relative; display: table; border: 1px solid ...
2019-07-08 17:21:53
8654
4
原创 【Vue.$nextTick】数据完全响应之后才会进行的操作
一、功能在修改数据之后会立即使用这个方法，获取更新后的 DOM。有时候你新更新了数据，但是数据响应还没有完全，要是这个时候去操作的话就会报错，nextTick是我认为对解决这类问题的最好的方法二、检测nextTick运行的时间HTML:<template> <div> <ul> <li class="oneli" ...
2019-05-31 16:41:31
2705
1
原创 ES6 数组的解构赋值
目录一、定义二、详情讲解1、数组解构：数组解构时数组的元素是按次序排列的，变量的取值由它的位置决定2、对象解构:对象解构时对象的属性没有次序，变量必须与属性同名，才能取到正确的值。三、用途1、交换变量的值2、从函数返回多个值3、函数参数的定义4、提取 JSON 数据5、遍历 Map 结构一、定义ES6允许按照一定的模式，从数组和对象中提取值，对变量进...
2019-05-08 16:06:21
7200
2
原创 【Vue.$set】 遍历出来的el-select可以实现对el-option对应的选中
一、效果图以及效果：选中其中一行，其他行不会被选中，不会收影响二：代码：<el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%> <el-table-column prop="files" label="文件名称"></el-...
2019-01-10 19:28:50
15276
原创 JS通过offsetWidth和width获取div宽度的区别
注：本次测试只用了width做了测试，height也是一样的1、CSS使用的是内部样式和外部样式<div id="ceshi">我是测试</div>#ceshi { width: 200px; height: 200px;}// 获取数值console.dir(document.getElementById('ceshi').style.wid...
2018-11-16 10:52:21
1732
原创 我常用的Vue中的 class style的几种用法
1、class第一种用法key：class的名称，bodstyle和activeclass都是class的名称，value：布尔值，isactive也是布尔值，为true的时候就把activeclass这个类添加上，为false的时候没有activeclass这个类isactive：布尔，用来控制activeclass这个类是否显示<span :class="{'bodst...
2018-10-30 20:43:00
2286
原创 vue3.0&&vue2.0-prop
注:本篇涉及到的知识点，组合式<script setup>模式以及vue2.0和vue3.0选项式，组合式中非<script setup>模式，使用比较少，不再讲解，可自行看官网。
2024-01-04 18:35:57
542
原创 Vue2/Vue3-插槽(全)
也就是说插槽的内容可以访问父组件的数据作用域，因为插槽内容本身就是在父组件的模板中定义的，插槽内容是无法访问子组件中的数据，vue模板中的表达式只能访问其定义时在所处的作用域，这个和js的词法作用域规则是一样的。某些场景下，插槽的内容想要同时使用父组件和子组件内的数据，要做到这一点，我们需要来让子组件在渲染的时候将一部分的数据提供给插槽。父组件模板的内容只能访问父组件的作用域，子组件的模板只能访问子组件的作用域。vue实现了一套内容分发的Api，将<slot>元素作为承载内容分发。
2024-01-02 09:40:37
662
原创 Vue3.0-watch&&watchEffect函数
要求messagea和messageb变化的时候，实时获取result的值，因为watch只追踪明确侦听的数据源，如果用watch来实现的话，watch就需要写两个监测源，但是watchEffect不需要，它是自动追踪所有能访问到的响应式属性，messagea和messageb无论是谁发生变化都会执行这个函数。在下面这里watchEffect会立即执行，在执行期间，他会自动追踪select.value作为依赖(和计算属性类似)，当select.value变化时，回调会再次执行。
2023-12-28 18:39:19
992
原创 Vue3.0-watch侦测器
计算属性允许我们声明性的计算衍生值，然而在某些情况下，我们需要在状态变化的时候执行一些副作用，例如更改DOM，或者根据异步操作去修改另一处的状态。
2023-12-28 16:29:18
967
原创 Vue3.0-自定义hooks&&computed
3.0借鉴了React的一种机制，用于函数组件中共享状态逻辑和副作用，从而实现代码的可复用性，还有就是在单文件组件功能太多可以用来进行一部分功能的抽离。:其实hooks和2.0的mixin有点类似，但是相对于mixin而言，hooks更清楚复用功能代码的来源，更清晰易懂。:3中的hooks就是函数的一种写法，就是将文件的一些单独功能的js代码进行抽离出来进行封装使用。描述借鉴: https://zhuanlan.zhihu.com/p/661652964。
2023-12-26 18:10:34
508
原创 Vue3组合式-依赖注入provide&&inject
官方的解释: 通常情况下，当我们需要从父组件向子组件传递数据时，会使用props，想象一下这样的结构，有一些多层级嵌套的组件，形成了一颗巨大的组件树，而某一个深层的子组件需要一个较远的祖先组件中的部分数据，在这种情况下，如果仅使用props则必须将其沿着组件链逐级传递下去，这会非常麻烦，provide(供给)和reject(注入)可以帮助我们解决这个问题。专门强调了是3.0且是组合式，不是2.0不支持也不是选项式不支持provide&&inject，是支持但是有很明显的弊端，不建议使用。
2023-12-25 18:02:10
583
原创 Vue3.0飘红报警问题
问题:vue内置api引用:找不到模块"vue-route".你的意思是将"moduleResolution"选项置为"node"解决方法:安装插件TypeScript Vue Plugin(Volar)问题描述:不能使用@引用，找不到模块"@/view/Home.vue"问题描述:组件引用找不到模块“”或其对应的类型声明。解决方法: 添加moduleResolution。解决方法:添加parhs属性，保存既生效。
2023-12-25 10:10:28
466
原创 无限递归一定会栈溢出吗
一开始执行foo的时候，往栈里面添加了一个上下文，在这个执行期间，它会开启一个计时器，计时器到达之后会再一次执行foo，但是定时器是异步的，也就是说这个函数本身不会等待这个计时器结束才去结束，foo该运行结束就会运行结束，运行结束之后就会出栈，然后才是计时器到达，如此往复，所以不会发生栈溢出。很简单，因为栈它是一块内存空间，每一次的函数调用都相当于往这个函数里面添加了一个执行上下文，那如果说这一次函数调用还没结束又调用了自身，那又会加一个，直到把整个栈加满，空间不够了，就叫做栈溢出。
2023-10-17 19:25:34
230
原创 常用的VUE插件
4、Lodash: javascript实用操作库。5、normallize. css: css初始化。1、moment:日期和时间的校验/解析/显示等。2、拖拽:常用表格拖拽，卡片拖拽等。3、离线存储localForage。
2023-05-09 16:24:36
1046
3
原创 vue2.0-mixin视图权限全局引用
1·路由权限：只能看到自己权限内的菜单，且只能访问自己权限内的路由地址。权限管理是让不同的用户只能访问自己权限内的资源，分为3种。2·视图权限：只能看到自己权限内的视图和按钮。3·请求权限：越权请求将其拦截。
2023-05-05 15:28:27
619
原创 git提交修改文件大小写问题
bug: 本地修改了文件夹的大小写，git是提交不到仓库去的，因为git配置默认忽略大小写，因此无法正确监测大小写的更改解决: 运行git config core.ignorecase false关闭git忽略大小写配置，git提交的时候就能检测到名称的更改，就能提交到仓库
2023-01-17 15:53:15
1186
原创 JS深入/ Promise与Async和Axios的关系解析
现在通过实例来进行循序渐进的讲解更容易理解一、 写一个promiselet p = new Promise(() =>{ console. log(1)})调用promise的then的方法p. then(() =>{ console. log(2)})你会发现只能输出1，不能输出2，你会注意到必须加上resolve方法2才会被输出，也就是下面的代码let p = new Promise((resolve) =>{ console. log
2022-12-14 15:58:34
442
原创 JS-数组去重
数组去重的方法太多了，这里列举几个比较简单的一、filter+indexOflet res=[1,2,3,3,2,1]let ad = res.filter((item, index, self) => { return self.indexOf(item) ===index})console.log(ad)// [1,2,3]// lastIndexOf和indexOf用法一样，只不过返回的数据的顺序和indexOf相反二、for...of和indexOf/la
2022-09-19 14:33:53
253
1
原创 JS-for...in/for...of
一、for...of1、特性说明(1)常用于对数组，字符串，Set以及Map等可迭代数据的遍历(2)可迭代的数据结构的判断方法: typeof obj[Symbol.iterator] === function，true则是(3)需要注意一下对象不是普通对象不是可迭代的数据结构，不能使用for...of，会报错let obj={name: 'wuyanzhⅰ'}console.log(typeof obj[Symbol.iterator] === function) // fal
2022-09-05 16:12:59
326
原创 JS-Sort
一、描述1.sort()方法对于对数组的元素进行排序2.sort()的排序顺序可以是字母或者是数字，有升序和降序两种3.sort()的默认排序是按字母升序排序4.sort(fun)fun参数可传可不传5.会改变原始数组二、无参数的特点和例子【一般用来字符串排序】1.无参数按照字符编码进行排序2.无参数是对非对象数组例一:字符串排序let arr = [ "ww", "hh", "dd" ]let arr1 = arr.sort()console.log(arr
2022-08-30 15:54:26
187
原创 element中table数据不更新
解决方法:分两类bug第一类bug: 在data中已经定义，但视图不更新this.tabledata.splice(index, 0)this.＄set(this.tabledata, index, row)这两种方法都是官网所提到推荐的第二类bug: 就是在上面的方法都试验过了之后也解决不了比如这种写法this.tabledata=res.datathis.tabledata.forEach((item)=>{ item['new_name']=t...
2022-07-29 18:15:28
2705
2
原创 前端发版清除浏览器自带的缓存
vue.config.js文件const version = new Date().getTime()module.export = { publicPath: "/", assetsDir: "static", configureWepack: { output: { filename: `static/js/[name].${version}.js`, chunkFilename: `static/js/[name].${version}.js`
2021-12-09 16:34:20
860
原创 轴线/轴单位/轴坐标文字/竖线颜色修改方式
以X轴为例xAxis:{ name:'s', // 轴单位样式修改 nameTextStyle:{ color: 'red' }, // 轴坐标文字样式修改 axisLable:{ textStyle:{ color:'red' } }, // 轴线样式修改 axisLine:{ show:true, lineStyle:{ color: 'red' } }, // 竖线样式修改(与Y轴平行
2021-11-25 09:47:43
460
原创 坐标轴的数据过长分行显示/调整分行后的行间距
简介: 分行显示这个解决方法很多小伙伴都提供了博客，我写的主要目的是因为调整分行后的行间距的方法需求: 我们项目Y轴分两行显示，每行7个字符，分行之后对行间距进行一定的设置yAxis:{ axisLable:{ formatter: function(params){ let newParamsName = '' let numAll = params.length//总长度 let oneNum = 7 // 一行显示几个字符 let row
2021-11-24 18:32:32
496
原创 调整x轴坐标和x轴单位保持到统一水平线
要求是:x轴轴线不显示，x轴单位s和x轴坐标保持统一水平线上，即s和0,1,2,3,4保持同一水平线xAxis: { axisLine:{ show: false // 不显示x轴轴线 }, name: 's', nameTextStyle: { verticalAlign: 'top',// 文字垂直对齐方式 lineHeight: 25 // 行高 }}就是通过verticalAlign和lineHeight设置单位和坐标数据保持到同一水平线...
2021-11-24 17:50:55
574
原创 echartsX轴都加上单位 / 只在末尾加上单位
xAxis:{ name: 's',// 这个设置只在末尾添加单位 axisLable: { formatter: `{value}s` // 在每个x轴坐标都添加了单位 }}上面两个选择其中一个即可，Y轴也是如此设置
2021-11-24 17:32:08
5065
2
原创 数组中有重复数据使用splice删除的bug和解决方法
需求: 对数组arr=[1,2,2,3,4]，删除数组中的2一般写法:会发现删除不干净，还留有一个2let arr = [1,2,2,3,4]arr.forEach((item,index)=>{ if(item===2) arr.splice(index,1)})console.log(arr) // [1,2,3,4]解决方法1: 倒序删除，可以把2全部进行删除let arr = [1,2,2,3,4]let len = arr.lengthfor(let i = len
2021-11-24 11:38:37
808
1
原创 防切屏小技巧
考试的时候不能进行切屏，代码放到console中回车即可继续切屏的小技巧window.onblue=null;window.onkeyup=window.onkeydown=window.onkeyup=window.onkeydown=window.onKeyPress=document.body.onkeyup=document.body.onkeydown=document.body.onKeyPress=onkeyup=onkeydown=onKeyPress=null;windown.onc
2021-09-06 19:01:30
5112
19
原创 tab组件
最新使用滚动条的方式写了tab组件，很新颖，分享记录需求：1、tab组件没有占满父级的宽度的时候，如图一，没有左右两侧的icon2、tab组件占满父级的宽度的时候，如图二，有左右两侧的icon，点击icon可以进行左右移动3、路由进行变化的时候，此时的路由对应的tab应该显示在可见区域内，即随着路由的变化，tab的可见区域的内容也随着变化代码：注：所有使用id找dom的都可以使用ref来替代html:<div class="notesParent"> /..
2021-07-11 20:39:20
483
原创 滚轮事件和拖动滚动条和键盘事件
一、鼠标的滚轮事件触发: 鼠标的滚轮上下滑动的时候触发代码:// DOMMouseScroll:火狐// onmousewheel:其他浏览器if(window.addEventListener){ window.addEventListener('DOMMouseScroll',wheel,false)}window.onmousewheel = document['onmousewheel'] = wheelfunction wheel(event){ console.log(
2021-07-11 17:53:12
4656
原创 Angular-动态绑定class/style
一、CLASS/ngClass，效果都是一样的(1)三目运算<span [class]="index === 0? 'specBlue' : 'specRed'"></span>(2)对象<span [class]='objClass'></span>objClass={ 'classBlue': true, 'classRed': false }(3)数组<span [class]="['classBlue','classRed'
2021-05-10 16:37:06
6375
原创 Git-拉取别的分支的代码/合并多个commit
一、拉取别的分支代码1、git merge方式拉取git add .git commit -m '提交说明' -ngit pushgit pull // 很多分支，会提示你拉具体分支git merge origin/develop // 我要拉的分支// 执行到这里之后，可能会有冲突，有冲突的话就继续提交git add .git commit -m '提交说明' -n// 现在的分支wyz_develop,提交到origin的分支中的wyz_develop中git push origi
2021-05-08 17:32:36
4692
4
原创 Angular-管道/过滤器
angular的管道总体来说可以分为两种:1、angular自带的管道，地址:https://angular.cn/api/common#pipes2、自定义管道使用方法:(1)管道过滤体import { Pipe, PipeTransform } from '@angular/core'// 使用的过程中要使用到name字段@Pipe({ name: 'pipeNameChange' })export class pipeExport implements PipeTransform{
2021-05-08 16:50:38
317
原创 Angular-父子之间传值
1、父—子父组件传出:html文件 在父组件中引用子组件<app-test-child [name]=name></app-test-child>ts 文件public name = 'wyzTestValue'子组件接受:// 引用必要模块，这里简写了，使用的时候根据实际情况进行模块的引用import { SimpleChanges, Input } from 'angular/core'// 接受父组件传过来的数据@Input() name:string
2021-04-13 16:19:37
211
原创 Angular - constructor的理解
之前一直在写vue,然后就直接转到了angular项目，写angular代码的时候有过两个想法有关于constructor(1)constructor的用作是不是用于本组件的私有化？(2)constructor和ngOninit都可以进行赋值，区别是什么？然后今天有时间来看文档了，对上面的疑问解答一、constructor的作用官方术语: 多个服务实例化(沙箱式隔离)解释: 在组件树的同一级别上，有时需要一个服务的多个实例。每个组件都需要该服务的单独实例，每个服务都有自己的工作状态，与其他组件和
2021-04-09 15:28:55
3120
原创 小乌龟克隆报错:git add not exit cleanly
解决方法:修改文件位置:TortoiseGit-Git-Edit global.gitconfig添加内容: [http] sslverify = false
2021-04-06 19:56:16
344
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人