自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(174)
  • 收藏
  • 关注

原创 JS实现双向数据绑定的三种方式

【代码】JS实现双向数据绑定的三种方式。

2024-04-01 13:50:21 510

原创 一文搞懂Git版本工具常用的操作命令

比如我们对刚才添加的代码不满意,想通过Git命令回退到之前的版本。为了保证代码的同步,我们需要将远程代码拉到本地,git有2个命令可以将远程仓库的内容拉到本地,一个是git pull,可以将远程仓库的代码拉到本地仓库,同时合并到本地工作空间;如下图是整个合并分支的过程,红线上面的是branch0分支的test.md文件的内容,绿线上面是master分支中test.md文件的内容,前者比后者多3行内容(含1行空行),执行合并命令后再看master分支中test.md的内容已经与branch0中的一致了。

2024-01-11 11:03:38 265

原创 使用el-menu做侧边栏导航遇到需要点击两次菜单才展开

如上图,在我第一次点击选中“告警管理”这个菜单的时候,外联监测它会立马收缩起来,当我第二次点击时就不会收缩,而是展开状态,这是因为我的el-menu里default-active和el-submenu的index及el-menu-item的index属性不一致导致的,

2023-06-27 10:27:41 1725

原创 js获取浏览器地址栏参数

有时候我们需要获取浏览器地址栏参数,比如这个地址https://editor.csdn.net/md?

2023-06-25 15:12:13 574

原创 JSON.parse解析json出错的替代方案:小程序上解析json出bug,而在微信开发者工具上解析json正常。

组件进行解码,后通过JSON.parse()将变量还原。如下所示,请求拿到后端数据后需要将其缓存到本地,这里有个坑就是 wx.setStorageSync和wx.setStorage单个key存储的数据最大1mb,如果你拿到后端的数据大于1mb,你直接存本地就会导致真机上报错,而微信开发者工具上可能不会报错,所以你看到了我这里用了try catch , 除此之外,我还把数据通过路由wx.reLaunch携带传递给下一页。函数可把字符串作为 URI 组件进行编码。然后使用的话需要先引入这个util.js。

2023-06-13 11:19:14 1370

原创 Vue项目里防抖的使用

在Vue项目里,找到src下的directives目录,如果发现src下没有这个目录,那我们就自己建一个directives目录。有时候我们表单保存时,如果快速点击保存按钮,会出现多次提交保存同一表单到数据库的问题,这样会导致同一表单短时间重复提交多次,于是我们可以用到防抖。最后在入口文件main.js里引入自定义指令。

2023-05-27 09:42:34 871

原创 el-upload上传图片成功,详情页回显base64格式的图片

上传图片,并传给后端图片格式是base64。

2023-05-24 18:02:46 3295 1

原创 18个常用的 JS 工具函数助力高效开发

日常开发中,面对各种不同的需求,我们经常会用到以前开发过的一些工具函数,把这些工具函数收集起来,将大大提高我们的开发效率。

2023-05-06 09:28:20 216

原创 知道区id,如何根据区id获取到省id及市id

有时候,后端返回给我们的数据结构如下图所示,数组对象结构,省对应一个省id及省name,市对应一个市id及市name,区对应区id及区name。前端需要根据区id找到市id、市name、省id、省name,这个时候需要用到递归啦!详细代码如下: //vue文件里的template模板里 <template> <div @click.prevent="digui">递归例子</div> </template>

2021-07-12 22:07:55 1713 2

原创 类数组与数组的区别及相互转化,通过Array.from将类数组转为真正的数组

函数的arguments对象arguments是一个类数组对象,包含着传入函数中的所有实参集合,虽然arguments主要作用是保存函数实参,但这个arguments有一个callee属性,它是一个指针,指向拥有这个arguments对象的函数。函数也是对象,因此函数也有属性和方法,每个函数都包含length属性和prototype这个原型属性,其中,length表示函数希望接收的形参个数.类数组与数组的区别相同点:都可用下标访问每个元素,都有length属性。不同点:数组对象的类型是Array

2020-05-18 16:16:05 3995

原创 脚手架vue-cli和@vue/cli的搭建及区别

