![](https://img-blog.csdnimg.cn/20201014180756918.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
js
舞空~
一只普通的程序猿,记录自己的点点滴滴,希望博客能帮助到你们哈!努力加油!喜欢的麻烦给个赞,谢谢!
展开
-
vue中实现购物页面侧栏分类随滚动自动激活侧栏分类,商品页面侧栏分类和页面滚动联动demo
1.效果如图页面滚动,吸顶区吸顶(注释了,根据需要修改),下面侧栏左栏点击,右栏自动滚动到当前分类;右栏滚动左栏自动激活当前分类按钮2.demo主要包括三部分虚拟数据js文件,页面vue,本地图片3.下面附上源码:创建一个虚拟数据文件mydata.js1.效果如图页面滚动,吸顶区吸顶,下面侧栏左栏点击,右栏自动滚动到当前分类;右栏滚动左栏自动激活当前分类按钮2.demo主要包括三部分虚拟数据js文件,页面vue,本地图片3.下面附上源码:mydata.jsconst原创 2021-07-21 15:17:48 · 1074 阅读 · 0 评论 -
vue中封装公共的方法
1.创建一个common文件夹用户存放公共文件,在文件夹中创建一个sy_util.js用于存放公共的方法,例如我下面的$routerQuery方法sy_util.js代码:export default { install (Vue, options) { Vue.prototype.$routerQuery = () => { let href = location.href href = href.replace('%2原创 2021-06-23 16:45:09 · 1479 阅读 · 0 评论 -
vue中使用vconsole,适合在公众号手机页面的调试工具
1.应用场景:当我们项目放到公众号研发时,有时候报错我们需要在手机上排查,但是公众号页面是没办法看到输出的,这时候我们就可以引用vconsole调试了!2.安装命令: npm install vconsole3.安装完成,在main.js中引入import VConsole from 'vconsole'var vConsole = new VConsole();4.这时候手机打开项目就可以看到右下方这个按钮,点击就可以查看输出了,经常用于公众号页面进行调试,发布时把main.js两行注释就不原创 2021-06-21 17:48:48 · 1094 阅读 · 0 评论 -
VUE获取元素高度的方法
VUE获取元素高度的方法原创 2021-04-02 17:15:36 · 25932 阅读 · 0 评论 -
Vue中监听某个元素滚动盒子中滚动条的位置
监听某个元素滚动盒子中滚动条的位置原创 2021-04-02 17:11:37 · 4264 阅读 · 0 评论 -
vue和uniapp中页面数据不更新,js变量更新了,视图数据却没变
vue和uniapp中页面数据不更新,js变量更新了,视图数据却没变的解决方案原创 2021-04-02 16:53:02 · 1428 阅读 · 2 评论 -
vue 路由跳转记住滚动位置,返回时回到上次滚动位置(第一种亲测有效,且数据状态也会很好的保存,以及滚动位置)
应用场景经常用于电商购物车页面,比如点击进去查看商品详情,返回时需要记住当前分类,以及滚动条所处位置原创 2021-03-13 17:19:36 · 506 阅读 · 0 评论 -
vue中实现轮询功能,常用于监听支付状态
<template> <div> <h3>vue中实现轮询功能,常用于监听支付状态</h3> <p>轮询功能经常用在支付页面,我们需要实时获取当前支付状态,判断用户是否支付成功</p> </div></template><script>export default { name: "", components: {}, data() { return原创 2021-03-13 17:08:18 · 1478 阅读 · 0 评论 -
vue中用户自定义短信模板设置,功能为点击添加有光标时在光标后面拼接数据,没光标时在短信模板后面直接拼接数据
点击添加有光标时在光标后面拼接数据,没光标时在短信模板后面直接拼接数据原创 2021-03-13 16:51:08 · 1059 阅读 · 0 评论 -
点击获取验证码并登录的实现和验证原理
验证码其实就是一个图片,图片根据后面拼接的随机数的不同生成不同的图片,这个后端的事情,我们只需要在用户点击验证码时修改验证码图片地址即可原创 2021-03-13 15:50:41 · 5501 阅读 · 0 评论 -
vue的router-link的两种传参方式query和params的区别
首先我的页面路由配置是这样的:方式一:<router-link :to="{path:'./first',query:{id:666}}">第一页</router-link>地址展示如图,参数为键值对:获取参数的方式this.$route.query打点就可以获取参数id:this.$route.query.id方式二:<router-link :to="{name:'first',params:{id:777}}">第一页</router-l原创 2020-12-24 13:51:44 · 999 阅读 · 0 评论 -
自己动手写一个上传组件(支持多个上传),并展示上传进度
我只是写一个demo,至于文件列表的展示,删除,下载自己根据自己的项目写就好了,例子我用的是elemengUI写的,具体可以根据自己的需求修改效果展示如图:点击上传(这边我传的文件比较小,所以看上去有点误差,进度是可以正常展示的)最后我将上传成功返回列表数据展示在页面,可以根据自己具体需求修改展示列表的样式布局为了方便观看,下面是源码截图,最后会附上源码:附上源码:<template> <div> <h3>上传组件</h3>原创 2020-12-17 15:30:46 · 318 阅读 · 0 评论 -
数组和对象的常用遍历
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>数组和对象的常用遍历</title></head><body> <scrip原创 2020-12-03 16:54:53 · 79 阅读 · 0 评论 -
数组的排序和数组根据对象的某个字段排序
数组根据对象的某个字段排序,如图:希望文档能帮助到您,最后求个赞,谢谢~原创 2020-12-03 15:56:53 · 716 阅读 · 0 评论 -
详细解读深浅拷贝,实现深拷贝最好的方法就是递归方法
1.对浅拷贝和深拷贝的理解浅拷贝和深拷贝都是对于JS中的引用类型而言的,浅拷贝就只是复制对象的引用堆和栈的关系,简单类型Undefined,Null,Boolean,Number和String是存入堆,直接引用,object array 则是存入桟中,只用一个指针来引用值),如果拷贝后的对象发生变化, 原对象也会发生变化。只有深拷贝才是真正地对对象的拷贝。2.浅拷贝:浅拷贝的意思就是只复制引用(指针),而未复制真正的值。// 数组浅拷贝 let A = [{ id: 1, name:原创 2020-12-03 14:31:31 · 862 阅读 · 2 评论 -
实现一个数组过滤掉另一个数组元素的方法
问题描述:工作中经常遇到一个数组列表需要过滤掉另外另外一个数组的元素,剩下的组成一个新的数组,思路就是利用数组的filter方法,将判断的属性如例子的name属性放到一个判断数组,然后利用filter方法过滤即可<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width原创 2020-12-02 17:57:08 · 3795 阅读 · 4 评论 -
vue常用配置中文件目录配置别名以及跨域代理配置,常用“@/“表示“src“文件目录,后台没设置跨域可设置代理
1.文件目录配置别名我们可以把src配置为@,如果需要就不用到根目录开始写了,直接用@/xxx/进行引用。根据自己需要进行配置,在vue.config.js文件中加入代码 // 配置 chainWebpack: (config)=>{ // 配置别名 config.resolve.alias .set('@', resolve('src')) .set('assets',resolve('src/assets')) .set('c原创 2020-11-03 11:24:39 · 277 阅读 · 1 评论 -
vue 项目中使用阿里巴巴矢量图标库iconfont最简单方便的方法
1.打开iconfont阿里巴巴官网https://www.iconfont.cn2.把需要的图标添加到购物车3.打开购物车,添加至项目,项目如果没有就新建一个即可4.然后打开自己的项目,就可以看到自己的项目里面添加的图标了5.这时候就可以看到自己的项目了,点击生成css文件在线链接和js在线链接6.在vue项目中的public的index.html中引入,完成以后就可以正常使用了<!-- 导入最新阿里巴巴矢量库地址 --> <link rel="style原创 2020-10-19 16:43:55 · 499 阅读 · 2 评论 -
vue中封装共用js,以及在vue页面中引用
混入 (mixins): 是一种分发 Vue 组件中可复用功能的非常灵活的方式。混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被混入该组件本身的选项。原创 2020-10-19 11:36:47 · 1837 阅读 · 0 评论 -
vue中常用的吸顶操作,滚动时菜单吸顶
希望文章能对你有所帮助,创作不易在此求个赞,谢谢哈~~1.应用场景应用场景如图:**未吸顶时滚动到底部时显示:当滚动时,侧栏吸顶,这样滚到最底部也能展示菜单:**2.解决方案首先思路就是监听见面的滚动事件,当页面滚动距离超过头部区域时(操作侧栏吸顶),小于头部区域高度时恢复(操作侧栏不吸顶),吸顶和不吸顶利用的是样式类来控制监听滚动代码(注意在mounted钩子函数执行监听,因为这时候dom都加载完了):mounted() { window.addEventListener("原创 2020-07-28 18:10:49 · 1490 阅读 · 0 评论 -
vue中实现简单答题卡,问卷调查逻辑(单选,多选,简答);
1.业务要求:一个简单的在线问卷调查,有单选,多选,简答题,侧栏显示题号,通过题号颜色判断,盖题目是否已答,答题完整才能提交;前提:首先正常项目中数据肯定是后台请求回来的,所以数据格式必须和后端商量好,在此我就先写个假数据代替了,需要和后端商量好数据的格式效果图如下:答题前显示:当我答题了以后,题号对应显示该题答题状况:此时点击提交按钮,提示"未打完,请继续答卷":完整答题提示:基本已完成业务需求,另外如果需要点击题号滚动到选中题,只需要利用锚点就可以了,在此就不做介绍了最后上代码,原创 2020-07-21 18:21:49 · 6646 阅读 · 13 评论 -
screenX clientX pageX的区别
screenX:鼠标位置相对于用户屏幕水平偏移量,而screenY也就是垂直方向的,此时的参照点也就是原点是屏幕的左上角。(简单的说就是电脑桌面的左边到当前鼠标点的距离)clientX:跟screenX相比就是将参照点改成了浏览器内容区域的左上角,该参照点会随之滚动条的移动而移动。(就是浏览器可视区域左边和上边到当前点的距离,不包含滚动条遮着的区域)pageX:参照点也是浏览器内容区域的左上角,但它不会随着滚动条而变动如图(红点就是鼠标当前位置,pageX就是整个文档包括滚动区域左边上边到该点的位置.原创 2020-07-20 17:53:00 · 766 阅读 · 0 评论