vue
Vue.js是一套构建用户界面的渐进式框架。
Vue 只关注视图层, 采用自底向上增量开发的设计。
Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
湘水狱
这里是记录小编学习和工作中遇到的问题及解决后的答案,希望对你有所帮助,错误的地方,请多多指教
展开
-
【记录43】el-table @selection-change 数据回显、条件约束、历史回显清除
表格中选中的人员,点击取消后,再次进来人员还在,部分可能觉得正常,实际是不对(切换了数据绑定对象,还存在是不对的)。这里笔者做了一个点击取消就默认为当前选择的取消(不要了)限制选中人员上限,大家可能会想到直接判断选中的list,实际操作中存在一个问题:你选择了,给了提示,表格显示上还是会选中。在其他地方设置好人员,到对应的页面直接在表格中复选设置好的人员。到这里基本完成了回显功能。原创 2024-05-31 11:32:51 · 703 阅读 · 0 评论 -
【记录37】VueBaiduMap 踩坑一
一眼就看出,不对,值在父组件初始化过程中就已赋值,but实际中还是报错,猜测:页面在生命周期加载中哪可能出错,结果排查发现是vuebaidumap(子组件)的加载比父组件(引入vuebaidumap页面)还早,问题就出现在这里。虽然不影响使用,但看见控制报。回调观察程序“content”时出错:“TypeError:无法读取未定义的属性(读取’setContent’)”vuebaidumap的初始化加载在mounted生命周期前,created生命周期后。原创 2024-03-08 14:19:20 · 549 阅读 · 0 评论 -
【案例+解说】highcharts 3D环形图动态循环
serse加innerSize,只需加这一项就可以将3D饼图直接变成3D环形图。原创 2024-02-01 16:39:56 · 660 阅读 · 0 评论 -
浏览窗口大小变化,页面刷新
【代码】监听页面大小变化,重新加载页面。原创 2024-01-22 15:26:55 · 461 阅读 · 0 评论 -
【案例】简单的账号短信登录
/ true 账号登录 false 短信登录。//图片所在路径,并加载。原创 2023-12-25 16:28:09 · 1221 阅读 · 0 评论 -
【案例】pdf预览
【代码】【案例】pdf预览。原创 2023-12-21 17:22:16 · 480 阅读 · 0 评论 -
【案例】图片预览
如何让图片放大,大多数的UI组件都带有这种功能,今天给大家介绍的这个插件除了放大之外,还可以旋转、移动、翻转、旋转、二次放大(全屏)main.js 中引入。原创 2023-12-21 17:12:17 · 911 阅读 · 0 评论 -
vue 页面加水印
首先创建一个waterMark.js文件,当然文件命名可自定义,在需要的加水印的页面导入watermark.js文件。原创 2023-09-07 11:30:55 · 860 阅读 · 0 评论 -
Duplicate keys detected: ‘1‘. This may cause an update error.
因为你在同一个页面有两个for循环,导致索引发生错误,不知道选择那个为中,因此报了这种错,应做一个索引划分。在同一个页面存在两个for循环的话,上面这两种都会出错。首先判断是因为for循环导致的,检查是否出现重复。检测到重复密钥:‘1’。这可能会导致更新错误。解决方法:如下,随便给其中一个加一个字符就好了。笔者是同一个页面两处for循环导致。原创 2023-08-25 11:00:37 · 2810 阅读 · 2 评论 -
NavigationDuplicated: Avoided redundant navigation to current location: “/fristhome/product“.
原因:Uncaught (in promise) navigationduplicate:避免冗余导航到当前位置:“/ frishome /product”。解决方法:找到router/index.js 配置下面。简单来说,就是路由重复性的加载导致路由沉余。原创 2023-08-25 21:00:00 · 915 阅读 · 0 评论 -
【案例】VR全景图:效果+源码
狠人话不多说,直接放视频效果地址。原创 2023-07-05 10:33:44 · 5511 阅读 · 0 评论 -
【案例】js vue跳转html页面(新、独立的窗口)携带参数并请求后端接口
第一步: 创建好html页面,写入想要的页面布局;回溯到public路径下,对于新的、独立的窗口配置。这里是绝对路径,笔者这里是用vue框架,第二步:跳转html页面,并携带参数;第三步:获取html地址携带的参数。第四步:后端接口请求,正常请求即可。原创 2023-03-06 10:41:51 · 3839 阅读 · 0 评论 -
【案例】分页符el-pagination
场景:思路一:(想挑战自己的,咱们前端就自己做)思路一:方案思路二:思路二:方案思路二和思路一的解决方案主要区别就在于函数,思路二这个函数就放到后端做了原创 2022-12-02 14:58:37 · 362 阅读 · 0 评论 -
【案例】前端对接LED设备发送指令
遇到的坑:要求格式是00 00,10进制的125转为16进制结果为7D,结果应该为7D 00,写入指令发送是没有反应的,是错误的,搞了半天发现这里格式须为00 7D,才可以指令发送成功,显示出来,所在代码中的位置。如果能够做到精准,一家一策、一人一策,当然是最好的,但需要通过专业人员评估社区环境、家庭通风下水条件等,确保周围是安全的。思路:需要将输入的内容转为16进制的gb2312编码格式发送给设备才可以,在这里笔者遇到一个坑,后面有详说。需求:前端对接LED显示屏,且可以根据LED指令说明灵活性设置。原创 2022-11-28 18:30:00 · 697 阅读 · 3 评论 -
【案例】监听浏览器页面大小发生变化,自动刷新
监听浏览器页面大小发生变化,页面就自动刷新。原创 2022-08-30 10:20:22 · 429 阅读 · 0 评论 -
封装API,request拦截,response拦截,身份验证时效性
封装API,request拦截,response拦截,身份验证时效性原创 2022-07-15 19:30:00 · 156 阅读 · 0 评论 -
vue 前端导入excel文件,并展示出
纯前端导入excel文件并展示出来表格或表单原创 2022-07-01 19:30:00 · 1993 阅读 · 0 评论 -
【记录29】sessionStorage和localStorage的区别和用法
1. sessionStorage和localStorage都是用作存储数据 2. sessionStorage的存储,我看作是临时存储,因其存储的数据只存在当前的浏览器标签页,适用于单页面开发项目,安全上比localStorage的安全性高; 3. localStorage的存储,看作永久性存储,因其不是存储在当前浏览器标签页下,而是存储在电脑本地,单页面开发也适用,多页面开发也适应,但sessionStorage就不适应多页面开发; 4. 两者都是可以被清除的。原创 2022-05-18 16:45:29 · 1220 阅读 · 0 评论 -
【记录25】动态表单的实现3.0
通过进步器来控制表单个数原创 2022-05-01 00:30:00 · 477 阅读 · 0 评论 -
【记录23】vue 浏览器标题之动态title和静态title
已实现:本篇文章主要写一下 静态浏览器标题和动态浏览器标题原创 2022-04-15 00:00:00 · 1756 阅读 · 0 评论 -
【记录22】选择多条数据,变一条文本数据,并加复制功能
多条数据变一个文本、复制粘贴功能原创 2022-03-25 19:15:00 · 710 阅读 · 0 评论 -
【记录21】[vue-router] Duplicate named routes definition: { name: “details“, path: “/equiment/details“
已解决,name或path要唯一,而实际是命名有重复原创 2022-03-24 18:00:00 · 1016 阅读 · 0 评论 -
【记录20】 router. before each is not a function 已解决
报错原因是小编这里引入和定义用的是同一个router之前还可以,今天突然浏览器出现报错没有定义router,找了半天原来只是将其赋值,没有使用引入的,骗过的浏览器导致的,这样是不对的,需要给引入的赋值,import router from 'vue-router',而在写路径时直接赋给了定义的router,没有赋给引入的router,所以就报了这个错误,唉,以后命名还是要不同的名字最好。原创 2022-03-17 22:09:12 · 2895 阅读 · 0 评论 -
【记录17】vue 文本自动播放,可控制
话不说,直接放源码<template> <div class="home"> <el-button type="primary" plain round size="small" @click="handlSpeak()">播放</el-button> <el-button type="error" plain round size="small" @click="handleStop()">停止</el-button.原创 2022-03-14 11:28:08 · 1554 阅读 · 0 评论 -
【记录16】vue点击复制文本
npm install --save vue-clipboard2原创 2022-03-02 16:51:39 · 586 阅读 · 0 评论 -
【记录5】el-table合计行不显示,除页面缩放或者F12
1.控制合计行中列显隐; 2.就是正常进入页面合计行没有出现,只有按F12、F11,及页面缩放才会显示出来,而我们要的是直接显示出合计行; 3.合计行在表格滚动条下方原创 2021-12-09 13:34:23 · 2483 阅读 · 0 评论 -
【记录4】【密码生成】前端自动生成8位由字母和数字组成的密码
自动生成8位由字母和数字、特殊字符组成的密码,本篇也适用于自动生成4位、6位验证码原创 2021-12-08 16:45:21 · 4803 阅读 · 0 评论 -
【2.0版本】可自行增减的动态表单
动态表单介绍效果图单个动态表单效果图多个动态表单效果图重点部分讲解正常情况下,表单prop定义:而动态表单定义:正常情况下,data定义:而动态表单的data定义:事件:`标记`:多个动态表单代码:介绍关注编者博客的都知道小编的文章中有一篇动态表单文章,跳转链接,话说这篇文章写的是真的,,,,差,这篇文章小编就暂时不删了,留着提醒小编。好了,估计你看到这都烦了吧!!!小白话不多说,下面就是对你们好的时候,直接放效果图,看各位是否喜欢,说错了,怎么能是喜欢呢,呸呸呸,应该是否符合你的口味,都看这了眼神下原创 2021-11-29 11:46:11 · 973 阅读 · 0 评论 -
【记录2】父子组件之间的传值、方法等等
父子组件之间的传递组件1. 父组件向子组件的通信1-1 父组件向子组件传值1-2 父组件向子组件传方法(或事件、函数)1-3 `loginFormRef` 是父组件调用子组件中的方法或事件2. 子组件向父组件的通信2-1 子组件接收父组件的字符串传值2-2 `this.$emit()`子组件向父组件传值3. 总结组件相信大家对组件一点也不陌生,在我项目开发的过程中都会用到。组件:父组件、子组件、孙组件这里我主要有关父组件和子组件之间的传递关系1. 父组件向子组件的通信通信这里分为:传值、传对象、原创 2021-11-23 13:48:04 · 833 阅读 · 1 评论 -
时间按钮:给按钮添加一个计时器
点击前:点击后:到时间后:代码展示:原创 2021-02-03 20:23:00 · 1012 阅读 · 0 评论 -
如何获取当前日期和时间
解决methods:{ focusDate(){ //获取当日日期 var date = new Date() //调用Date函数 var year = date.getFullYear() //年 var month = date.getMonth() + 1 //月 var daily = date.getDate() //日 console.原创 2021-03-16 15:37:04 · 453 阅读 · 0 评论 -
【1.0版本】vue+element UI动态添加表单
图片源码(可复制往后翻):data中定义:methods中:console.log(this.receiverForm.object)在控制台打印出的就是你填写提交的数据可复制源码:<el-col :span="2"> <div style="text-align:right;">接收人</div></el-col><el-col :span="3"> <el-form-item prop="worksi..原创 2020-12-18 17:46:55 · 2686 阅读 · 10 评论 -
vue 前端生成二维码,并转换为图片
话不多说,直接上干货npm install qrcodejs2 //生成二维码的包npm install html2canvas //转为图片格式的包重点部分1://`生成二维码部分` new QRCode(this.$refs.qrCodeDiv,{ text:"http://19*.16*.12*.2*:8080/#/login?" + this.work_point.id, //text为转换为二原创 2021-05-27 15:08:03 · 3907 阅读 · 5 评论 -
表格内嵌进度条
先看看是不是想要的效果图:如果是,请继续往下看,若不是,请立即关闭网页,不要耗费无用的时间在这。是:先说明下,作者采用的是vue+element UI技术,其实,实现起来非常简单,大家都知道表格中加按钮是如何加的,看下图:注意:<template slot-scope="scope">中的slot-scope,这才是重点。通过它才能获取到该行的数据,如:编辑按钮–> 点击编辑获取编辑行的所有数据@click="worksiteEdit(scope.row,scope.$index原创 2020-12-18 15:10:03 · 651 阅读 · 1 评论 -
输入框远程搜索
实现效果:在输入框输入相关参数(查找字段)来查询想要的信息,并选择。效果解说:实现远程搜索的位置是“技术员”,通过手机号精准查找某个人,并选择他。我这块后端要求返回的是该人的ID。环境:vue + element ui代码块:这块只展示主要的html代码<el-col :span="2"> <div style="text-align:right;">技术员</div></el-col><el-col :span="4">原创 2021-01-12 11:31:49 · 1682 阅读 · 0 评论 -
动态表单实现远程搜索
效果:动态表单实现远程搜索技术:vue + element UI首先,弹出框表单:如下图点击“下一步”,接着会弹出一个动态的可远程搜索的表单如图:输入框可进行远程搜索,点击提交即可,我这里虽然做了展示,但后端要求是发送人员的ID,我在代码中做了处理,啥也不说,看代码:说明:这里只展示动态表单的远程搜索的代码和获取人员ID代码,想看动态表单代码,请点击这里查看改成如下图就行:接下来是*method*:可复制://远程搜索技术员(调试及测试成功) querySea原创 2021-01-21 17:53:26 · 456 阅读 · 0 评论 -
vue 直接将el-table数据导为excel文档
vue如何实现文件导出:即将表格数据导出为excel文档,实现方法如下步骤案例讲解首先需要下载通过下面地址链接下载文件链接:https://pan.baidu.com/s/1v48MnFeqvDIboxix8N-7hg 提取码:f6xh然后在src文件下创建一个excel文件,便于后期的一些查找和问题的处理最后直接在相应的位置(方法中)使用即可此部分代码看下方代码块this.excelData = this.cycleData // this.export2e原创 2021-05-24 09:51:16 · 1971 阅读 · 4 评论 -
el-dialog弹出框编辑
先看效果:官方的弹出框 官方文档el-dialog按照官方文档区写就好了,我这里就不展示“表格”和“弹出框表单”的代码了,只留下事件的代码块。点击“编辑”时,是将行数据赋值给“编辑表单”this.editForm = Object.assign({}, row),这样就会把行数据在“编辑”中展示出来。注意:点击“编辑”事件时,加上this.dialogEditFormVisible=true,默认时,其为false,这样“弹出框”弹出时也携带着相对应的数据,修改完,点击“确认提交”就ok了。有点地方原创 2020-12-02 11:31:40 · 3039 阅读 · 1 评论 -
base64转图片及显示
<img style="width:200px;height:200px;margin:auto;" :src="'data:img/png;base64,' + img_picture" alt="图片加载失败" :title="img_title">data中定义img_picture和img_title,alt主要作用于图片没有出现的提示语句;title作用是鼠标放在图片上,给出的提示语句;注::src=" 'data:img/png;base64,' + img.原创 2021-05-27 13:27:15 · 2212 阅读 · 0 评论 -
如何去掉百度地图logo
去掉前:去掉后:方法很简单:只需要打开在public文件下的index.html,加入两行代码即可。代码如下:<style type="text/css">.BMap_cpyCtrl {display: none;}</style> <style type="text/css">.anchorBL{display:none;}</style>笔者所放位置:...原创 2021-08-10 14:37:27 · 2358 阅读 · 1 评论