- 博客(212)
- 收藏
- 关注
原创 js reduce 的别样用法
注意这里 initialValue 是个空数组,而每次循环后 返回值还是个数组,循环结束之后就相当于对原数组list 做个过滤和相关操作(相加),呢么最后一次循环返回的数组结果就是我们需要的对象数组。尽量少的代码实现了我们想要的效果。之后再用 mergeItem 接受一下最新值,即可实现了我们的逻辑。上面例子中的初始值是个空数组,之后不断地往里面塞入新的元素或者对元素的属性进行相加等,操作,最终相当于过滤并且对数组元素相加的效果,非常实用,代码精简化。reduce 用法 参考。
2024-07-18 17:48:22 214
原创 vue 自定义指令防抖和节流
要实现防抖(debounce)效果的 Vue 自定义指令,你可以使用闭包来包裹一个定时器,确保在指定的等待时间内多次触发事件时,只有最后一次触发后经过指定时间才会执行回调函数。注意,在实际应用中,你可能需要根据具体的场景和需求来调整防抖逻辑,比如考虑在防抖期间是否允许执行回调,或者是否需要在防抖期间阻止事件的进一步传播等。如果你想要的是防抖(debounce)效果(即,在一段时间内多次触发事件后,只在最后一次触发后的一段时间内执行一次方法),则需要使用不同的逻辑。在这个例子中,我们定义了一个。
2024-05-20 15:10:23 501
原创 CSS height auto 过渡
ps:可能有伙伴会问,呢上面的例子和height:auto有什么关系,需要注意。height的默认值就是auto;
2023-12-11 18:07:22 694
原创 vue2 按钮权限控制组件 Authority
通过这种方式,你可以灵活地根据具体情况来进行组合和使用,来实现更丰富的权限控制逻辑。,表示只有管理员可以看到插槽中的内容,因此按钮会被显示。属性根据传入的角色和权限数据决定是否显示插槽内容。注意:核心思想是使用插槽的方式,控制显示隐藏。这里使用了插槽来显示具有权限的内容。这里展示了三个使用场景,其中第一个。权限时,才能看到插槽中的内容。,表示是普通用户,但是在拥有。第一步,创建一个名为。
2023-10-08 12:21:29 371
原创 webscoket 封装
<el-table-column header-align="center" align="center" label="序号" width="60" > <template slot-scope="scope"> <span>{{ scope.$index + 1 }}</span> </template>
2023-08-21 17:21:25 393
原创 解决el-cascader 点击单选按钮,但是不触发懒加载,调用展示下层接口
【代码】解决el-cascader 点击单选按钮,但是不触发懒加载,调用展示下层接口。
2023-08-18 16:33:42 973 2
原创 el-table 树形结构数据 设置某一层,新增按钮不展示
属性以及其他相关部分根据您的实际需求进行调整,确保适配您的数据结构和表格列定义。同时,需要在样式部分的。的返回值来确定当前行的层级,并根据层级判断是否显示新增按钮。方法,通过递归查找当前行的父节点并计算层级。在修正后的代码中,我们添加了一个。类的样式,以隐藏新增按钮。
2023-07-31 18:16:00 1093
原创 uniapp 的uni.getImageInfo接口API 获取失败
原因:如果你的图片很小,一般小于10kb,小程序会自动把你的图片转换成base64位,呢么就会导致你使用uni.getImageInfo接口报错,所以上面列出了,取消此功能的方法,这样就可以正常使用了,但是缺点是请求个数变多。
2023-06-16 15:38:02 3871
转载 uni-app textarea auto-height 文字出现上下滚动
uni-app textarea auto-height 文字出现上下滚动-腾讯云开发者社区-腾讯云
2023-06-12 16:11:19 515
转载 Vue 插槽详解
这句话的意思就是,没有插槽的情况下在组件标签内些一些内容是不起任何作用的,当我在组件中声明了slot元素后,在组件元素内写的内容。Vue插槽,是学习vue中必不可少的一节,当初刚接触vue的时候,对这些掌握的一知半解,特别是作用域插槽一直没明白。我们在内写的"你好"起作用了!在组件中,我给插槽起个名字,一个名字叫"girl",一个名字叫"boy",还有一个不起名字。说白了就是我在组件上的属性,可以在组件元素内使用!
2023-05-09 17:50:01 120
转载 js 监听div的resize事件
我们平时在监听resize变化时,一般监听的都是window/body。可以绑定onresize的标签 body可以绑定onresize的对象 window只有一个起作用,后定义覆盖前定义的但是有时我们希望监听div的resize变化该怎么办呢?尤其是现在css提供了resize属性。
2023-01-29 13:08:06 934
转载 Element-UI el-upload组件,上传失败,但是依然显示文件列表
最近在使用element-ui的 el-upload组件,发现一个问题,就是我在上传文件过程中,上传失败了,文件列表还展示,非常尴尬。
2023-01-18 16:45:06 3251
转载 前端实现HTML转PDF下载的两种方式
在项目工具方法存放文件夹utils中创建// 导出页面为PDF格式} else {}}}})}}}以上两种实现方式各有优劣,方式一是纯前端实现,需要引入第三方插件,可能会导致项目体积增加。方式二虽然更加简洁,但a标签的download属性为HTML5新增属性,可能存在兼容性问题。如果有需要,可以根据自己情况来选择。
2022-12-16 15:05:20 3153 1
转载 vue 带参数跳转打开窗口
如果参数在路径中:router.js path: '/project/:id'var { href } = this.$router.resolve({ path: '/project', query: { id: this.id }});window.open(href);获取参数:this.$route.query.id如果参数不在路径中:1.不打开新窗口: path: '/projectlist' , name: '项目列表...
2022-01-13 11:57:26 274
转载 Vue transition实现点赞动画效果
爱心效果材料:爱心图标两个,没有我这种 icon 组件的用 png 图片代替<transition :name=" isLike ? 'zoom' : '' " mode="out-in"> <!-- 爱心图标 --> <icon data="@icon/like.svg" color="#FF0000" v-if="isLike" key="like"></icon> <icon data="@icon/unl...
2022-01-07 14:26:10 2088
转载 tinymce-vue使用教程
转自:tinymce-vue使用教程 - 简书一、资源下载npm install tinymce -S //当前版本^5.1.1npm install @tinymce/tinymce-vue -S //当前版本^3.0.1二、安装语言包资源下载后,在 node_modules 中找到 tinymce/skins 目录,然后将 skins 目录拷贝到 static 目录下,(PS: 如果是使用 vue-cli 3.x 构建的 typescript 项目,就放到 public 目
2022-01-04 16:04:19 11487 2
转载 element-ui Upload多文件一次上传,获取选择的文件的数量
<el-upload ref="fileUpload" v-loading="fileloading" class="upload-file" :action="uploadUrl" :multiple="true" :limit="9" :on-preview="handleFilePreview" :on..
2021-12-29 18:43:57 4587
转载 Vue - 生命周期函数(activated)
● <keep-alive>包裹的动态组件会被缓存,它是一个抽象组件,它自身不会渲染一个dom元素,也不会出现在父组件链中。当组件在 <keep-alive> 内被切换,它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。● 如<keep-alive>包裹两个组件:组件A和组件B。当第一次切换到组件A时,组件A的created和activated生命周期函数都会被执行,这时通过点击事件改变组件A的文字的颜色,在切换到组件B,这时
2021-12-27 13:09:57 1532
原创 el-input 输入手机号
<el-form-item label="手机号:" prop="phone"> <el-input v-model="identityForm.phone" onkeyup="value=value.replace(/[^\d]/g,'')" @blur="identityForm.phone = $event.target.value" :placeho...
2021-12-20 19:30:36 2002
转载 Token和Session 原理及优缺点
转自:Token和Session 原理及优缺点 - 简书Session和Token的区别一、cookiehttp请求时无状态的。就是说第一次和服务器连接并登陆成功后,第二次请求服务器仍然不知道当前请求的用户。cookie出现就是解决了这个问题,第一次登陆后服务器返回一些数据(cookie)给浏览器,然后浏览器保存在本地,当用户第二次返回请求的时候,就会把上次请求存储的cookie数据自动携带给服务器。如果关闭浏览器cookie失效(cookie就是保存在内存中)如果关闭浏览器cook
2021-11-22 22:36:41 4678
原创 vue 常见的事件修饰符及其作用
常见的事件修饰符及其作用.stop:等同于 JavaScript 中的 event.stopPropagation() ,防止事件冒泡; .prevent:等同于 JavaScript 中的 event.preventDefault() ,防止执行预设的行为(如果事件可取消,则取消该事件,而不停止事件的进一步传播); .capture:当元素发生冒泡时,先触发带有该修饰符的元素。若有多个该修饰符,则由外而内触发。如 div1中嵌套div2中嵌套div3.capture中嵌套div4,那么执行顺序..
2021-09-13 13:03:23 1048
转载 element-UI中el-select下拉框可搜索时候,filter-method自定义搜索方法
使用element-UI框架的使用,我们经常使用el-select下拉框,很多时候还需要使用可搜索的下拉框,然后elementUI官网的实例中只是提了一下filter-method可以自定义搜索方法,但是却没有详细介绍怎么用,这里简单介绍一下用法,希望对大家有点帮助在el-select中加入filterable属性,就开启了搜索功能,然后我们用:filter-method="dataFilter"可以自定义一个搜索筛选条件,在这里来写我们自己的逻辑代码注意筛选的时候首先要把输入的值赋值给下
2021-08-31 18:37:27 11577 3
转载 解决element-ui的表格 列的 边框线消失的bug
转自:https://www.cnblogs.com/shuen/p/10196545.html如上图所示,边框线消失了,解决方法如下添加css代码,如果是修改全局,则到全局样式文件添加.el-table__row{ td:not(.is-hidden):last-child{ right:-1px;} }如果是修改局部,则用样式穿透添加,在当前页面的css文件添加/*注意deep两侧都要有空格*/.current_page_classname /deep/ ..
2021-08-18 16:39:42 4108
转载 将数组格式的字符串转换成数组
转自:https://www.cnblogs.com/shy0113/p/12064590.html 由于数据传输的原因,有时我们得到的是字符串形式的数组(比如:str='["a","b","c","d"]',写成str="['a', 'b', 'c', 'd']",使用JSON.parse()的时候会报错)。要将这种字符串还原成数组对象,有如下两种方法。1,使用 eval() 函数转换(1)eval()函数可计算某个字符串,并执行其中的的JavaScript代码。我们可以借助它来将字符...
2021-08-05 16:49:39 14641 1
转载 如何在uni-app正确使用web-view
转自:https://www.jianshu.com/p/adc72eae0593最近在开发个人的一个小项目的时候遇到一个问题,原因是有一个列表,在点击某一项的时候要跳转到详情,这个详情是一个外部链接,并不是内部的查了一下uni-app的文档,嗯,很好,果然很顺利的找到了web-view组件,然后很天真的直接把web-web放到列表中<template> <view class="history"> <view class="list
2021-08-02 19:14:29 2378
转载 el-select 下拉框数量过多的处理方法之一
Element-ui 下拉列表 选项过多时如何解决卡顿问题当使用Select选择器时,如果下拉列表有几千个几万个,因此通过滚动条一个个的去找不是很现实, 这时可以对select设置filterable属性,可以在下拉控件里进行搜索。例如:<body> <div id="app"> <el-select v-model="value" filterable placeholder="请选择"> <el-opti
2021-07-12 15:55:08 7106 2
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人