![](https://img-blog.csdnimg.cn/20201014180756918.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
谈谈的心情
有梦想,去追逐.......
展开
-
vue详情页面卡片样式封装
在前端项目中,详情页面是必不可少的,详情页面通过卡片样式进行分片展示的需求也很多,这里记录下来方便以后直接套用。原创 2023-02-09 18:32:19 · 2439 阅读 · 1 评论 -
Vue鼠标移入(悬停)显示-移出隐藏
需求:详情页面显示多张图片,当鼠标悬停在某张图片上时,图片上显示下载按钮;鼠标移出后,下载按钮隐藏。原创 2023-02-01 10:48:55 · 6059 阅读 · 1 评论 -
Vue项目文件导入、导出
Vue项目中文件导入和导出使用比较频繁,这里把最常用的布局和实现代码记录下来,避免以后频繁造轮子。原创 2022-08-30 14:56:56 · 8015 阅读 · 0 评论 -
vant实现Select效果--单选和多选
vue项目无论是用element中的Select选择器,还是使用公司维护的组件,都可以轻松实现单选和多选的需求,但在移动端使用vant时,找了几遍发现居然没有提供Select组件,这里提供了基于popup和cell、field封装的select单选、多选组件。...原创 2022-07-29 17:11:51 · 12437 阅读 · 3 评论 -
Vue自定义Tag标签
1、需求:项目中有好几处用到标签组,有单行、多行、单行显示不下省略(鼠标放上去提示)等等需求,为了方便使用提取为组件。单行样式如下:2、在项目的components文件下新建文件夹原创 2022-06-01 14:02:10 · 4134 阅读 · 0 评论 -
el-upload限制文件大小(图片尺寸)
1. 在el-upload控件中加入on-change方法:<el-upload id="file" ref="upload" slot="append" :action="file.action" :with-credentials="true" name="file" :data="file.data" :show-file-list="false" accept=".xls,.xlsx,.csv" :disabled="isDisabled" :au原创 2022-04-25 14:48:10 · 12747 阅读 · 1 评论 -
vue移动端van-uploader上传图片压缩工具类
1、最近移动端项目中使用van-uploader上传图片,开发测试都正常,上线后苹果用户反馈图片上传不了,最后排查是图片过大导致调用上传接口后一直没有返回。2、utils文件夹下新建imgCompressUtil.js文件:3、工具类中的具体代码:const imgCompressUtil = { compressImg (file) { let self = this if (!file || !window.FileReader) return // 判断是否支持F原创 2022-04-22 17:31:46 · 1957 阅读 · 1 评论 -
vue日期时间工具类
最近做的一个项目对日期时间的处理比较多,最后整理到一个工具类里面,方便以后使用:1.在utils文件夹下新建一个dateTimeUtil.js文件:// 获取当前时间并格式化export function getCurrentTime(){ var date = new Date() var month = date.getMonth() + 1 var day = date.getDate() if (month <= 9) { month = '0' + .原创 2022-04-20 14:59:56 · 4736 阅读 · 0 评论 -
vue项目图标处理工具
1、vue项目中的png、svg图片统一处理工具类,图片正常放在对应的目录下(images中放png图片,ui-icon中放svg图片):2、在style文件夹下新建一个ui-page.less工具类类:// 图标.ui-icon { .common { display: inline-block; width: 24px; height: 24px; background-size: contain; vertical-align: midd..原创 2022-04-06 14:47:42 · 4081 阅读 · 0 评论 -
vue -- watermark添加水印工具类
1、在utils文件夹下新建watermark.js工具类:watermark.js工具类对应代码:const watermark = {}const setWatermark = (str) => { const id = '1.8989898989898989.123412416' if (document.getElementById(id) !== null) { document.body.removeChild(document.getElementBy原创 2022-03-04 14:25:57 · 1221 阅读 · 1 评论 -
vue table动态表头数据处理
table动态表头数据处理经常用到,记录下来方便以后查阅1、data中定义表头和表格数据:tableData: [], //表格数据headerTeamList: [] //表头数据2、接口获取表头数据:getHeaderList () { serviceApi.getHeaderList().then(res => { this.headerTeamList = res.data })}3、获取table表格数据并处理结果:getTe原创 2022-03-02 16:33:07 · 7011 阅读 · 1 评论 -
echarts雷达图点击事件 获取indicator节点详情
需求:点击雷达图上的indicator时获取对应indicator上的信息,而不是获取整个系列的数据1、设置点击事件:chart.on('click', (param) => { console.log(param)})点击回调的param是整个雷达图的数据,我们要从中找到我们想要的数据(对应indicator的数据),通过每次改变点击的indicator,然后再去观察数据,最后发现在event-topTarget中有个__dimIdx字段,对应的刚好说我点击的indicat.原创 2021-11-15 11:18:14 · 5319 阅读 · 3 评论 -
vue的keep-alive组件清除缓存
需求:A页面 -> B页面 -> C页面,当C页面返回到B页面时,保存B页面的数据;但A页面到B页面时,B页面需要重新加载数据。网上的方法试了很多种,下面这个有效果:1、路由router中设置keepAlive:{ name: 'personnelList', path: '/personnelList/', menuCode: '001', component: 'personnelList', meta: { keepAlive: true }原创 2021-11-12 14:31:20 · 6652 阅读 · 2 评论 -
vue实现打标记录
项目需要的效果如下图:实现代码:<template> <div class="step-template"> <div class="step" v-for="item in 12" :key="item"> <div class="step-l"> <p class="time">2021-08-01 12:09:11</p> <p class="name"&g.原创 2021-11-06 10:26:04 · 297 阅读 · 0 评论