- 博客(169)
- 收藏
- 关注
RSS订阅原创 使用new Date生成时间的问题
a.getTime()的值是1683388800000。b.getTime()的值是1683417600000。b的值要比a的值大八个小时。a、c、d的值一样。
2023-04-07 09:55:51
316
1
原创 何时需要使用beforeRouteEnter
在组件创建时，不仅执行created钩子，同时也会执行beforeRouteEnter。那么，什么时候使用created，什么时候使用beforeRouteEnter？
2022-06-15 14:48:39
9423
原创 element-ui中更改scss变量、并能一键更改主题颜色
element-ui中的样式是使用scss编写的，然后编译成css。就是我们在main.js中引入的那个css文件import ‘element-ui/lib/theme-chalk/index.css’;1、更改scss变量1、为什么要更改在引入 Element 时，可以传入一个全局配置对象。该对象目前支持 size 与 zIndex 字段。size 用于改变组件的默认尺寸，zIndex 设置弹框的初始 z-index（默认值：2000）。Vue.use(Element, { size: 'sm
2022-05-05 10:35:13
3171
1
原创 使用js获取元素的背景颜色
使用js可以很容易地获取到元素的长度、宽度的值，那么怎么用js获取背景颜色，或者字体颜色、字体尺寸等等其它的css值呢？1、Window.getComputedStyle方法Window.getComputedStyle()方法返回一个对象，该对象在应用活动样式表并解析这些值可能包含的任何基本计算后报告元素的所有CSS属性的值。 私有的CSS属性值可以通过对象提供的API或通过简单地使用CSS属性名称进行索引来访问。let style = window.getComputedStyle(element
2022-04-27 16:10:08
6212
原创 css3中var函数
1、css3中的var()函数var() 函数用于插入自定义的属性值，如果一个属性值在多处被使用，该方法就很有用。var函数有两个参数var(custom-property-name, value)custom-property-name 必需。自定义属性的名称（即变量），必需以 – 开头。value 可选。备用值，在属性不存在的时候使用。例：:root { --theme-bg: rgb(28, 172, 198);}.box{ color: var(--theme-b
2022-04-08 14:33:22
7118
原创 sass基本知识
1、变量1、变量的定义Sass 变量使用 $ 符号作为前缀，以键值对形式。例如以下$color为变量<style lang='scss' scoped >$color:blue;.box{ color: $color;}</style>2、局部变量把变量定义在一个大括号里，那变量只能在这个大括号里起作用。（包括这一级大括号下面的括号里面都能使用这个变量）例如：在.container下定义的变量$color，能在.box中使用，不能再.container
2022-04-08 11:38:19
240
原创 electron+vue项目中的通信
在electron+vue项目中，package.json的main所运行的是主进程，代表服务端。vue的部分是项目的渲染进程。主进程和渲染进程的通信通过ipcMain.handle和ipcRenderer.invoke1、在vue中引入ipcRenderer主进程中引入ipcMain没啥大问题。在vue文件中引入ipcRenderer，需要先在vue.config.js中配置 nodeIntegration: true pluginOptions: { electronBuilder
2022-04-06 18:23:20
4570
1
原创 electron打包的一些问题
1、打包配置在vue.config.js中 pluginOptions: { electronBuilder: { builderOptions: { win: { icon: './public/app.ico' }, mac: { icon: './public/app.png' }, productName: 'AppDemo' } }
2022-04-06 16:09:35
4059
1
原创 nvm的一些命令
1、nvm的作用nvm是一个node版本管理工具。当需要在不同项目中使用不同的node版本时，可以使用nvm管理node版本。2、下载安装3、命令nvm ls 查看所有已经安装的版本nvm list available 查看网络上可以安装的版本如果不知道有现在还有哪些可以供安装的node版本，可以先运行nvm list available命令进行查看。其中LTS表示长期稳定版本。nvm install 14.16.1 下载版本号为14.16.1的nodenvm uninstall 1
2022-04-06 12:36:07
15766
1
原创 使用addEventListener绑定事件并传参
1、问题的由来使用addEventListener 绑定事件时，如果同时想传参，一般可使用匿名函数绑定事件。但是这样做的问题时，匿名函数将不能解绑事件。所以如何做到又能传参，又能解绑事件呢？2、使用bind解决var btn1 = document.getElementById('btn1');var btn2 = document.getElementById('btn2'); function fa(e) { console.log('传递参数',e)
2022-03-28 16:49:22
6505
1
原创 解决点击el-radio页面闪动的问题
点击el-radio，页面出现闪动。这是由于radio组件内，el-radio__inner::after元素上设置了.el-radio__input.is-checked .el-radio__inner::after{transform:translate(-50%, -50%) scale(1)}将样式再设置一下就可以了.el-radio__input.is-checked .el-radio__inner::after{transform:translate(-50%, -50%);
2022-02-15 11:26:22
930
原创 require引入资源时，资源路径为变量
1 场景：<img src="" alt="" />在vue项目中，使用img标签的src引入图片时，使用本地电脑图片的绝对路径（不能为相对路径），使用同源的网络图片，使用require(’./warning.png’)引入相对路径的图片var icon='./warning.png'那么如果让src中require一个变量，这个变量为图片路径的字符串，结果是报错不行的。<img :src="require(icon)" alt="" />2、解决怎么解
2022-01-05 08:55:46
2971
2
原创 vue3中shallowRef和ref的实现
1、对象中的get和set方法 var a={ value_:'123', get value(){ console.log('呵呵') return this.value_ }, set value(val){ console.log('哈哈',val) this.va
2021-12-28 09:09:04
1304
原创 vue中slot的使用
1、基本使用在子组件中使用标签定义插槽位置在父组件的子标签之间填写插槽内容son组件<template> <div> <p>床前明月光</p> <slot></slot> </div></template>father组件<template> <div> <son>
2021-12-27 17:05:45
1411
原创 vue3中reactive和shallowReactive的实现
实现数据劫持，不实现页面更新部分const reactiveHandler={ get(target,prop){ const result=Reflect.get(target,prop); return result; }, set(target,prop,value){ const result=Reflect.set(target,prop,value); console.log('===')
2021-12-24 16:26:21
367
原创 Vue3的toRaw和markRaw
1、toRawtoRaw返回由 reactive 或 readonly 方法转换成响应式代理的普通对象。这是一个还原方法，可用于临时读取，访问不会被代理/跟踪，写入时也不会触发界面更新。person是一个响应式对象，通过toRaw(person)得到的user，是一个普通对象，不再是一个响应式对象。更改user.age的值时，页面不会更新。只有更改person.age的值时，页面才会更新。 var person = reactive({ name: "long", age
2021-12-24 15:38:51
770
原创 Vue3的toRef
更改person.age的值时，通过ref(person.age)得到的age1不会改变，因为ref是复制，拷贝了一份新的数据值单独操作, 更新时相互不影响通过toRef(person,‘age’)得到的age2会改变，因为 toRef是引用。它为源响应式对象上的某个属性创建一个 ref对象, 二者内部操作的是同一个数据值, 更新时二者是同步的 setup() { let person =reactive( { name: "long",age:23 }); let age1 =
2021-12-24 15:09:15
2444
原创 Vue3的toRefs
把一个响应式对象转换成普通对象，该普通对象的每个 property 都是一个 ref因为reactive 对象取出的所有属性值都是非响应式的当更改person.age的值时，使用…person解构出来的属性值age没有相应的改变。 setup() { const person=reactive({ name:'long', age:23 }) const change1=()=>{ person.age++ }
2021-12-24 11:35:35
699
原创 Typescript类中的存取器
通过 getters/setters 来截取对对象成员的访问。 它能帮助你有效的控制对对象成员的访问 class Person{ firstName:string; lastName:string; constructor(firstName:string,lastName:string){ this.firstName=firstName; this.lastName=lastName; } get ful
2021-12-22 10:08:19
129
原创 Typescript类中的静态成员
类中的静态成员，包括静态属性和静态方法，这些成员在类本身上而不是在类的实例上。class Person{ static color:string='yellow' } var a=new Person(); console.log(Person.color)在类中，使用关键字static修饰的成员就成为了静态成员，静态成员不能通过实例访问，例如通过a.color访问，只能通过Person.color来访问和修改。...
2021-12-22 09:57:27
347
原创 Typescript类中的抽象类
抽象类：包含抽象方法，抽象方法一般没有任何的具体内容实现也可包含实例方法抽象类不能被实例化，它是为了让子类进行实例化，及让子类去实现内部的抽象方法抽象类最终都是为子类服务的。编写抽象类的目的：动物都有say这个方法，但是不同的动物，say的方式不一样，例如dog是汪汪，cat是喵喵，dark是嘎嘎。那么，在动物类中就不能具体实现这个say方法，而只能在每个不同的动物子类中再去实现say方法。abstract class Animal { name: string; ab
2021-12-22 09:42:20
239
原创 Typescript类的修饰符
类中成员的修饰符，用来描述类中成员（属性、构造函数、方法）的可访问性。1、public修饰符当我们写一个类时，如果没有添加修饰符，那么类中成员就会有默认的修饰符public，表示公共的，在任何位置都可以访问该成员，在外部如a.name，在子类的内部（通过this.name）class Person{ public name:string; public age:number; public constructor(name:string,age:number)
2021-12-21 17:11:49
536
1
原创 Typescript类与接口
类可以通过接口的方式，来定义当前这个类的类型。类实现接口，接口定义（约束）类接口继承接口1、一个类实现一个接口定义一个接口定义一个类时，implements这个接口，那么在这个类中，就必须要实现这个接口中所定义内容 interface IFly { fly(); } class Person implements IFly { fly() { console.log("飞"); } } const perso
2021-12-21 11:36:48
342
原创 Typescript之枚举类型
枚举类型枚举里面的每个数据值都可以叫元素，每个元素都有自己的编号enum Color { red, green, blue, } let color:Color=Color.red console.log(color)console.log(color)，将打印0枚举数值默认从0开始依次递增，Color.red是0，Color.green是1，Color.blue是2根据特定的名称得到对应的枚举数值
2021-12-20 15:42:31
130
原创 typescript之数组
1、简单的数组类型定义例1：let age:number[];在变量后加上:number[]，类型+方括号那么在给数组age赋值时，age数组中的元素都必须是number类型，而不能是其它类型。同样，在使用age.push(23)时，只能往数组中push number类型的值。例2：使用anylet list:any[];表示数组中的元素可以是任意类型。此时其使用就如同JavaScript中的数组一样了2、泛型定义数组例1：let son:Array<number>
2021-12-20 15:19:55
464
原创 pc端调试使用微信环境
1、环境的判断通过navigator.userAgent属性获取当前的浏览器类型/操作系统等信息const verdictUsergent = function () { // 1 ：微信 2 ：安卓手机银行 3 ：ios手机银行 0 ：非法 var userAgent = navigator.userAgent.toLowerCase() if (userAgent.match(/MicroMessenger/i) == 'micromessenger') {
2021-11-02 19:48:15
1744
原创 typescript之接口的定义
1、接口ts中，接口用来定义对象类型的数据对类的一部分行为进行抽象对“对象的形状（shape）”进行描述接口名字一般首字母大写1、定义一个接口例： interface Person { name: string; age: number; }使用接口，用来定义一个对象 let tom:Person={ name:'tom', age:23, }那么tom就是一个Person类型的数据Person接口中有na
2021-10-24 12:05:56
1425
原创 npm安装依赖的时候全局安装在哪里
使用npm install命令的时候，如果没有加上-g，那么这个依赖就安装在当前工程的node_modules文件夹中。当加上-g这个参数时，就是全局安装了。那么此时，依赖是安装在哪里？通过命令 npm config get prefix查看全局的安装路径通过命令npm config set prefix 路径，设置依赖包全局安装路径...
2021-10-22 10:36:17
811
原创 子组件引入的js文件的两个问题
子组件中通过import引入的js文件，会在创建子组件的vue实例前就会被执行，所以会先于父组件中的钩子先执行。另：在两个组件中都引入了同一个js文件，此js文件中都做了打印；那么最终只会打印一次。...
2021-10-19 08:48:54
452
原创 Element的Collapse 折叠面板的v-model
<el-collapse v-model="activeNames" @change="handleChange"> <el-collapse-item title="一致性" name="1"> </el-collapse-item> 。。。</el-collapse>activeNames：当前激活的面板(如果是手风琴模式，绑定值类型需要为string，否则为array) data() { return {
2021-10-18 11:14:58
1506
原创 css样式穿透
1、>>>vue的style使用的是css<style lang="css" scoped>.a >>> .b { /* ... */ }</style>2、/deep/像scss等预处理器无法解析>>><style lang="scss" scoped>.a{ /deep/ .b { /* ... */ }} </style>3、::v-deep，必须是双冒号
2021-10-12 11:48:37
116
原创 canvas的drawImage的参数
drawImage() 方法用于在canvas画布上绘制图像、画布或视频。context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);参数描述img规定要使用的图像、画布或视频。sx可选。开始剪切的 x 坐标位置。sy可选。开始剪切的 y 坐标位置。swidth可选。被剪切图像的宽度。sheight可选。被剪切图像的高度。x在画布上放置图像的 x 坐标位置。y在画布上放置图
2021-10-03 18:41:46
8542
原创 使用Promise封装的请求方法
export function fake(n) { return new Promise((resolve, reject) => { setTimeout(() => { if (n === 0) { reject('error') } else { resolve(n) } }, 2000) }).catch(
2021-09-06 09:04:24
238
原创 使用flex进行水平居中的一个问题
对父元素使用flex，能快速使其中的子元素水平居中， .container { display: flex; flex-direction: column; align-items: center; }但是这样会是的子元素中的块元素，默认充满一行的100%失效，需手动为子元素设置宽度。然而去掉align-items: center;后，块元素又能100%占满一行了。...
2021-09-02 10:15:16
680
原创 Promise.reject的一个用法
//请求前拦截器service.interceptors.request.use( config => { // 请求前需要设置header之类在此设置 if (service.showLoading) { showFullScreenLoading() } config.headers['X-Requested-With'] = 'XMLHttpRequest' config.heade
2021-08-25 15:11:13
3487
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人