- 博客(17)
- 收藏
- 关注
原创 vue-cli4 官网中webpack打包去掉console的方法
module.exports = { chainWebpack: (config) => { config.optimization.minimizer('terser').tap((args) => { args[0].terserOptions.compress.drop_console = true return args }) }附上官网截图:vue-cli4在cli3基础上的webpac
2020-12-18 10:45:47
836
原创 vue如何在input/el-input中限制只能输入数字且最多两位小数或其他,且能被v-model正常监听到?
只能输入数字且最多两位小数 <el-input placeholder="请输入价格" v-model="feedsForm..price" onkeyup="this.value=this.value.match(/\d+\.?\d{0,2}/);this.dispatchEvent(new Event('input'))" >在标签里用原生事
2020-12-15 11:38:22
3384
1
转载 js中数组的forEach方法不能修改数组的值
js数组的forEach方法能不能修改数组的值如果要使用数组的forEach()方法对其改值时,需要直接通过arr[i]这种方式来更改。请看下面代码: // 数组改值 let arr = [1,3,5,7,9]; arr.forEach(function(item){ item = 30; }) console.log(arr); //输出 (5) [1, 3, 5, 7, 9]
2020-11-26 17:12:35
1852
转载 弹窗组件
<template> <div class="dialog"> <!--外层的遮罩 点击事件用来关闭弹窗,isShow控制弹窗显示 隐藏的props--> <div class="dialog-cover back" v-if="isShow" @click="closeMyself"></div> <!-- transition 这里可以加一些简单的动画效果 --> <tr
2020-09-24 18:30:03
408
原创 在vue&element里怎么给列表每一列写倒计时(给每一列绑定计时器)
需求:列表每一列都有独立的倒计时,后台list将会返回剩余时间的时间戳,前端做倒计时主要思路:给每列数据绑定一个独立的定时器,再每一秒把时间戳字段的值-1000js://获取列表onload(page, query) { getMemberList(params).then(res => { this.page.total = res.data.data.total; this.tableData = res.data.data.records;
2020-09-19 17:14:04
3849
2
原创 通过axios调接口实现导出文件的方法,并且可以随意命名
需求:如题,按一个按钮导出文件。遇到的坑:1:window.open()打开链接请求接口下载下来,但是需要把请求头写在header上,我百度好久也没看到相关的技术。解决方法:用new Blob接收后端的文件流,再开个隐藏的链接自动下载一:封装一个统一处理导出文件的处理方法,download属性可以随便改文件名//封的方法export function download(data, name = "excel表", defaultType = ".xlsx") { if (!data) {
2020-09-12 13:57:11
1310
原创 如何用element的expand展开行,只在展开的时候调展开区域数据的接口
需求:很简单,返回表格数据的时候没有展开行区域的数据,只在展开的时候再单独调接口,这样后台处理数据更快一点。但是真正写起来坑还不少。坑一:本来是在data()里新注册了一个对象存接口调来的数据,结果如果同时打开几行,那后调的数据就会覆盖前者的数据,会导致所有行的展开行数据都一样。(因为本质上它们绑的是同一个对象)解决方法:把数据分别绑定给每一行,并且由于之前没有detail对象,需要用$set方法给row添加新属性 handleExpand(row) { getDetail(r
2020-09-11 19:52:11
2191
2
原创 怎样用el-date-picker限制选择的时间范围(如跨度不超过366天)
需求:可选的时间范围不超过366天主要思路:在picker-options对象中,禁用日期通过 disabledDate来设置。但是要先拿到第一次选的时间。onPick 是选中日期后会执行的回调,通过这个获取第一次选中的时间 <el-date-picker :picker-options="pickerOptions" v-model="daterange" type="daterange" for
2020-09-11 14:32:50
18637
9
原创 如何在el-tabs(标签页)中随activeName只调该页面初始化接口,而不是一进页面就调所有标签页的接口
需求:把不同的页面封成组件,再放在el-tabs里面用标签切换。遇到的问题:因为本质上这些页面组件都同一个页面,所以会同时执行created钩子,造成性能浪费。我想点哪个组件,就执行此页面的初始化方法。(之前碰到七个标签页的crud页面,一起调会卡顿)。解决:用this.$refs[this.activeName].init()调用组件内的初始化方法,而不是放到created。注意:用 this. $ nextTick(() => { this.$refs[this.activeName].i
2020-09-10 19:46:21
5690
4
原创 iconfont引入项目方法
字体图标在开发中有很多好处,可以改大小和颜色,还不会变模糊1.到我的项目里把图标下载到本地(本地和在线方式各有千秋:本地不需依赖网络环境;在线可以实时更新库的内容)2.在项目中创建一个assets文件夹放下载下来的文件,现师父的习惯是分成js,css,fonts三个文件夹。(注意:如果像我师父一样分成了文件夹,要去iconfont.css改相对路径否则找不到)3.具体使用方法参考文件里的html就行...
2020-09-09 17:56:42
1377
转载 Vue使用watch监听一个对象中的属性
问题描述Vue提供了一个watch方法可以让使用者去监听某些data内的数据变动,触发相应的方法,比如 queryData: { name: '', creator: '', selectedStatus: '', time: [], },现在我需要监听这个queryData,我可以这样做:watch: { queryData: { handler: function() { //do somethin
2020-09-05 17:24:12
1092
原创 vue 取消input回车浏览器自动换行事件
需求:回车自动变成标签放在下面。最终效果:碰到的问题:按回车之后文本总是会先有换行符再进方法,导致非空校验无效,因此取消了浏览器回车自动换行行为,问题解决。template: <el-input placeholder="请输入关键词后回车确认" type="textarea" maxlength="10" v-model="keyword"
2020-09-05 11:22:03
3381
原创 vue.draggable使用
附上文档链接:vue.draggable中文文档(很详细!还有例子!百度了好久,靠这文档救我狗命)主要解决两个需求:1.点拖动的图标才能拖动元素:handle=".mover"2.动画效果:animation=“150” <draggable v-model="tagTitle" animation="150" handle=".mover"> <div class="folder" v-for="(item,index) in tagTitle" :key=
2020-09-03 12:02:21
620
原创 el-input获取焦点时样式改变 :focus伪类
重命名文件夹时的效果,当获取焦点时,input框的背景颜色改变本来想用@focus事件用js写然后绑定样式的,不仅麻烦而且样式没改变。。。百度一下才知道有这么好用的伪类!//(scss语言).el-input__inner { padding-right: 60px; background: rgba(245, 245, 245, 1); &:focus{ background: #fff; } }最终效果...
2020-09-03 11:43:02
4635
转载 CSS垂直居中的8种方法
1、通过verticle-align:middle实现CSS垂直居中。通过vertical-align:middle实现CSS垂直居中是最常使用的方法,但是有一点需要格外注意,vertical生效的前提是元素的display:inline-block。2、通过display:flex实现CSS垂直居中。随着越来越多浏览器兼容CSS中的flexbox特性,所以现在通过“display:flex”实现CSS水平居中的方案也越来越受青睐。通过display:flex实现CSS垂直居中的方法是给父元素di
2020-09-02 11:00:49
5114
原创 怎么通过字典,将后端返回的数据value渲染成对应的label?
怎么通过字典,将后端返回的数据value渲染成对应的label?一个项目会用的很多,所以我直接用全局过滤器,代码可以直接复制用哦1.首先直接po函数出来,这类数据处理的函数可放在一个专门的文件夹里//根据字典的value显示label//第一个参数是传进的label值,第二个参数是所需的字典export const findByvalue = (value, dic) => { let result = ''; if (validatenull(dic)) return
2020-09-01 10:39:32
2205
原创 路由传参不能直接传对象,需要转换成json格式传
用 JSON.stringify() 转成json格式,传过去之后用 JSON.parse() 还原成对象即可需要传参的页面代码://传参的函数 goInfo(item) { let obj = JSON.stringify({ id: item.id, fileUrl: item.fileUrl, fileName: item.fileName }); this.$router.push({ path
2020-09-01 10:11:23
1487
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人