flipped_lv-CSDN博客

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

原创 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 3423 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 1881

转载弹窗组件

<template> <div class="dialog">  <div class="dialog-cover back" v-if="isShow" @click="closeMyself"></div>  <tr

2020-09-24 18:30:03 423

原创在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 3964 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 1383

原创如何用element的expand展开行，只在展开的时候调展开区域数据的接口

需求：很简单，返回表格数据的时候没有展开行区域的数据，只在展开的时候再单独调接口，这样后台处理数据更快一点。但是真正写起来坑还不少。坑一：本来是在data（）里新注册了一个对象存接口调来的数据，结果如果同时打开几行，那后调的数据就会覆盖前者的数据，会导致所有行的展开行数据都一样。（因为本质上它们绑的是同一个对象）解决方法：把数据分别绑定给每一行，并且由于之前没有detail对象，需要用$set方法给row添加新属性 handleExpand(row) { getDetail(r

2020-09-11 19:52:11 2322 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 19582 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 5874 4

原创 iconfont引入项目方法

字体图标在开发中有很多好处，可以改大小和颜色，还不会变模糊1.到我的项目里把图标下载到本地（本地和在线方式各有千秋：本地不需依赖网络环境；在线可以实时更新库的内容）2.在项目中创建一个assets文件夹放下载下来的文件，现师父的习惯是分成js，css，fonts三个文件夹。（注意：如果像我师父一样分成了文件夹，要去iconfont.css改相对路径否则找不到）3.具体使用方法参考文件里的html就行...

2020-09-09 17:56:42 1397

转载 Vue使用watch监听一个对象中的属性

问题描述Vue提供了一个watch方法可以让使用者去监听某些data内的数据变动，触发相应的方法，比如 queryData: { name: '', creator: '', selectedStatus: '', time: [], },现在我需要监听这个queryData，我可以这样做：watch: { queryData: { handler: function() { //do somethin

2020-09-05 17:24:12 1109

原创 vue 取消input回车浏览器自动换行事件

需求：回车自动变成标签放在下面。最终效果：碰到的问题：按回车之后文本总是会先有换行符再进方法，导致非空校验无效，因此取消了浏览器回车自动换行行为，问题解决。template： <el-input placeholder="请输入关键词后回车确认" type="textarea" maxlength="10" v-model="keyword"

2020-09-05 11:22:03 3469

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

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

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

原创怎么通过字典，将后端返回的数据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 2255

原创路由传参不能直接传对象，需要转换成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 1520 1

ciichen的博客