- 博客(27)
- 问答 (1)
- 收藏
- 关注
RSS订阅原创 el-form循环生成el-form-item校验失败原因
划重点：:prop="‘specificationsCopy.’+scope.$index+’.name’":rules=“rules.name”如果:rules=“rules.name” 换成required就会报错xxx is required<el-form-item label="商品规格:" required> <div class="table"> <el-table :data="ruleForm.sp
2022-01-13 17:25:39
1930
原创 封装导出excel的js
util.js 封装导出方法/** export Excel */let apiUrl = process.env.VUE_APP_BASE_API;const exportMethod = data => { axios({ method: data.method, url: apiUrl + data.url, params: data.params, responseType: "blob" }).then(res => { let t
2022-01-13 14:34:29
435
原创 h5 input光标在点击另一个表单元素没触发失焦事件？？input属性不要乱用呀~
input如果不想输入框有光标，只想作展示用，可以改成readonly=“readonly”在移动端，input如果设置为disabled，就无法正常触发点击事件，导致上一个input的失去焦点事件不生效//input<input type="text" placeholder="手机号" v-model="address.phone">//不能设置为disable如果要点击<div v-hammer:tap="() => onSelectAddress()">
2021-09-30 11:00:53
711
1
原创 饿了么el-date-picker禁用当前时分秒之前的日期时间选择
使用参数picker-optionsdisabledDate ：控制只能选择今天及以后的日期selectableRange ：控制选择的时间段。如果是今天，则时间从此刻开始，否则从0时开始参考原文链接：https://blog.csdn.net/qq_26642611/article/details/103761975实现效果建议使用参数time-arrow-control，用箭头进行选择（用鼠标滚轮操作稳定性很差）html<el-date-picker v-model="ruleFo
2021-07-21 15:06:18
3751
3
原创 el-select获取多个参数/el-select传多个参数
element select选择器~~el-select的change事件默认不传参数时可获取到值是选中的值。@change="handleSelectGroup"当涉及到循环动态生成多个select组件并且想要获取到当前所选的组件是哪个的时候，就需要从select的change事件获取到多个参数，一般需要传上当前选中的值与当前索引。方法一：$event 即是当前所选的值@change="handleSelectGroup($event, i)"方法二：val 即是当前所选的值@cha
2021-05-11 09:59:02
6962
2
原创 vue,react,angular,jquery的区别
近两年前端各框架流行程度与趋势分析上图显示了2016年10月至2017年10月的12个月期间，各个框架的绝对受欢迎程度及其增长情况。可以看出：① Vue 的成长速度非常快。② Angular的受欢迎程度基本保持不变。③ jQuery仍然非常受欢迎，但用户使用量越来越少。④ React 既庞大又在快速增长。Vue.js框架特点：MVVM框架、数据驱动、组件化、轻量、简洁、高效、快速、模块友好等。资源上：在以上所有框架中，Vue.js虽然是其中最为年轻的框架，但它已经拥有不少成熟的U
2021-03-19 15:16:36
1666
原创 v} expectedcss(css-rcurlyexpected) vscode 报错，编写css时无法实现嵌套写法
这是一个使用sass来编写样式的vue项目。之前编写样式是正常的，今天突然就不行了，我还以为是漏了标点符号或者用了正式标点符号，检查了发现并不是，然后直接百度了以下这个报错} expectedcss(css-rcurlyexpected)，就找到了答案：底部控制栏的语言模式要修改成vue。点击HTML，vscode就会弹窗让你选择语言模式，往下拉到最后，选中vue即可。昨天我下载了最新的vscode，所以导致了这个语言模式默认为html了，需要手动改回来。正常啦~~~...
2021-03-18 11:56:09
7798
7
原创 vscode自动补全标签失效的解决方法
一直习惯用vscode自动补全便捷方法写代码，突然家里的电脑无法自动补全了，格式化代码也变得不正常。为此大大降低了开发效率，幸好现在已经找到了方法打开设置ctrl+f 输入quick，就可以快速找到文本编辑器下面的相关选项，把勾选去掉，改成和下面这个一样点开setting.json编辑，添加以下代码 // vscode不自动补全 "editor.suggest.snippetsPreventQuickSuggestions": false, "editor.quickSu
2021-03-18 00:00:10
14861
3
原创 VUE导出EXCEL文件的js方法
需要携带参数获取数据再导出Excel写法一： // 导出 handleExport (belongTime) { window.location.href = `${AddressUrl}/itemDetail?belongTime=${itemId}` },process.env.VUE_APP_BASE_API=AddressUrl，为基准路径。写法二： // 导出模板 hanldeExport () { //api完整地址 co
2021-03-17 18:44:20
244
原创 element UI防止多个message弹窗，el-message提示只显示最后一个
单独一个文件重写messageimport { Message } from 'element-ui'let messageInstance = nullconst resetMessage = (options) => { if (messageInstance) { messageInstance.close() } messageInstance = Message(options)};['error', 'success', 'info', 'warning'].
2021-03-17 13:50:18
1516
原创 创建一个js版本的react项目，基于ant-design-pro
ant-design-pro地址：https://pro.ant.design/docs/getting-started-cn新建一个空的文件夹作为项目目录，并在目录下执行yarn create umi 或者 npm create umi2.选择第一个ant-design-pro - Create project with an layout-only ant-design-pro boilerplate, use together with umi block.3.选择版本： pro4
2020-09-30 11:27:44
1312
原创 vue打开新的标签页跳转到另一个网站页面-href跳转
// window.location.href = `http://localhost:8081/#/userList?token=${token}` window.open(`http://ht.wanda.mcmore.cn/#/userList?token=${token}`, '_blank')// 测试站 // window.open(`http://wuyou.bototyre.com:8443/#/userList?token=${token}`, '_blank')//正式站..
2020-09-30 10:42:49
6198
原创 el-form 自定义校验规则失效之坑 elementUI
自定义校验如果你发现校验没有触发，也进不了校验，有if判断都要加上else把callback返回，不然如果没进入if判断，就没法把callback返回了，同是也无法继续提交了。 this.$refs.returnForm.validate((valid) => { 这里都进不来 if (valid) { }错误示范 var validUseBalance = (rule, value, callback)
2020-09-30 10:31:03
3946
1
原创 js实现超出字数，截取并且以点点...代替
// 过滤器 filters: { // 内容超过30个字后以...显示 ellipsis(value) { if (!value) return ""; if (value.length > 30) { //先去掉text里面带来的 然后再去空格 return ( value .replace(/ /g, "") ..
2020-09-30 10:27:28
983
原创 直接用toFixed保留两位小数遇上的坑以及解决方法
参考链接：https://www.cnblogs.com/liyan-web/p/7788459.html由此可见真正的问题源于二进制浮点数表示法并不能精准表示十进制分数！function toFixed(number,fractionDigits){ var times = Math.pow(10, fractionDigits); var roundNum = Math.round(number * times) / times; return roundNum.toFi
2020-09-18 14:08:10
3342
原创 js中数字校验的坑
两个单纯的字符串之间的比较会变成ASCII码比较，依次取每个字符串，然后ASCII比较，比较出来的结果往往不是我们想要的，例如字符串 8 是大于138的var A =String(8)var B=String(138)var C=A>B //结果为true所以每次比较，都需要Number一下，把字符串转成数值再比较注意保留两位小数方法toFixed(2),需要再Number一下转为数值才能进行比较很多场景是需要保留两位数的，或者说接口返回的是多位数的，我们会截取两位数进行比较，结果发
2020-09-08 15:47:29
260
原创 el-select绑定值为一个对象element UI
重点：el-select绑定item的唯一值，一般是个id， value-key=“id”2.el-option的value绑定item, :value=“item”3.在el-select的change事件获取对象的值并且赋值到对应的键。4.nameSpare为备用关联字段，不影响。 <el-select value-key="nameId" style="width:200px;margin-bottom:10px;"
2020-08-21 15:11:59
2228
原创 浏览器关闭网站移除本地存储localStorage，用vue的destroyed或者beforeDestroy函数无效
关闭浏览器或者关闭网页窗口的时候，需要移除token在 App.vue挂载的时候，加上这个方法，浏览器关闭动作的事件 mounted () { window.addEventListener('beforeunload', () => { localStorage.removeItem('token') localStorage.removeItem('user') }); },...............vue的生命钩子函数destroyed
2020-07-30 16:55:55
3558
2
原创 vscode插件之expand region 快速选中代码块、快速实现区域选中
插件主要功能：可以选中一个标签内所有的文件，也就是区域选中。其中提供了以下两个非常方便的选中操作快捷键快速选中html中的双引号之间的代码快速选中{}[]之间的代码使用步骤：1. 安装插件 expand-region2.修改默认快捷键默认快捷键是ctrl+w,为了避免冲突与方便操作，可自行修改快捷键，我改成了ctrl+q使用步骤：js部分：1.把光标放在要{}【】的开头2.按下 ctrl+q 即可选中括号里的代码html部分：快速选中双引号中的内容如下图：1.把光
2020-05-30 22:02:10
9975
1
原创 vscode快捷键以及console控制台的使用快捷键
Ctrl + P ：转到文件，您可以在 Visual Studio Code 中移动到打开的文件/文件夹的任何文件。Ctrl + ` ：在 VS Code 中打开 terminalAlt + Down：下移一行Alt + Up：上移一行Shift + Alt + Down：向下复制行Shift + Alt + Up：向上复制行Ctrl + Shift + T：重新打开最新关闭的窗口...
2020-04-30 13:56:39
2589
原创 js比较两个日期的大小
最稳妥的方法：根据时间对象的时间戳进行比较，我发现我没转换成时间对象的时间戳也可以，这是为啥子？我觉得是因为字符串的比较是按单个单个字符串来比较的，从左边开始，到右边，遇到可以判断大小的就停止，并不是根据长度来判断字符串的大小的。先看看时间戳转换Date.parse(“日期时间”) /** 校验结束时间不能早于开始时间 */ const checkEndTime = (ru...
2020-04-29 14:36:44
3051
原创 数字比较大小避坑--要注意是字符串还是数值
js比较两个数字的大小不能直接比，需要转成数值后再比较，不然比的就是字符串了，失去了比较数值大小的意义。如果不加Number转换，“50”是大于“1000”的，不信你也试试。如果是有小数点的，一定要用Number,如果是整数的就用parseInt进行数值转换 /** 校验a应大于b,数值可带两位小数点 */ const checkA = (rule, value, callba...
2020-04-29 13:53:31
835
原创 根据后端返回的url实现下载功能
需求描述： 根据后端返回的url实现下载功能/** download All*/const downMethod = data => { axios({ method: data.method, url: apiUrl + data.url, params: data.params, responseType: "blob" }).then(res...
2020-01-20 17:44:09
3009
2
原创 实现同步未读消息条数
需求描述： 模块内的未读信息被读后，头部的未读信息条数要跟着变动。//home <div @click="handleMessage"> <el-badge v-if="messageData.length != 0" :value="messageData.length" :ma...
2020-01-20 17:03:11
1672
1
原创 el-upload回显细节--没有图片数据返回的时候每点击一次添加多了一个空白图片
如果没有图片，就会自动赋值一个空的值给这个数组，就会出现一个空白的照片，每点击一次就添加一次```css imgInit() { this.fileUpList.push({ url: this.rowData.refundPic //上传退款截图 }); if (this.rowData.refundPic) { /...
2020-01-16 11:37:07
1040
原创 el-upload删除时导致页面样式错乱！！
<el-row class="head_image"> <el-col :span="2" class="head_image_wrap"> <el-upload class="upload" :class="{ hide: hideBusiness }" ...
2020-01-06 01:15:55
776
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人