vue
vue3知识,部分所用基于框架arco.design
庞胖
三分钟的热度可以为你指明方向,剩下的路是否继续坚持,还是要看自己。
展开
-
VUE中子组件调用父组件的方法,父组件调用子组件的方法,父子组件互相传值和方法调用
父组件(包含的子组件引用标签中加上ref属性),这时给子组件标签使用ref,引用指向的就是子组件的实例。二、直接在子组件中通过“this.$parent.event”来调用父组件的方法。一、使用this.$emit()向父组件触发一个事件,父组件监听这个事件即可。三、父组件把方法传入子组件中,在子组件里直接调用。原创 2023-03-07 16:21:32 · 2648 阅读 · 0 评论 -
前端数组快速去重、利用set的特性
【代码】前端数组快速去重、利用set的特性🙂。原创 2023-02-27 08:52:48 · 139 阅读 · 0 评论 -
前端创建一个自定义类型的对象,类似于java创建一个新自定义类型的对象
【代码】js创建一个自定义类型的对象,类似于java创建一个新的对象。原创 2023-02-24 11:36:18 · 101 阅读 · 0 评论 -
uniapp 父子页 同一组件 样式隔离
解决方案:给标签加上一个class或者一个id(注意外层这个setStyle)加上这个标识setStyle,指定样式,这样就ok了。遇见了这个小问题,仅此记录下。原创 2023-02-18 14:57:27 · 702 阅读 · 0 评论 -
js编写trim函数去除空格
【代码】js编写trim函数去除空格。原创 2023-02-16 15:33:03 · 491 阅读 · 0 评论 -
flex布局常用属性记录
当使用 flex 布局时,首先想到的是两根轴线 — 主轴和交叉轴。主轴由flex-direction 定义,另一根轴垂直于它。我们使用 flexbox 的所有属性都跟这两根轴线有关;原创 2023-02-02 16:51:43 · 1276 阅读 · 0 评论 -
前端按对象数组的某个值取值,组合成新对象
两次for循环,取key值作比较,组合新对象。原创 2023-02-02 10:06:17 · 337 阅读 · 0 评论 -
vue3去除字符串前后空格
数据进行分割之后会有空格,可以用下面方法去处理,在调用的时候我默认把角色id转换成字符串去处理的,运用正则去满足trim的使用。仅此记录,感觉蛮实用的。原创 2023-01-06 17:29:00 · 1414 阅读 · 0 评论 -
css中图片缩放后不清晰解决方法
image-rendering 属性用于设置图像缩放算法。它适用于元素本身,适用于元素其他属性中的图像,也应用于子元素。此属性对于未缩放的图像没有影响。在图片样式加上image-rendering属性。场景:uniapp开发,滚动条图片模糊不清晰。原创 2022-12-15 09:10:28 · 1186 阅读 · 0 评论 -
vue3页面无操作,一段时间后自动退出登录
因为组长提到这个功能了,先是百度看了一些方法,理清思路,慢慢摸索出来的,判断用户是否登录是很有必要的,不能在已经退出或者未登录情况下一直提示用户身份过期,晚上依旧难眠,辗转反侧,把这个小功能记录下吧。大概思路就是,登录之后获取时间戳,然后每次点击鼠标获取点击的时间戳,用点击的时间戳减去登录成功的时间戳然后与超时时间作比较,场景:用户登录系统,设置超时时间为20分钟,用户超过20分钟未点击页面,自动退出登录。modal是框架封装的,具体情况自己解析写一下把。原创 2022-11-15 23:29:58 · 1911 阅读 · 0 评论 -
前端样式穿透,本地可以穿透,服务器失效>>>、:deep()、::v-deep、/deep/
基于arco design项目,看项目都是用的:deep(),也是第一次出现这个情况,仅此记录下吧。场景:本地项目开发使用:deep()和>>>去做样式穿透可行,部署到服务器失效,改用/deep/解决方案:每个都试了一遍,/deep/可行😊😊😊,原创 2022-10-21 11:25:52 · 975 阅读 · 1 评论 -
手机号中间四位****代替正则表达式
场景:收货人手机号展示:184****6521。原创 2022-10-20 17:41:32 · 221 阅读 · 0 评论 -
vue前端根据数组对象中的某个值进行排序
场景:商城中管理我的地址,选择其中一条地址点击设置默认值,默认地址设为置顶数据。原创 2022-10-20 17:33:56 · 1673 阅读 · 0 评论 -
vue3数组元素发生变化重新赋予下标
场景:vue3中某个数组针对于下标去删除,删除后要及时更新各数据元素的下标,保证再次进行删除时,按正确的下标进行删除。原创 2022-10-08 09:33:14 · 1151 阅读 · 0 评论 -
vue3给一个对象里的所有key值赋空值或者字符串
【代码】vue3给一个对象里的所有key值赋空值或者字符串。原创 2022-09-26 17:26:59 · 1700 阅读 · 1 评论 -
vue3 页面跑马灯效果
height、width表示运动区域的高度和宽度,值是正整数(单位是像素)或百分数,默认width=100% height为标签内元素的高度。align表示元素的垂直对齐方式,值可以是top,middle,bottom,默认为middle。direction表示滚动的方向,值可以是left,right,up,down,默认为left。scrolldelay表示停顿时间,值是正整数,默认为0,单位似乎是毫秒。bgcolor表示运动区域的背景色,值是16进制的RGB颜色,默认为白色。原创 2022-09-19 16:00:41 · 2268 阅读 · 1 评论 -
vue3子页面刷新,v-show联合v-if实现柱状图隐藏展示,和按条件查询
vue3柱状图,原创 2022-09-03 17:55:01 · 1367 阅读 · 0 评论 -
vue v-if和v-show区别
v-if由false变为true的时候,触发组件的beforeCreate、create、beforeMount、mounted钩子,由true变为false的时候触发组件的beforeDestory、destoryed方法。v-if 在实现上比v-show要复杂的多,因为还有else else-if 等条件需要处理,这里我们也只摘抄源码中处理 v-if 的一小部分。在 vue 中 v-show 与 v-if 的作用效果是相同的(不含v-else),都能控制元素在页面是否显示。原创 2022-09-02 13:53:16 · 2580 阅读 · 0 评论 -
vue3引入组件,并给组件传值
自我总结:首先在父页面定义你想传的数据,然后在你引入的组件那里:datat绑定,然后在定义的组件setup那里接受,我所理解的就是像小程序跳页面传参一样;上述代码和总结仅供参考。场景:首页展示柱状图功能,定义好柱状图,将其引入首页展示。在setup(){}里定义了我想传的一个数据(数组)...原创 2022-09-01 17:04:47 · 3262 阅读 · 0 评论 -
v-if 和 v-for 为什么不能一起使用,经典面试
简单的说,vue2中v-for的执行优先比v-if要高;vue3中 v-if 比 v-for 优先级要高,vue3中if 里面可能会访问到 for 里面的变量 但访问不到 报错。直接贴出官网文档给出的解释,面试有坑,防止踩到!原创 2022-08-11 17:55:28 · 136 阅读 · 0 评论 -
两个span标签之间的缝隙
span直接一行<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> span{ background-color: red; } &原创 2022-04-22 17:11:57 · 189 阅读 · 0 评论 -
针对于vue3的类似性别code值替换,默认选中 基于arco.design
<template #columns> <a-table-column v-for="item of tableColumns" :key="item.key" :align="item.align" :title="item.title" :width="item.width" :data-in..原创 2022-05-26 16:48:32 · 475 阅读 · 0 评论 -
flex-warp换行后 间隔调整
初识前端原创 2022-06-02 16:58:06 · 1384 阅读 · 0 评论 -
页面鼠标样式个人总结学习用
页面鼠标样式个人总结学习用。原创 2022-07-23 17:05:42 · 67 阅读 · 0 评论 -
img标签所需具备的元素
alt如果无法显示图像,浏览器将显示替代文本。title鼠标停放在图片上的时候展示。原创 2022-07-27 10:40:36 · 131 阅读 · 0 评论 -
对齐属性:align-content详解(个人学习记录用)
align-contentflex-start;/*从起始点开始放置flex元素*/align-contentflex-end;/*从终止点开始放置flex元素*/最后一项与终止点齐平*//*将项目放置在中点*//*最先放置项目*//*最后放置项目*/align-contentspace-between;align-contentspace-around;/*align-content不采用左右值*//*基本位置对齐*//*分布式对齐*/...原创 2022-07-29 15:32:45 · 2196 阅读 · 0 评论 -
前端的(typeScript)interface详解(个人学习用)
在面向对象的编程中,接口是一种规范的定义,它定义了行为和动作的规范,在程序设计里面,接口起到一种限制和规范的作用。接口定义了某一批类所需要遵守的规范,接口不关心这些类的内部状态数据,也不关心这些类里方法的实现细节,它只规定这批类里必须提供某些方法,提供这些方法的类就可以满足实际需要。let vegetableObj:Vegetable={ size:'small' } vegetableObj.type='carrot' //报错 提示typ是只读属性。...原创 2022-08-30 16:12:03 · 2196 阅读 · 0 评论 -
前端对于元素的隐藏 浅记 个人学习用
displaynone对于元素的隐藏,不为占用物理空间,即该对象在页面上彻底消失(我应用于页面上滑到一定高度,吸顶,隐藏原数据,将展示的数据none修改)visiblehidden仅仅是隐藏元素,占用物理空间。对于元素的隐藏需求大概是好久之前得了,突然想起来了,记录下。...原创 2022-07-23 17:33:16 · 96 阅读 · 0 评论 -
记一次vue3页面倒计时(定时器)切换页面问题
场景:从含有定时器的页面切换到其他页面时,创建的定时器没有销毁,定时器继续执行,相应的事件也一直在进行;onBeforeUpdate:DOM即将更新。onBeforeMount:DOM即将挂载。onBeforeUnmount:即将销毁。onMounted:DOM挂载完毕。onUpdated:DOM更新完毕。setup相当于之前的created周期:创建时。onUnmounted:销毁完毕。与 2.x 版本生命周期相对应的组合式 API。............原创 2022-08-31 13:52:05 · 2840 阅读 · 0 评论 -
金额数据太大 用...代替
金额数据较大采用省略号代替原创 2022-06-06 13:50:11 · 85 阅读 · 0 评论 -
vue简单获取时间格式化方法
简单获取格式化时间类型原创 2022-06-06 09:26:49 · 933 阅读 · 0 评论 -
vue3 input输入框校验是否为空
<a-form-item field="loginAccount" label="登录账号" :rules="[ { required: true, message: '请输入登录账号' } ]" :validate-trigger="['change', 'blur','input']" > &l...原创 2022-05-30 10:18:22 · 4773 阅读 · 0 评论