- 博客(19)
- 资源 (3)
- 问答 (1)
- 收藏
- 关注
RSS订阅原创 ant-design-vue基础知识积累——a-input-number限制只能输入正整数
今天遇到一个需求，就是要输入利润率,这个要求：输入的内容是介于1-100之间的正整数。先上效果图：代码如下： <a-input-numberplaceholder="利润点" style="width:230px;" :formatter="(value) => `${value}%`" :precision="0" :parser="(value) =>
2021-11-23 15:08:19
19166
5
原创 js 实现查找两个数组中的不同项——基础积累
今天遇到一个需求，就是select的多选下拉，根据选中的值再进行相应的处理。比如当前选中了['山东',‘浙江’,‘深圳’]三项内容，现在去掉中间的深圳,我需要拿到去掉的是哪一项。我想的方式就是：watch: { proTypeArr: function(newVal, oldVal) { if (newVal.length > oldVal.length) { //新增了一项 this.proTypeForm.push({ proType: ne
2021-11-23 15:00:38
4096
原创 基于vue的富文本编辑器（一）——vue-quill-editor的使用
最近在看ant-design框架，发现里面用到了vue-quill-editor，是一个富文本编辑器。基于 Quill,适用于Vue的富文本编辑器,支持服务端渲染和单页应用.不过有一定的兼容性,就是兼容IE10+下面记录一下使用方法：1.安装——npmnpm install vue-quill-editor -S2.挂载到项目中全局挂载——在main.js文件中添加以下内容// main.jsimport Vue from 'vue'import VueQuillEditor fro
2021-11-19 11:37:33
3229
原创 后端提供的excel文档流如何下载？——前端基础知识
今天后端同事要求添加一个excel文件的下载功能：目前后端提供的文件导出，一共有两种形式：1.提供文件的相对路径前端需要自行拼接，然后通过window.open()将文件下载到本地代码如下：exportRecord(){ this.exportLoading = true;//按钮的防抖 $.ajax({ //url是请求接口的路径，后面的url是基本地址，也就是端口号及之前的部分，后面拼接的是接口请求的参数 url: url + "/Wms/Wms_PackageSignin
2021-11-17 14:45:16
1735
3
原创 el-select组件远程搜索时，单选状态下无法触发remote-method远程搜索功能——基础积累
今天在做后台管理系统时，需要用到select组件的远程搜索功能：element-ui官网上是有相应的远程搜索的功能的：具体思路就是：select组件支持输入功能，在输入关键字后，触发remote-method方法，然后根据关键字调取接口，获取数据，然后再展示到下拉框中。官网上给出的是多选的select组件，经过单选和多选组件的对比，发现，多选的组件完全没有问题。针对上面的三点，多选时，都可以满足，都可以触发remote-method远程搜索功能。但是在单选时，就出现了问题：上图中拿到关键字的
2021-11-16 14:38:15
10927
原创 移动端rem自适应的处理方式+VScode的自动转化设置——技能提升
在我做移动端的项目时，经常用的是uniapp，这个框架可以通过设置尺寸单位为rpx，让尺寸实现不同屏幕自适应的效果。但是如果不使用uniapp，也想要达到尺寸自适应的效果，可以使用淘宝的flexiable.js处理。参考大神的操作链接：移动端rem单位设置方式：https://segmentfault.com/a/11900000225094891.使用方式——cdn引入// 引用地址<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.2
2021-11-12 10:08:58
1527
原创 rem设置尺寸自适应——rem.js函数封装
在编程过程中，因为设计图会按照统一的标准来设计，比如：PC端的设计图标准是:1920X1080,移动端的设计图标准是:750X1334,但是实际使用的时候，屏幕的尺寸并非完全一致，比如PC端的屏幕尺寸有：1920X1080,1360X768，当然还有更高分辨率的规格：2560X1600为2.5K屏，还有4K屏等。而且屏幕的宽高比是不一样的，有的是16:9,有的是16:10等。因此为了保证设计内容的自适应，需要根据屏幕的大小，内容自适应处理。下面的rem.js文件就可以保证页面单位可以用rem来代替px
2021-11-12 09:39:36
5496
11
原创 elementui-plus 中的upload组件中关于URL.createObjectURL的问题
最近在看elementUI-plus官方文档，在看到upload组件时，发现图片上传成功后，有个函数处理如下：百度后发现这个方法：URL.createObjectURL在新版的浏览器中已经不再支持了。因此可以通过try catch的方式来处理，或者直接不用。try { this.srcObject = stream;} catch (error) { this.src = window.URL.createObjectURL(stream)}...
2021-11-11 11:02:05
3037
原创 elementUI——el-table组件滚动条的宽度设置——css基础
今天在看后台管理系统时，领导发现表格中的横向和纵向的滚动条宽度不一致，导致页面看上去很不协调：如下：根据上图效果：会发现：横向滚动条的高度与纵向滚动条的宽度不一致：修改页面滚动条的宽高可以通过如下的css样式来处理：::-webkit-scrollbar { width: 7px; height: 7px; background-color: transparent;}只要将上面css中的width和height设置成一个数值，就可以保证横向滚动条的高度与纵向滚动条的
2021-11-10 17:07:10
11450
2
原创 vue+layer.open——实现对象参数的传递——技能提升
由于我现在公司的项目很多都是mvc模式的，因此无法使用组件，vue的组件只能是在vue-cli脚手架搭建的项目中。因此在开发过程中，为了避免页面代码过多，同时为了代码的复用性，还是需要用layui框架来实现组件的结构。layer.open实现弹窗组件layer.open({ type: 2, title: '日志列表', closeBtn: 1, shadeClose: true, content: '/WarehouseArea/Warehouse/LogIn
2021-11-10 09:28:35
4458
2
原创 VUE后台管理系统正式环境去除console.log debugger的编译——技能提升
作为一个前端，后台管理系统是必不可少的需要掌握的内容，在编写代码的过程中，console.log()经常会用到要控制台打印内容，用于测试等，但是在发布到线上环境时，我们并不希望控制台有各种输出，此时可以一行行的注释掉console.log()代码，也可以通过.eslintrc.js进行统一处理：1.创建.eslintrc.js文件文件目录结构如下：2..eslintrc.js文件内容如下：module.exports = { root: true, env: { node: tru
2021-11-09 13:52:33
580
原创 element-plus的使用——基础积累
工作中在做后台管理系统时，经常用到的是vue2.x适用的element-ui框架，最近看到同事用支持vue3.x的element-plus，感觉同事真的是与时俱进，今天就来看看element-plus框架如何使用。1.安装element-plus框架npm install element-plus2.main.js中全局引入element-plus引入element-plus分为全局引入和局部引入，但是为了简单，一般都是全局引入，这样也有弊端，比如下载的组件太多，导致打包速度缓慢等。但是引入只需要一
2021-11-09 12:02:01
10924
原创 vue-video-player——vue播放器插件的使用——基础积累
在做后台管理系统时，很少会用到播放器，无论是音频还是视频，但是还是有遇到的可能性的。下面介绍一下vue-video-player视频播放器插件的使用：1.vue-video-player视频播放器插件安装安装：npm install vue-video-player --save2.main.js中引入插件并全局注册import VideoPlayer from 'vue-video-player'require('vue-video-player/node_modules/video.js/d
2021-11-09 11:07:49
4879
原创 js——replaceAll() 方法控制台报错——js基础
前一段时间在做电商前台页面时，用到了正则匹配，将字符串中的部分内容替换成指定内容，可以使用replace来进行替换处理。在使用的过程中，发现replace只能替换前一个，如果该字符串中有多项相同的内容，则无法实现全部替换。如果要替换字符串中所有的相同内容，则可以使用replaceAllreplaceAll全部替换的方法使用但是在浏览器控制台测试时，发现控制台报错。查找各种资料后，发现控制台报错的原因是：我是用的谷歌浏览器，发现谷歌浏览器要是想使用replaceAll方法的话，需要保证浏览器
2021-11-08 09:48:04
3960
1
原创 elementUI中的el-table 实现自动滚动到指定行，同时修改高亮颜色功能——技能提升
昨天在做后台管理系统时，遇到一个需求，就是有一个el-table的表格，当扫描指定条码时，可以根据条码的值比对表格的数据，如果能够找到对应的数据，就将页面滚动到此行的位置，实现自动定位功能。如下效果：1.加扫描框——input组件<el-input v-model="scanData" ref="scanDataRef" style="width:200px;margin-left:10px" placeholder="请扫描条码数据" size="mini" @keyup.enter.na
2021-11-05 14:43:52
17272
16
原创 js 正则只能输入大于0的数字——正则表达式基础
今天在做后台管理系统时，遇到一个需求，就是在点击发货按钮时，需要输入发货的数量，为了简单我用了elementUi中的messageBox弹窗功能，里面有个可以输入内容的弹窗。效果图如下：elementUi中的组件如下：这个组件是可以进行正则匹配输入的内容是否符合规则的：对于发货而言，数量必须是一个大于0的才可以。因此现在的问题在于如何用正则匹配大于0的数字。正则匹配大于0的数字——/^[1-9]*[1-9][0-9]*$/上面弹窗的代码如下：this.$prompt('请输入包裹数量',
2021-11-05 12:02:27
17057
原创 html实现调取手机相机进行拍照上传——技能提升
今天同事问我一个我之前参与的项目，由于之前只做了样式，并没有书写功能，因此同事接手后需要做一个html实现手机拍照上传的功能：由于项目是一个后台管理系统，使用的是vue+ant-design的框架，因此上传图片就是用的:由于现在的需求，是希望后台管理系统可以使用平板进行拍照上传图片，因此我首先想到的是通过html5实现手机拍照上传功能：这个也是可以实现的：下面是一个CSDN博主提供的方法：博文地址：前端调用手机拍照功能：https://blog.csdn.net/fengye12zjs/ar
2021-11-04 12:49:02
3154
5
原创 cdn引入elementUi，如何使用message的提示信息——技能提升
最近在做后台管理系统时，用到的是MVC的模式，因此vue和elementUi都是使用的cdn引入的方式来处理的，并配合着jq来进行数据处理的。在工作中，由于我没有进行组件和函数的封装，导致了大量的重复代码，在遇到统一的问题时，改动量巨大而且极易出现纰漏。因此封装函数和组件，是非常有必要的，也是一个前端程序员提升自我的一种表现。学会封装函数和组件是一个程序员提升的必经之路由于我在通过ajax调取接口时，都是用的$.ajax({})的方式来处理的，因此当后端同事要求我在请求时把页面中的cookie也传递过
2021-11-04 11:44:52
2559
vue+ant-design+formBuiler表单构建器-技能提升-form design-亲测有效
2024-05-08
qull.min.js,image-resize.min.js，uniappH5端editor富文本报错问题
2023-12-22
uview 商城中的 使用uniapp开发的一整套电商app的源码
2023-03-03
vue3+vite+antd 后台管理系统基础模板
2023-02-06
xlsx实现vue导入excel文件，并获取excel内容
2023-02-03
sheetJs+xlsx-style——前端实现导出excel表格——设置单元格背景色，居中，自动换行，宽度，百分数展示等
2022-03-22
xlsx.js引入不生效，能把您那边生效的js发我一份吗？
2022-03-18
TA创建的收藏夹 TA关注的收藏夹
TA关注的人