舞空~-优快云博客

好看的四种加载动画,效果如图:代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&g

2021-08-11 17:47:42 681

原创 vue中实现购物页面侧栏分类随滚动自动激活侧栏分类,商品页面侧栏分类和页面滚动联动demo

1.效果如图页面滚动,吸顶区吸顶(注释了,根据需要修改),下面侧栏左栏点击,右栏自动滚动到当前分类;右栏滚动左栏自动激活当前分类按钮2.demo主要包括三部分虚拟数据js文件,页面vue,本地图片3.下面附上源码:创建一个虚拟数据文件mydata.js1.效果如图页面滚动,吸顶区吸顶,下面侧栏左栏点击,右栏自动滚动到当前分类;右栏滚动左栏自动激活当前分类按钮2.demo主要包括三部分虚拟数据js文件,页面vue,本地图片3.下面附上源码:mydata.jsconst

2021-07-21 15:17:48 1165

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

原创 element-ui DateTimePicker设置只能选择当前时间之前或之后的时间

1.设置picker-options属性代码::picker-options="pickerOptions"2.属性代码:pickerOptions: { disabledDate (time) { return time.getTime() < Date.now() // 选当前时间之后的时间 // return time.getTime() > Date.now() // 选当前时间之前的时间

2021-06-21 17:57:04 2220

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

原创 VUE获取元素高度的方法

VUE获取元素高度的方法

2021-04-02 17:15:36 26194

原创 Vue中监听某个元素滚动盒子中滚动条的位置

监听某个元素滚动盒子中滚动条的位置

2021-04-02 17:11:37 4381

原创 vue和uniapp中页面数据不更新,js变量更新了,视图数据却没变

vue和uniapp中页面数据不更新,js变量更新了,视图数据却没变的解决方案

2021-04-02 16:53:02 1510 2

原创 js判断日期大小

js判断日期大小getMax(date1,date2){ var oDate1 = new Date(date1); var oDate2 = new Date(date2); if(oDate1.getTime() > oDate2.getTime()){ console.log('第一个大'); } else { console.log('第二个大'); }}this.getMax('2015-10-10','2015-

2021-04-02 16:49:50 1413

原创 nvm一个node版本管理工具

有时候项目运行不起来可能是node版本太久或太新,这时候你就需要对node版本进行升级或者降级,nvm就是一个很好用的node版本管理工具

2021-03-13 17:41:24 126

原创 vue 路由跳转记住滚动位置，返回时回到上次滚动位置(第一种亲测有效,且数据状态也会很好的保存,以及滚动位置)

应用场景经常用于电商购物车页面,比如点击进去查看商品详情,返回时需要记住当前分类,以及滚动条所处位置

2021-03-13 17:19:36 534

原创 vue中实现轮询功能,常用于监听支付状态

<template> <div> <h3>vue中实现轮询功能,常用于监听支付状态</h3> <p>轮询功能经常用在支付页面,我们需要实时获取当前支付状态,判断用户是否支付成功</p> </div></template><script>export default { name: "", components: {}, data() { return

2021-03-13 17:08:18 1590

原创 vue中用户自定义短信模板设置,功能为点击添加有光标时在光标后面拼接数据,没光标时在短信模板后面直接拼接数据

点击添加有光标时在光标后面拼接数据,没光标时在短信模板后面直接拼接数据

2021-03-13 16:51:08 1258

原创点击获取验证码并登录的实现和验证原理

验证码其实就是一个图片,图片根据后面拼接的随机数的不同生成不同的图片,这个后端的事情,我们只需要在用户点击验证码时修改验证码图片地址即可

2021-03-13 15:50:41 5639

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

原创自己动手写一个上传组件(支持多个上传),并展示上传进度

我只是写一个demo,至于文件列表的展示,删除,下载自己根据自己的项目写就好了,例子我用的是elemengUI写的,具体可以根据自己的需求修改效果展示如图:点击上传(这边我传的文件比较小,所以看上去有点误差,进度是可以正常展示的)最后我将上传成功返回列表数据展示在页面,可以根据自己具体需求修改展示列表的样式布局为了方便观看,下面是源码截图,最后会附上源码:附上源码:<template> <div> <h3>上传组件</h3>

2020-12-17 15:30:46 353

原创数组和对象的常用遍历

<!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 99

原创数组的排序和数组根据对象的某个字段排序

数组根据对象的某个字段排序,如图:希望文档能帮助到您,最后求个赞,谢谢~

2020-12-03 15:56:53 754

原创详细解读深浅拷贝,实现深拷贝最好的方法就是递归方法

1.对浅拷贝和深拷贝的理解浅拷贝和深拷贝都是对于JS中的引用类型而言的，浅拷贝就只是复制对象的引用堆和栈的关系，简单类型Undefined，Null，Boolean，Number和String是存入堆，直接引用，object array 则是存入桟中，只用一个指针来引用值），如果拷贝后的对象发生变化，原对象也会发生变化。只有深拷贝才是真正地对对象的拷贝。2.浅拷贝:浅拷贝的意思就是只复制引用（指针），而未复制真正的值。// 数组浅拷贝 let A = [{ id: 1, name:

2020-12-03 14:31:31 904 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 3854 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 296 1

原创 VSCode 设置vue初始页面用户自定义代码片段

1.安装VueHelper扩展，安装后重启以下vscode2.打开用户代码片段方法：文件 → 首选项 → 用户代码片段 → 在搜索框输入vue选择‘vue.json’。3.清空内容，输入自定义模板，（根据自己需求修改模板） ,其中$0代表模板生成后，光标停留的位置。{ "Print to console": { "prefix": "vue", "body": [ "<template>", "

2020-11-03 10:42:44 1094

原创 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 549 2

原创 vue中的@click中使用三元运算符

@click="dialogStatus=='create'?createData():updateData()"希望文档能帮助到您,最后求个赞,谢谢~

2020-10-19 11:51:27 2230 6

原创 vue中定义使用全局过滤器,全局自定义命令

在平时开发中经常需要一些公用的过滤器和自定义命令,为了方便管理和应用,往往需要我们定义一个或多个公用的js,来管理我们项目中用到的过滤器和自定义命令

2020-10-19 11:46:05 411

原创 vue中封装共用js,以及在vue页面中引用

混入 (mixins)：是一种分发 Vue 组件中可复用功能的非常灵活的方式。混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项。

2020-10-19 11:36:47 1886

原创 vue中$bus的传参,赋值成功后没有引起页面的同步更新

1.问题描述:在B页面点击跳转到A页面,并利用$bus传递一个对象数据到A页面展示,如图点击后台输出赋值成功,页面却未展示,后台输出:修改以后:页面数据就成功展示了,使用setTimeout就可以正常显示了希望文档能帮助到您,最后求个赞,谢谢~...

2020-10-19 11:17:14 1554 7

原创 vuex 中在一个action方法中调用另一个action方法

vuex 中在一个action方法中调用另一个action方法场景:常用于登录以后拉取用户信息1.页面加载完成判断是否保存token,有则直接拉取用户信息2.当用户第一次登录时,登录调取vuex中action中登录方法,成功登录以后调取action中的拉取用户信息方法希望文档能帮助到您,最后求个赞,谢谢~...

2020-10-19 11:05:00 11491 8

原创 vue中常用的吸顶操作,滚动时菜单吸顶

希望文章能对你有所帮助,创作不易在此求个赞,谢谢哈~~1.应用场景应用场景如图:**未吸顶时滚动到底部时显示:当滚动时,侧栏吸顶,这样滚到最底部也能展示菜单:**2.解决方案首先思路就是监听见面的滚动事件,当页面滚动距离超过头部区域时(操作侧栏吸顶),小于头部区域高度时恢复(操作侧栏不吸顶),吸顶和不吸顶利用的是样式类来控制监听滚动代码(注意在mounted钩子函数执行监听,因为这时候dom都加载完了):mounted() { window.addEventListener("

2020-07-28 18:10:49 1556

原创 vue中实现简单答题卡,问卷调查逻辑(单选,多选,简答)；

1.业务要求:一个简单的在线问卷调查,有单选,多选,简答题,侧栏显示题号,通过题号颜色判断,盖题目是否已答,答题完整才能提交;前提:首先正常项目中数据肯定是后台请求回来的,所以数据格式必须和后端商量好,在此我就先写个假数据代替了,需要和后端商量好数据的格式效果图如下:答题前显示:当我答题了以后,题号对应显示该题答题状况:此时点击提交按钮,提示"未打完,请继续答卷":完整答题提示:基本已完成业务需求,另外如果需要点击题号滚动到选中题,只需要利用锚点就可以了,在此就不做介绍了最后上代码,

2020-07-21 18:21:49 7027 15

原创 transform和animation同时作用于同一个元素

如图,对下面方格进行了倾斜和旋转的动画,会发现动画执行时,元素又变回了正方形,而没有倾斜,如何保持倾斜状态下旋转呢?<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>转换加动画&l

2020-07-21 16:16:13 489

原创 css3动画animation基础详解,给元素添加多个动画时动画不分先后同时执行

效果如图:上面添加了两个动画,一为旋转,二为变色,当给section元素添加这两个动画时,两个动画不分先后同时执行<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>2D基础动画</title> <style> html{ height: 100%;

2020-07-21 14:53:39 6184 1

原创 css3动画的过渡

效果图:右边是动画,左边是过渡,过渡需要提前设置好过渡的样式,时间,速率等等属性<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>2D的过渡</title> <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></scrip

2020-07-21 14:43:25 249

原创 css3动画的转换transform详解

注意transform转换要实现多个效果时,不能分开写,否则后面的transform效果会覆盖前面的transform效果,要达到多个效果时,需要使用混合写法,可参考下面两种混合写法效果如图:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>2D动画的转换</title> <style>

2020-07-21 10:57:59 332

原创 screenX clientX pageX的区别

screenX:鼠标位置相对于用户屏幕水平偏移量，而screenY也就是垂直方向的，此时的参照点也就是原点是屏幕的左上角。(简单的说就是电脑桌面的左边到当前鼠标点的距离)clientX:跟screenX相比就是将参照点改成了浏览器内容区域的左上角，该参照点会随之滚动条的移动而移动。(就是浏览器可视区域左边和上边到当前点的距离,不包含滚动条遮着的区域)pageX：参照点也是浏览器内容区域的左上角，但它不会随着滚动条而变动如图(红点就是鼠标当前位置,pageX就是整个文档包括滚动区域左边上边到该点的位置.

2020-07-20 17:53:00 813

空空如也

空空如也