vue-cli与@vue/clivue脚手架版本目前有2,3,4.不管搭建哪个版本的脚手架,首先都需要安装node.node的安装node的安装我们可以直接去node官网(http://nodejs.cn/)下载安装,node安装完之后,node自带的包管理工具npm也就安装好了,我们win系统直接开始在cmd窗口输入node -v查看node版本号,如下图能看到版本号说明node安装成功:...

2020-04-14 22:17:03 14309 6

原创 Vue3样式穿透deep

在vue3.0之前可使用,例如(复写样式前加/deep/),vue3.0及后使用就会报错。

2024-06-28 11:54:17 356

原创 Vue3注册局部组件和全局组件

在项目component文件夹下新建index.ts,composition模式。

2024-06-26 17:29:00 489

原创 echarts做折线堆叠面积图充满撑满整个div,并且要大屏的适配

这里,由于我们在main.js里vue原型上挂载了echarts,所以可以直接this.$echart来获取echart对象。

2024-06-11 16:54:45 560

原创 css 剪切属性clip-path

【代码】css 剪切属性clip-path。

2024-06-11 11:18:56 351

原创 el-tree回显复选框时半选中和全选中的树

项目需求如下:当我点击“编辑”后,需要在tree树上全勾中和半勾中选项,由于后端接口返回的tree树是含了父级节点id的数组集合,所以我们回显时需要处理好这个全勾中和半勾中的问题。

2024-06-11 10:21:43 925

原创 Vue2里CSS动画实际应用之transform属性和animation属性的使用

最近项目需要做个简单的动画,如上图,框出来的图片需要上下浮动在Y轴上来回循环的移动,这个要用到如下css代码:.active-image-7 { animation: 5s float7 linear infinite normal; } @keyframes float7{ 0% { transform: translateY(0px); } 50% { transform: tra

2024-06-04 11:05:04 269

原创 Pinia(五): 了解和使用plugin

如果要添加外部属性, 添加来自其他库的类的实例, 添加其他非响应式的数据, 我们应该使用 markRaw 包装一下再传递给 pinia.

2024-05-31 13:47:01 821

原创 Pinia(四): 了解和使用getters

大多数时间, getter 都仅仅依赖于 state, 但是有时候也会依赖其他 getter. 所以呢, 如果 getter 定义为非箭头函数就可以通过 this 拿到整个 store 实例, 但是由于 TS 又必须为函数返回值定义类型. 但是这并不影响将 getters 定义为箭头或者, 也不影响不使用 this 的 getters。getters 可以通过返回一个函数 A 来接收参数, 这个 A 的返回值也就是 getter 的值.直接在 getter 内部使用即可。直接通过 store 实例对象。

2024-05-30 11:52:19 259

原创 Pinia(三): 了解和使用state

state 就是我们要定义的数据, 如果定义 store 时传入的第二个参数是对象, 那么 state 需要是一个函数, 这个函数的返回值才是状态的初始值.这样设计的原因是为了让 Pinia 在客户端和服务端都可以工作。我们可以通过 store 的 $subscribe 方法侦听 state 的改变. 使用 $subscribe 而不是 watch() 的好处是 $subscribe 总是在 state 修改之后执行一次.官方推荐使用箭头函数(()=>{ })获得更好的类型推断。

2024-05-30 11:43:38 975

原创 Pinia(二): 了解和使用Store

1.通过 defineStore 函数定义 store.defineStore 接收两个参数id: 唯一的标识, string 类型. Pinia 使用 id 与开发者工具建立联系.第二个参数可以是一个函数, 也可以是一个对象.defineStore 返回一个函数, 一般约定将返回值命名为 use…2.第二个参数: 对象类型如果要传入对象类型作为第二个参数, 在对象中可以配置state: 状态, 即数据. 📕注意 state 是一个函数, 函数的返回值才是真正定义的数据。

2024-05-30 11:31:25 1002

原创 Pinia(一):安装pinia

Pinia安装与快速上手(Vue3@3.2.37+Vite@1.0.0)创建 src/store/index.ts。在 main.ts 中引入和使用。

2024-05-30 11:13:48 132

原创 Vue3路由的安装与使用(嵌套路由)

安装命令 npm install vue-router@4。在id后面添加括号,正则校验参数值为数字,输错跳404。src\router\index.ts下。id后面加个*号,传或不传都可以。

2024-05-30 10:54:00 239

原创 TS 进阶类型之联合类型、交叉类型、类型别名、 函数类型、对象类型、字面量类型、泛型、as断言

当 TS 不确定一个联合类型的变量到底是哪个类型的时候,可以定义多种类型,例如,一个变量既支持 number 类型,又支持 string 类型.对象的属性是可以有修饰符的,目前有两种修饰符,分别是 readonly 关键字对应的可选属性 和?联合类型 | 是指可以取几种类型中的任意一种,而交叉类型 & 是指把几种类型合并起来。类型是有父子关系的,子类型的值可以赋值给父类型,但是父类型的值是不能够赋值给子类型的.然后我们在每个属性前面加上了 readonly 这样所有的属性都是只读的了。

2024-05-27 18:12:21 398

原创 TS安装、TS八大基础类型、TS元组、枚举和断言

常数枚举与普通枚举的区别是,它会在编译阶段被删除,并且不能包含计算成员,假如包含了计算成员,则会在编译阶段报错.

2024-05-27 18:08:39 916

原创 TS里可选参数必须要放在函数入参的最后面,不然会导致编译错误

【代码】TS里可选参数必须要放在函数入参的最后面,不然会导致编译错误。

2024-05-27 17:22:35 195

原创 深入理解Vue3里的defineModel

既然defineModel是声明了一个prop,那同样也可以定义prop的type、default。除了支持type和default,也支持required和validator,用法和定义prop时一样。defineModel也支持自定义修饰符,比如我们要实现一个将输入框的字母全部变成大写的uppercase自定义修饰符,同时也需要使用内置的trim修饰符。<template>// get我们这里不需要},});</script>

2024-05-13 18:27:55 1304

原创 Vue3里defineSlots与defineOptions

该API是在 < script setup> 里使用的。它还返回 slots 对象,该对象等同于在 setup 上下文中暴露或由 useSlots() 返回的 slots 对象。通过这个宏,可以指定组件中的插槽名称和对应的数据,这样在使用组件时,可以通过具名插槽的方式传递内容。defineSlots() (声明了slot的子组件才使用该api)虽然这个宏函数在 Vue 3 中并不是必须的,因为它主要是为了向后兼容,但它可以用来声明组件的 data、methods、computed 等选项。

2024-05-13 17:53:19 506

原创 Vue3里通过defineExpose编译宏可以指定允许父组件访问子组件哪些属性和方法,通过provide和inject 顶层组件向任意的底层组件传递数据和方法,实现跨层组件通信

备注:顶层组件给底层组件提供的是数据时,底层组件只是渲染值;如果底层组件想要改传递的该值,需要顶层组件重新提供更改改数据的方法,底层组件获取到该方法后调用就能更改顶层组件传的值了。默认情况下在< script setup >语法糖下组件内部的属性和方法是不开放给父组件访问的,可以通过defineExpose编译宏指定哪些属性和方法允许访问。通过 ref标识 获取真实的 dom对象或者组件实例对象。传递方法:点击按钮,数字修改表示顶层组件的值已经修改。:底层组件通过inject函数获取数据。

2024-05-07 11:16:25 515

原创 CSS实现渐变色

css实现渐变色

2024-05-07 10:08:14 298

原创 Vue 引入config.js后别的js访问不到window对象下的属性

这个时候我们打印window.g就是undefined。因为vue的编译是以webpack为基础的 而index.html的引用在webpack编译之前 无法使用相对路径 而BASE_URL为内置全局变量 可以指向到项目真正的根目录下。这是因为<%= BASE URL %>代表 public文件夹下,<%= BASE_URL %>data/表示public/data 文件夹下。

2024-04-08 16:59:59 374

原创 Vue axios请求报错后重复提示同一句话,处理只提醒一次这句话,避免重复提醒

【代码】Vue axios请求报错后重复提示,处理只提醒一次。

2024-04-08 14:45:46 428

原创 vue iview table实现全选

【代码】vue iview table实现全选。

2024-04-08 11:02:01 460

原创 Vue input密码输入框自定义密码眼睛icon

【代码】Vue input密码输入框自定义密码眼睛icon。

2024-04-07 09:22:44 558

原创 Vue项目登录页实现获取短信验证码的功能

现在我们管理后台有个需求,就是登录页面需要获取验证码,用户可以输入验证码后进行登录。之前我们写过不需要调后端接口就获取验证码的方法,具体看。

2024-04-01 14:25:22 1073

原创 为什么不推荐用innerText,最好用innerHTML

innerHTML和innerText 这两个属性都是获取document对象的文本内容的,innerHTML指的是从对象的起始位置到终止位置的全部内容,包括Html标签。**同时,innerHTML 是所有浏览器都支持的,innerText 是IE浏览器和chrome 浏览器支持的,Firefox浏览器不支持。通过 chrome 浏览器打开,弹出内容为 “hello world” 和 “hello world”通过IE浏览器打开,弹出内容为 “hello world” 和 “hello world”

2024-04-01 11:50:05 95

原创 从A项目跳转到B项目,Vue两个不同项目之间实现跳转

这里的window.g.BackUrl是我们在B项目的public下的config.js里对跳回地址进行设置的值,也就是在B项目代码config.js里写上A项目的访问地址,方便调用,然后这里homePage也是A项目的首页路由地址,这样就实现了从B项目跳回A项目。最近遇到一个需求,就是有两个不同的项目,姑且叫项目A与项目B吧,前端技术栈都是Vue,现在登录成功A项目后希望点击A项目里某个按钮可以跳转到B项目里的某个页面,然后点击B项目里某个按钮可以跳回到A项目里的某个页面。

2024-04-01 11:23:38 659

原创 Vue动态设置控制表格列表展现列

最近遇到一个需求,表格列表默认不展示某一列,当我设置后可以展示该列,也可以展示和隐藏别的列,起到可以对整个表格列展示隐藏控制的效果,如下示例,默认不展示“单位名称”这一列,在我点击设置齿轮后可以看到,有“单位名称”这一列,但未打钩:当我勾中“单位名称”,去掉“地址”的勾中后,列表可以看到“单位名称”这一列,看不到“地址”这一列。达到了我们控制表格列展示隐藏的效果。这里用到的UI组件库是iview和elementUI。实现思路是:列表展示列我们用到了tableHead,然后我们定义了一个数组showLis

2024-03-22 11:58:08 454

原创 Vue项目使用process.env关键字及Vue.config.js配置解决前端跨域问题

由于我们的项目需要在不同环境下进行运行(开发,生产,测试等),这避免我们需要多次的去切换请求的地址以及相关的配置,vue-cli2是可以直接在config文件中进行配置的,但是vue-cli4和vue-cli3已经简化了,没有config文件怎么办?既然知道项目运行的是那个模式,是不是我们就可以在不同模式下运行不同的变量信息,如开发环境使用端口8080,线上(生产)环境的端口是80,这个时候你会想,我知道不同模式配置不同信息,那信息配置在那个文件呢。需要注意的是,以上方法适用于开发环境下解决跨域问题。

2024-03-19 17:43:11 564

原创 git推送代码报错error: failed to push some refsto‘远程仓库地址’解决办法,以及撤销 git rebase变基命令git rebase --abort的使用

于是我们的仓库就有了README.m和.gitignore文件,然后我们把本地项目关联到这个仓库,并把项目推送到仓库时,我们在关联本地与远程时,两端都是有内容的,但是这两份内容并没有联系,当我们推送到远程或者从远程拉取内容时,都会有没有被跟踪的内容,于是你看git报的详细错误中总是会让你先拉取再推送,但是拉取总是失败。我们在创建仓库的时候,都会勾选“使用Reamdme文件初始化这个仓库”这个操作初识了一个README文件并配置添加了忽略文件。最近在把代码推送到远端仓库时遇到一个问题,推送不上去,报错。

2024-03-15 09:47:40 75

原生js实现淘宝放大镜效果

原生js实现淘宝放大镜效果,轻轻松松达到淘宝预览商品放大商品时的效果,不管是初级前端开发工程师,还是高级开发工程师,这个小项目可能会在实际开发项目过程中用得到,希望能让大家提升js功底,原生js实现淘宝放大镜效果,轻轻松松达到淘宝预览商品放大商品时的效果,不管是初级前端开发工程师,还是高级开发工程师,这个小项目可能会在实际开发项目过程中用得到,希望能让大家提升js功底,原生js实现淘宝放大镜效果,轻轻松松达到淘宝预览商品放大商品时的效果,不管是初级前端开发工程师,还是高级开发工程师,这个小项目可能会在实际开发项目过程中用得到,希望能让大家提升js功底,原生js实现淘宝放大镜效果,轻轻松松达到淘宝预览商品放大商品时的效果,不管是初级前端开发工程师,还是高级开发工程师,这个小项目可能会在实际开发项目过程中用得到,希望能让大家提升js功底,原生js实现淘宝放大镜效果,轻轻松松达到淘宝预览商品放大商品时的效果,不管是初级前端开发工程师,还是高级开发工程师,这个小项目可能会在实际开发项目过程中用得到,希望能让大家提升js功底,原生js实现淘宝放大镜效果,轻轻松松达到淘宝预览商品放大商品时的效果

2023-10-19

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除