自定义博客皮肤VIP专享

*博客头图:

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

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

博客底图:

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

栏目图:

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

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

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

原创 流程图插件

可以集成到webapp,不过需要自己计算位置的插件。jsplumb 中文教程。

2024-07-19 11:35:46 270

原创 js reduce 的别样用法

注意这里 initialValue 是个空数组,而每次循环后 返回值还是个数组,循环结束之后就相当于对原数组list 做个过滤和相关操作(相加),呢么最后一次循环返回的数组结果就是我们需要的对象数组。尽量少的代码实现了我们想要的效果。之后再用 mergeItem 接受一下最新值,即可实现了我们的逻辑。上面例子中的初始值是个空数组,之后不断地往里面塞入新的元素或者对元素的属性进行相加等,操作,最终相当于过滤并且对数组元素相加的效果,非常实用,代码精简化。reduce 用法 参考。

2024-07-18 17:48:22 187

原创 ng-container、‌ng-template 和 ng-content 区别

‌:‌:‌:‌。

2024-07-15 18:57:34 292

原创 vue 自定义指令防抖和节流

要实现防抖(debounce)效果的 Vue 自定义指令,你可以使用闭包来包裹一个定时器,确保在指定的等待时间内多次触发事件时,只有最后一次触发后经过指定时间才会执行回调函数。注意,在实际应用中,你可能需要根据具体的场景和需求来调整防抖逻辑,比如考虑在防抖期间是否允许执行回调,或者是否需要在防抖期间阻止事件的进一步传播等。如果你想要的是防抖(debounce)效果(即,在一段时间内多次触发事件后,只在最后一次触发后的一段时间内执行一次方法),则需要使用不同的逻辑。在这个例子中,我们定义了一个。

2024-05-20 15:10:23 399

转载 pre标签实现自动换行

pre自动换行_笔记大全_设计学院

2023-12-20 17:22:21 426

原创 CSS height auto 过渡

ps:可能有伙伴会问,呢上面的例子和height:auto有什么关系,需要注意。height的默认值就是auto;

2023-12-11 18:07:22 665

转载 uniapp遮罩层禁止下面页面上下滑动

uniapp遮罩层禁止下面页面上下滑动 · 智慧技巧

2023-11-23 16:15:12 270

转载 VUE transition实现展开/收起高度不确定的元素 - 简书

亲测,有效。

2023-11-10 15:43:00 314

原创 vue2 按钮权限控制组件 Authority

通过这种方式,你可以灵活地根据具体情况来进行组合和使用,来实现更丰富的权限控制逻辑。,表示只有管理员可以看到插槽中的内容,因此按钮会被显示。属性根据传入的角色和权限数据决定是否显示插槽内容。注意:核心思想是使用插槽的方式,控制显示隐藏。这里使用了插槽来显示具有权限的内容。这里展示了三个使用场景,其中第一个。权限时,才能看到插槽中的内容。,表示是普通用户,但是在拥有。第一步,创建一个名为。

2023-10-08 12:21:29 338

原创 js 下载流文件 显示loading

【代码】js 下载流文件 显示loading。

2023-08-21 18:11:28 362

原创 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 376

原创 解决el-cascader 点击单选按钮,但是不触发懒加载,调用展示下层接口

【代码】解决el-cascader 点击单选按钮,但是不触发懒加载,调用展示下层接口。

2023-08-18 16:33:42 822 2

原创 el-table 树形结构数据 设置某一层,新增按钮不展示

属性以及其他相关部分根据您的实际需求进行调整,确保适配您的数据结构和表格列定义。同时,需要在样式部分的。的返回值来确定当前行的层级,并根据层级判断是否显示新增按钮。方法,通过递归查找当前行的父节点并计算层级。在修正后的代码中,我们添加了一个。类的样式,以隐藏新增按钮。

2023-07-31 18:16:00 1032

原创 uniapp 的uni.getImageInfo接口API 获取失败

原因:如果你的图片很小,一般小于10kb,小程序会自动把你的图片转换成base64位,呢么就会导致你使用uni.getImageInfo接口报错,所以上面列出了,取消此功能的方法,这样就可以正常使用了,但是缺点是请求个数变多。

2023-06-16 15:38:02 3343

转载 uni-app textarea auto-height 文字出现上下滚动

uni-app textarea auto-height 文字出现上下滚动-腾讯云开发者社区-腾讯云

2023-06-12 16:11:19 470

转载 如何在vue单页面局部引用外部js文件

