- 博客(88)
- 收藏
- 关注
RSS订阅原创 vue 基于vue-seamless-scroll无缝滚动的用法和遇到的问题解决
最近再做一个大屏项目,需要用到表格滚动效果,之前自己写过js实现,最近发现一个组件vue-seamless-scroll可以实现滚动,感觉挺方便的,准备用一下,但是用完之后才发现这个组件有很多坑需要解决.我把用法和一些问题的解决方法记录一下.思路:在外边写个弹框,在组件上挂上,mouseover,mouseout事件,通过鼠标事件控制弹框的显隐,代码在上边大家可以去看看.开始的思路是在表格行上添加@click事件就行了,这种方式不可行,发现有的行点击事件挂载不上,后来看了看,明白了大概原因,
2023-09-28 10:03:55
1979
3
原创 elmentUI组建中el-date-picker实现限制时间范围精确到小时
elmentUI组建中el-date-picker实现限制时间范围精确到小时
2022-12-30 09:18:12
6704
2
原创 解决vue项目中keep-alive不能缓存多层级路由问题
解决vue项目中keep-alive不能缓存多层级路由看了很多文档，都是把嵌套多级路由简化（keep-alive满足二级/一级菜单缓存）,菜单数据和路有数据分离开,这种方案解决起来相对复杂一些,下面的方法相对简单一些,我是看了这篇文章,结合自己的项目稍作修改.下边也有自己遇到的问题及解决方法.需求介绍自己项目的图片不便粘贴,我还是引用原博主的图片项目中使用的是3级路由,要实现三级菜单来回跳转保存状态(并且跨二级菜单间的三级菜单页面切换也需要保存状态)咱们首先想到的是使用keep-alive标签来
2022-03-22 17:50:53
7418
7
原创 vue项目中实现语音队列的依次播放
vue项目中实现语音队列的依次播放需求分析通过长链接接收后台返回的消息数据,并进行语音的依次播放完整.长链接和语音播放功能在以往的文章中都有介绍.再次我们主要着重介绍语音依次播放的功能.那怎样实现依次播放呢?1.需要用一个数组存储接收到的数据对象.存储到数组中就不多说了,push进去就可以.2.按照顺序进行播放.消息队列有了,初始想法是使用一个定时器,每隔几秒播报消息队列中的消息,这样需要统计每条消息的时间来设置一个最长时间进行轮巡,如果语音播报时间相同这样好设置,如果是不同的话,设置的轮巡
2022-02-23 15:43:45
2582
原创 ＜audio＞标签实现设置播放次数的功能
标签实现设置播放次数的功能audio有一个事件： end开始思路是：通过给标签设置loop属性后,监听播放结束的次数，来控制播放。function playTimes(elem, times) { var start = 0; elem.addEventListener("ended",function() { start++; start == times && elem.pause(); });}这种思路行不通,因为循环
2022-02-09 08:36:09
2128
原创 vue使用keep-alive 缓存和销毁缓存状态
vue使用keep-alive 缓存和销毁缓存状态需求页面需要保存操作状态,在页签关闭的时候销毁缓存状态实现把需要保存状态的页面对应的路由属性keepAlive设置为true使用了 keep-alive里面的 include或exclude属性添加keepAlive属性根据自己使用的动态路由和静态路由方式自行添加,添加位置{ name:'a' path:'/A', component:()=>import('@/pages/A'), meta
2022-01-21 15:17:56
4570
原创 解决新版Chrome拦截自动播放（Google浏览器不支持audio自动播放问题）
Google浏览器不支持audio自动播放声音无法自动播放这个在IOS/Android上面一直是个惯例，桌面版的Safari在2017年的11版本也宣布禁掉带有声音的多媒体自动播放功能，紧接着在2018年4月份发布的Chrome 66也正式关掉了声音自动播放，也就是说 在桌面版浏览器也将失效。设置谷歌浏览器属性在这里可以设置某一个网址自动播放声音，不过需要引导用户进来设置chrome://settings/content通过上述操作跳转到当前页面,点击声音设置勾选可以播放声音,并添加上自己发布
2022-01-14 10:13:27
12216
原创 vue项目中实现消息从上到下更新滚动
vue项目中实现消息从上到下更新滚动需求说明一个盒子中只展示两条数据,来新数据后,新数据自动放到最上层,从上到下滑动把原数据顶下去.实现思路我总结了一下,我的思路大概就是一个四位轮播思路,我给大家画了一个图,便于更好理解,1234位四个位置,初始消息只有2,3位置的两个消息,滑动时最多同时存在3条消息,先别着急实现,慢慢往下看.1.把所需页面结构和样式先画出来HTML<div class="lunboBox" :style="{ height: height * lin
2022-01-12 15:09:37
2676
原创 vue项目中通过WebSocket实现实时消息提示及遇到的问题
vue项目中通过WebSocket实现实时消息提示(前端代码)需求说明后台有新增消息通知,并实时推送给用户端,用websocket可以很方便的解决这个问题,但是websocket有个弊端不兼容IE8,9.由于我是搞前端的所以一下都是涉及的代码.实现过程1.在前端建立连接在methods创建websocket连接//websocket实时获取数据initWebSocket(){ if(this.websocket){ this.websocket.close() this.w
2022-01-12 11:21:44
11204
原创 vue项目中小知识点总结
vue项目中小知识点总结vue的生命周期beforeCreate创建之前，此时还没有data和MethodCreated创建完成，此时data和Method可以使用了在Created之后beforeMount之前如果没有el选项的话那么此时生命周期结束，停止编译，如果有则继续beforeMount在渲染之前mounted页面已经渲染完成，并且vm实例中已经添加完$el了，已经替换掉那些DOM元素了(双括号中的变量)，这个时候可以操作DOM了(但是是获取不了元素的高度等属性的，如果想要获
2021-12-08 14:25:52
306
原创 vue cli3项目使用rem和vw实现自适应的方法
vue cli3项目使用rem和vw实现自适应的两种方法前言之前我写过两篇cli2项目自适应配置的文章,不过现在遇到的vue项目大多是cli3项目所以觉得有必要总结一下cli3项目自适应方法,在网上找了一篇不错的文章安装配置vue-cli3 构建的项目相较于vue-cli2 构建的项目精简了许多，将一些默认配置进行了更好更严密，让开发变得更高效的封装。一. 使用postcss-px2rem自适应1. 安装 flexible和 postcss-px2remnpm i ib-flexible -
2021-12-07 15:06:38
2732
原创 理解js继承的几种方式
理解js继承的几种方式前言JS作为面向对象的弱类型语言，继承也是其非常强大的特性之一。再头一次接触继承是感觉把自己搞得晕头转向,一直不想去碰触这一块,闲暇的时候决定把继承的只是点记录一下,方便自己以后查阅,个人觉得一些自己理解不了的东西何不先把它记下来.JS继承的实现方式想要继承，就必须要提供个父类（继承谁，提供继承的属性）// 父类 (构造函数)function Persion(name,age){ this.name = name; this.age = age; }// 父类
2021-12-06 15:27:24
183
原创 vue中provide/inject的使用
vue中provide/inject的使用最近遇到一个新的知识点,初次阅读代码感觉很懵逼,后来经过查资料发现还是挺实用的,故把它记录下来.(文章部分引用)我觉得此篇文章写的比较详细易懂,其中有作者的理解.为何使用provide/inject众所周知，在组件式开发中，最大的痛点就在于组件之间的通信。在 Vue 中，Vue 提供了各种各样的组件通信方式，从基础的 props/$emit 到用于兄弟组件通信的 EventBus，再到用于全局数据管理的 Vuex。在这么多的组件通信方式中，provide/i
2021-12-03 11:27:08
1298
原创 elementui使用el-table表格渲染报错Duplicate keys detected: ‘1‘. This may cause an update error.key
elementui使用el-table表格渲染报错Duplicate keys detected: ‘1’. This may cause an update error.key报错在使用el-table时报错Duplicate keys detected: ‘1’. This may cause an update error.key报错原因分析表格中的数据存在相同的id值,使key值不唯一,导致报错解决办法正好el-table提供了设置key值的属性row-key,只要把表格不同行设置成不
2021-11-04 11:25:03
7832
2
原创 element-ui中的table分页可进行批量操作
element-ui中的table分页可进行批量操作项目需求可以批量操作table中不同分页选择的行数据依据官方解释:实例在el-table中添加:row-key=“getRowKeys”<el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" :row-key="getRowKeys" @selection-change=
2021-09-30 14:20:31
781
原创 vue项目中关闭ESLint校验
vue项目中关闭ESLint校验ESLint 是在 ECMAScript/JavaScript 代码中识别和报告模式匹配的工具，它的目标是保证代码的一致性和避免错误。但是在实际开发过程中，总是各种警告，难免让人不爽.上图的警告意思是“字符串必须用单引号。。。”，好吧，我自己写的代码我能做到，但是公司项目大家合作的时候，一旦合并代码，就会出现代码一片红色波浪的壮观场景。。。那么问题来了，如何在开发的时候，关闭ESLint校验呢？网上说法乱七八糟一大堆，先将个人经验稍作整理，分享如下方法一：根目
2021-02-25 08:50:30
2191
原创 实用的小知识点总结
实用小知识点总结1、JavaScript 中如何检测一个变量是一个 String 类型？请写出函数实现typeof(obj) === "string"typeof obj === "string"obj.constructor === String2、请用 js 去除字符串空格？方法一：使用 replace 正则匹配的方法去除所有空格: str = str.replace (/s*/g,"");去除两头空格: str = str.replace (/^s|s$/g,"");去除左空格
2021-02-24 16:03:05
137
转载 Vue+WebSocket 实现页面实时刷新长连接
Vue+WebSocket 实现页面实时刷新长连接最近vue项目要做数据实时刷新，折线图每秒重画一次，数据每0.5秒刷新一次，说白了就是实时刷新，因为数据量较大，用定时器估计页面停留一会就会卡死。。。与后台人员讨论过后决定使用h5新增的WebSocket来实现数据实时展示，记录一下过程以及碰到的问题；注意：页面刷新长连接会被关闭，其实进入当前页面建立长连接的目的就是页面不用F5刷新，所有数据自动实时刷新，如果还是来回F5大刷页面那就没有意义了。。。<template> <d
2020-12-04 09:49:02
985
原创 express框架中ejs的安装使用和使用静态资源
1.express框架中ejs的安装使用需要装node环境和express框架,这个很简单,不清楚的可以查一下.安装npm install ejs --save 或者： npm install ejs --save-dev Express 中 ejs 的使用 var express = require("express"); var app = express(); app.set("view engine","ejs"); app.get('/ind
2020-12-02 15:06:27
722
原创 在vue项目中使用Vue2Leaflet地图组件
在vue项目中使用Vue2Leaflet地图组件最近遇到一个项目,使用的是Vue2Leaflet地图插件,咱们简单地介绍一下怎么使用吧.详细内容可以看官方文档.1.安装插件由于项目中会使用到vue2-leaflet和leaflet，因此需要安装2个插件npm install vue2-leaflet --savenpm install leaflet --save2、添加LMap 组件<l-map style="width: 100%; height: 600px;" :zoom="z
2020-12-01 16:40:20
1398
原创 使用js原生实现拖拽功能
使用js原生实现拖拽功能这是在无意中看到别人写这个功能,自己也试了一下,他写的不是很全,我依照她的思路把代码补了一下,我是在vue框架中写的小例子,上代码吧!HTML部分<template> <div> <div class="toudong"> <img id="p3" src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=7790568,3102770366&
2020-11-30 14:18:17
246
转载 vue中常用的鼠标事件、键盘事件、表单事件
vue中常用的鼠标事件鼠标事件、键盘事件、表单事件咱们在写vue项目的时候,经常会用v-on或@进行事件绑定,总结一下绑定事件种类,鼠标事件Event NameFired WhenauxclickA pointing device button (ANY non-primary button) has been pressed and released on an element.click在元素上按下并释放任意鼠标按键。contextmenu右键点击（在右键菜单
2020-11-27 14:50:10
1915
原创 vue项目中使用高德地图JS API进行精确定位并获取定位信息
vue项目中使用高德地图JS API进行精确定位并获取定位信息注册账号并申请Key首先，注册开发者账号，成为高德开放平台开发者登陆之后，在进入「应用管理」 页面「创建新应用」为应用添加 Key，「服务平台」一项请选择「 Web 端 ( JSAPI ) 」这一步不是很难,应该很快就搞定了.应用1. 在页面添加 JS API 的入口脚本标签，并将其中「您申请的key值」替换为您刚刚申请的 key；因为咱们是vue项目所以直接在index.html中引用就行<scrip
2020-11-27 11:08:22
5692
13
转载 vue监听滚动事件 实现某元素吸顶或者固定位置显示
vue监听滚动事件 实现某元素吸顶或者固定位置显示最近写了一个VUE的web app项目，需要实现某个部位吸顶的效果。即，页面往上滑动，刚好到达该部位时，该部分，固定在顶部显示。1、监听滚动事件利用VUE写一个在控制台打印当前的scrollTop,首先，在mounted钩子中给window添加一个滚动滚动监听事件，mounted () { window.addEventListener('scroll', this.handleScroll)},然后在方法中，添加这个handleScr
2020-11-27 09:22:28
693
原创 Vue项目中使用 .sync修饰符与$emit(update:xxx)
Vue .sync修饰符与$emit(update:xxx).sync修饰符的作用在对一个 prop 进行“双向绑定,单向修改”的场景下，因为子组件不能直接修改父组件，sync在2.3版本引入，作为一个事件绑定语法糖，利用EventBus，当子组件触发事件时，父组件会响应事件并实现数据更新，避免了子组件直接修改父组件传过来的内容。.sync修饰符之前的写法父组件：<parent :myMessage=“bar” @update:myMessage=“func”>js定义函数:fu
2020-11-27 08:59:47
8078
原创 我一直是个内向的人
我一直是个内向的人可能是家庭因素的影响,养成了内向的性格,虽然我觉得内向没有什么不好,但是在职场中一些自信,活泼的人总归有优势的.有时候后觉得自己也需要改变一下,因为我也很羡慕那些会说话,什么话题都能侃侃而谈的人,但是一遇到自己讲话和发言时,就不知道说些什么,有时候脑子里就一片空白,不知道说些啥,只能沉默以对.不知道什么时候自己就不喜欢说话了,除了工作中的必要沟通外,自己很少和别人畅所欲言.觉得自己的性格已经没法改变了,现在只能坦然接受了,每个人都不同,性格也有百态,做自己就可以....
2020-11-26 17:55:15
124
2
原创 前端页面添加灰色滤镜,使网页整体变灰
前端页面添加灰色滤镜,使网页整体变灰只需要在html的样式里面加一句代码html,body,div,img{ -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: grayscale(100%); filter: url("data:image/svg+x
2020-11-26 17:20:18
2902
原创 vue项目实现简单的购物车功能
vue项目实现简单地购物车功能由于只有前端代码,后台接口是请求不通的,所以我给列表数据itemlis添加了一个初始值,你在写的时候初始值为空数组.<template><div> <div id="cart" v-cloak> <template v-if="itemlis.length"> <table> <thead>
2020-11-26 16:35:52
839
原创 scrollIntoView()的方法属性及使用其实现锚点定位
详细介绍scrollIntoView（）方法属性在一个移动项目中遇到个这样的需求,一个表单填写页面,每项都有表单验证,并且点击提交按钮,未通过校验的输入框下边显示校验信息,同时页面滑动定位到第一个未通过校验的输入框.我们在完成这项需求时,使用的scrollIntoView（）方法.下边我们详细介绍一下scrollIntoView的属性用法.简介该scrollIntoView()方法将调用它的元素滚动到浏览器窗口的可见区域。语法element.scrollIntoView（）; // 等同于el
2020-11-25 16:22:38
3812
1
原创 在vue项目中scss的安装和使用
在vue项目中scss的安装和使用在这里不谈scss的语法 ,想看语法的可以点击这里,在这里说一下安装和全局使用.安装scss安装插件npm install node-sass sass-loader --save-dev找到build中webpack.base.conf.js,在rules中添加scss规则{ test: /\.scss$/, loaders: ['style', 'css', 'sass']}在vue文件中使用<style lang="sc
2020-11-25 14:03:10
4404
转载 总结vue项目 npm装包时-S和-D的区别
总结vue项目 npm装包时-S和-D的区别1、npm install name -save 简写（npm install name -S） 自动把模块和版本号添加到dependencies。-S后，安装包会在package中的 dependencies 对象中。简称dep。dep是在生产环境中要用到的。2、npm install name --save-dev 简写（npm install name -D） 自动把模块和版本号添加到devdependencies。-D后，安装包会在package中
2020-11-25 11:21:53
917
原创 vue项目中的常用修饰符
vue项目中的常用修饰符1.时间修饰符vue为v-on提供了事件修饰符，通过点(.)表示的指令后缀来调用修饰符。.shop<div @click.stop="click"></div><!-- 阻止事件向上冒泡 -->.self只会触发自己范围内的事件，不包含子元素<div @click.self="click"></div><!-- 根据实际操作对象执行函数 --><!-- 还记得JQ中 $("div").o
2020-11-25 11:15:12
775
原创 vue项目在安装scss后,打包运行时时报错The “path“ argument must be of type string. Received undefined
vue项目在安装scss时报错The “path” argument must be of type string. Received undefined在vue项目中感觉安装scss很简单,今天啪啪打脸,安装完scss后,准备一波骚操作,重启项目报错.报错后来才发现是是sass-loader 版本造成的，此时的版本是 “sass-loader”:"^10.1.0",修改版本为 “sass-loader”: “^7.3.1”，重新使用命令安装npm i sass-loader@7 --D即可特
2020-11-25 09:44:53
7169
3
原创 vue项目中scss样式的语法总结
vue项目中scss样式的语法总结相信在写vue项目的时候,每个前端都有自已习惯的样式语法,比如css,stylus,scss等.在这里我给大家总结一下scss的语法.为什么用scss呢?Sass是成熟、稳定、强大的CSS预处理器，而SCSS是Sass3版本当中引入的新语法特性，完全兼容CSS3的同时继承了Sass强大的动态功能。那么，它到底有哪些特性呢，我们来看一下:安装安装sass 依赖包 ，在cmd界面输入：npm install sass-loader --save-devnp
2020-11-24 15:36:42
1903
原创 vue项目中使用elementui中的TimePicker 时间选择器禁用部分时间(前端页面显示禁用到分钟)
vue项目中使用elementui中的TimePicker 时间选择器禁用部分时间(只禁用到分钟)项目需求是:选择日期和时间,只能选择当前时间以后的时间,禁用最小级别到分钟.有两种选择1.使用DateTimePicker 日期时间选择器.2.DatePicker 和 TimePicker 组合使用这里我是用的是第二种方法,最主要的属性是picker-options<el-date-picker v-model="formInline.inventor
2020-11-24 09:18:08
8588
3
转载 vue中插槽的使用总结
vue中插槽的使用总结插槽概念：插槽，也就是slot，是组件的一块HTML模板，这块模板显不显示，以及怎样显示，由父组件决定；但是插槽显示的位置由子组件自身决定，slot写在组件template的哪块，父组件传过来的模板将来就显示在哪块。简单的说，插槽就是可以让开发者自定义地往子组件中放置代码片段而开发出来的东西。就好像专门在某几个地方弄了几个槽（子组件中），我们开发时，就可以在对应的槽中放置对应的代码了。分类默认插槽（匿名插槽|单个插槽）匿名插槽不需要设置name属性，一个组件里面只能有一个
2020-11-20 17:59:09
357
2
转载 vue路由跳转打开新窗口（window.open()）和关闭窗口（window.close()）
vue路由跳转打开新窗口（window.open()）和关闭窗口（window.close()）需求：从当前页面跳转到其他页面时，打开一个新窗口比如：点击页面上的用户反馈，打开用户反馈的新页面，要使用编程式导航编程式导航使用路由对象的resolve的方法解析路由，可以得到location、router、href等目标路由的信息，只要得到href就可以使用window.open打开新窗口了。代码如下： // 路由跳转新界面 userFeedback() { // thi
2020-11-20 16:58:09
4733
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人