如何在vue单页面局部引用外部js文件 - 简书

2023-06-01 12:27:05 461

转载 Vue 插槽详解

这句话的意思就是,没有插槽的情况下在组件标签内些一些内容是不起任何作用的,当我在组件中声明了slot元素后,在组件元素内写的内容。Vue插槽,是学习vue中必不可少的一节,当初刚接触vue的时候,对这些掌握的一知半解,特别是作用域插槽一直没明白。我们在内写的"你好"起作用了!在组件中,我给插槽起个名字,一个名字叫"girl",一个名字叫"boy",还有一个不起名字。说白了就是我在组件上的属性,可以在组件元素内使用!

2023-05-09 17:50:01 108

转载 js 监听div的resize事件

我们平时在监听resize变化时,一般监听的都是window/body。可以绑定onresize的标签 body可以绑定onresize的对象 window只有一个起作用,后定义覆盖前定义的但是有时我们希望监听div的resize变化该怎么办呢?尤其是现在css提供了resize属性。

2023-01-29 13:08:06 902

转载 Element-UI el-upload组件,上传失败,但是依然显示文件列表

最近在使用element-ui的 el-upload组件,发现一个问题,就是我在上传文件过程中,上传失败了,文件列表还展示,非常尴尬。

2023-01-18 16:45:06 3184

转载 前端实现HTML转PDF下载的两种方式

在项目工具方法存放文件夹utils中创建// 导出页面为PDF格式} else {}}}})}}}以上两种实现方式各有优劣,方式一是纯前端实现,需要引入第三方插件,可能会导致项目体积增加。方式二虽然更加简洁,但a标签的download属性为HTML5新增属性,可能存在兼容性问题。如果有需要,可以根据自己情况来选择。

2022-12-16 15:05:20 3117 1

转载 ElementUI的row col布局在span超过24时仍并在一起的解决方案

1、首先要注意,row 的 type 必须是 flex。

2022-12-14 11:07:14 1161 1

转载 Vue Element UI 表格中的Input输入无法展示(真解,不骗人)

要给input赋值初始值

2022-11-18 15:05:51 4659

翻译 使用require.context实现前端工程自动化

使用require.context实现前端工程自动化 - 简书

2022-02-21 17:17:58 106

转载 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 257

转载 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 2008

转载 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 11268 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 4435

转载 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 1471

原创 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 1964

转载 svg icon 引入

手摸手,带你优雅的使用 icon - 掘金

2021-12-20 13:40:18 180

转载 el-input 标签只能输入纯数字

el-input 标签只能输入纯数字 - 简书

2021-12-09 16:27:48 458

转载 Token和Session 原理及优缺点

转自:Token和Session 原理及优缺点 - 简书Session和Token的区别一、cookiehttp请求时无状态的。就是说第一次和服务器连接并登陆成功后,第二次请求服务器仍然不知道当前请求的用户。cookie出现就是解决了这个问题,第一次登陆后服务器返回一些数据(cookie)给浏览器,然后浏览器保存在本地,当用户第二次返回请求的时候,就会把上次请求存储的cookie数据自动携带给服务器。如果关闭浏览器cookie失效(cookie就是保存在内存中)如果关闭浏览器cook

2021-11-22 22:36:41 4576

原创 vue 常见的事件修饰符及其作用

常见的事件修饰符及其作用.stop:等同于 JavaScript 中的 event.stopPropagation() ,防止事件冒泡; .prevent:等同于 JavaScript 中的 event.preventDefault() ,防止执行预设的行为(如果事件可取消,则取消该事件,而不停止事件的进一步传播); .capture:当元素发生冒泡时,先触发带有该修饰符的元素。若有多个该修饰符,则由外而内触发。如 div1中嵌套div2中嵌套div3.capture中嵌套div4,那么执行顺序..

2021-09-13 13:03:23 1024

转载 浏览器缓存原理

1、components放置全局组件的文件夹2、

2021-09-13 10:16:53 329 2

转载 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 11241 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 4032

转载 将数组格式的字符串转换成数组

转自: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 14515 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 2337

转载 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 6801 2

原创 el-tab 切换卡顿

切换的时候卡顿 使用v-if 给里面对应的子组件使其直接从DOM中去除其实这两个tab都是同一个子组件 但是就是由于卡顿的原因 所以每个我tab都写了一遍

2021-07-12 11:16:08 1977

空空如也

空空如也

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

TA关注的人

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