vue
舞空~
一只普通的程序猿,记录自己的点点滴滴,希望博客能帮助到你们哈!努力加油!喜欢的麻烦给个赞,谢谢!
展开
-
小程序固定定位没生效原因
小程序固定定位没生效的解决办法原创 2022-07-13 16:46:30 · 684 阅读 · 1 评论 -
vue中实现购物页面侧栏分类随滚动自动激活侧栏分类,商品页面侧栏分类和页面滚动联动demo
1.效果如图页面滚动,吸顶区吸顶(注释了,根据需要修改),下面侧栏左栏点击,右栏自动滚动到当前分类;右栏滚动左栏自动激活当前分类按钮2.demo主要包括三部分虚拟数据js文件,页面vue,本地图片3.下面附上源码:创建一个虚拟数据文件mydata.js1.效果如图页面滚动,吸顶区吸顶,下面侧栏左栏点击,右栏自动滚动到当前分类;右栏滚动左栏自动激活当前分类按钮2.demo主要包括三部分虚拟数据js文件,页面vue,本地图片3.下面附上源码:mydata.jsconst原创 2021-07-21 15:17:48 · 1094 阅读 · 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 · 1489 阅读 · 0 评论 -
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 · 2132 阅读 · 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 · 1116 阅读 · 0 评论 -
VUE获取元素高度的方法
VUE获取元素高度的方法原创 2021-04-02 17:15:36 · 25964 阅读 · 0 评论 -
Vue中监听某个元素滚动盒子中滚动条的位置
监听某个元素滚动盒子中滚动条的位置原创 2021-04-02 17:11:37 · 4277 阅读 · 0 评论 -
vue和uniapp中页面数据不更新,js变量更新了,视图数据却没变
vue和uniapp中页面数据不更新,js变量更新了,视图数据却没变的解决方案原创 2021-04-02 16:53:02 · 1450 阅读 · 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 · 1358 阅读 · 0 评论 -
vue 路由跳转记住滚动位置,返回时回到上次滚动位置(第一种亲测有效,且数据状态也会很好的保存,以及滚动位置)
应用场景经常用于电商购物车页面,比如点击进去查看商品详情,返回时需要记住当前分类,以及滚动条所处位置原创 2021-03-13 17:19:36 · 514 阅读 · 0 评论 -
vue中实现轮询功能,常用于监听支付状态
<template> <div> <h3>vue中实现轮询功能,常用于监听支付状态</h3> <p>轮询功能经常用在支付页面,我们需要实时获取当前支付状态,判断用户是否支付成功</p> </div></template><script>export default { name: "", components: {}, data() { return原创 2021-03-13 17:08:18 · 1491 阅读 · 0 评论 -
vue中用户自定义短信模板设置,功能为点击添加有光标时在光标后面拼接数据,没光标时在短信模板后面直接拼接数据
点击添加有光标时在光标后面拼接数据,没光标时在短信模板后面直接拼接数据原创 2021-03-13 16:51:08 · 1116 阅读 · 0 评论 -
点击获取验证码并登录的实现和验证原理
验证码其实就是一个图片,图片根据后面拼接的随机数的不同生成不同的图片,这个后端的事情,我们只需要在用户点击验证码时修改验证码图片地址即可原创 2021-03-13 15:50:41 · 5523 阅读 · 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 · 1014 阅读 · 0 评论 -
自己动手写一个上传组件(支持多个上传),并展示上传进度
我只是写一个demo,至于文件列表的展示,删除,下载自己根据自己的项目写就好了,例子我用的是elemengUI写的,具体可以根据自己的需求修改效果展示如图:点击上传(这边我传的文件比较小,所以看上去有点误差,进度是可以正常展示的)最后我将上传成功返回列表数据展示在页面,可以根据自己具体需求修改展示列表的样式布局为了方便观看,下面是源码截图,最后会附上源码:附上源码:<template> <div> <h3>上传组件</h3>原创 2020-12-17 15:30:46 · 322 阅读 · 0 评论 -
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 · 280 阅读 · 1 评论 -
VSCode 设置vue初始页面用户自定义代码片段
1.安装VueHelper扩展,安装后重启以下vscode2.打开用户代码片段方法:文件 → 首选项 → 用户代码片段 → 在搜索框输入vue选择‘vue.json’。3.清空内容,输入自定义模板,(根据自己需求修改模板) ,其中$0代表模板生成后,光标停留的位置。{ "Print to console": { "prefix": "vue", "body": [ "<template>", "原创 2020-11-03 10:42:44 · 1044 阅读 · 0 评论 -
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 · 502 阅读 · 2 评论 -
vue中的@click中使用三元运算符
@click="dialogStatus=='create'?createData():updateData()"希望文档能帮助到您,最后求个赞,谢谢~原创 2020-10-19 11:51:27 · 2168 阅读 · 6 评论 -
vue中定义使用全局过滤器,全局自定义命令
在平时开发中经常需要一些公用的过滤器和自定义命令,为了方便管理和应用,往往需要我们定义一个或多个公用的js,来管理我们项目中用到的过滤器和自定义命令原创 2020-10-19 11:46:05 · 389 阅读 · 0 评论 -
vue中封装共用js,以及在vue页面中引用
混入 (mixins): 是一种分发 Vue 组件中可复用功能的非常灵活的方式。混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被混入该组件本身的选项。原创 2020-10-19 11:36:47 · 1841 阅读 · 0 评论 -
vue中$bus的传参,赋值成功后没有引起页面的同步更新
1.问题描述:在B页面点击跳转到A页面,并利用$bus传递一个对象数据到A页面展示,如图点击后台输出赋值成功,页面却未展示,后台输出:修改以后:页面数据就成功展示了,使用setTimeout就可以正常显示了希望文档能帮助到您,最后求个赞,谢谢~...原创 2020-10-19 11:17:14 · 1500 阅读 · 7 评论 -
vuex 中在一个action方法中调用另一个action方法
vuex 中在一个action方法中调用另一个action方法场景:常用于登录以后拉取用户信息1.页面加载完成判断是否保存token,有则直接拉取用户信息2.当用户第一次登录时,登录调取vuex中action中登录方法,成功登录以后调取action中的拉取用户信息方法希望文档能帮助到您,最后求个赞,谢谢~...原创 2020-10-19 11:05:00 · 11123 阅读 · 8 评论 -
vue中常用的吸顶操作,滚动时菜单吸顶
希望文章能对你有所帮助,创作不易在此求个赞,谢谢哈~~1.应用场景应用场景如图:**未吸顶时滚动到底部时显示:当滚动时,侧栏吸顶,这样滚到最底部也能展示菜单:**2.解决方案首先思路就是监听见面的滚动事件,当页面滚动距离超过头部区域时(操作侧栏吸顶),小于头部区域高度时恢复(操作侧栏不吸顶),吸顶和不吸顶利用的是样式类来控制监听滚动代码(注意在mounted钩子函数执行监听,因为这时候dom都加载完了):mounted() { window.addEventListener("原创 2020-07-28 18:10:49 · 1492 阅读 · 0 评论 -
vue中实现简单答题卡,问卷调查逻辑(单选,多选,简答);
1.业务要求:一个简单的在线问卷调查,有单选,多选,简答题,侧栏显示题号,通过题号颜色判断,盖题目是否已答,答题完整才能提交;前提:首先正常项目中数据肯定是后台请求回来的,所以数据格式必须和后端商量好,在此我就先写个假数据代替了,需要和后端商量好数据的格式效果图如下:答题前显示:当我答题了以后,题号对应显示该题答题状况:此时点击提交按钮,提示"未打完,请继续答卷":完整答题提示:基本已完成业务需求,另外如果需要点击题号滚动到选中题,只需要利用锚点就可以了,在此就不做介绍了最后上代码,原创 2020-07-21 18:21:49 · 6703 阅读 · 13 评论 -
vue中利用ref属性实现隔山打牛,点击a触发b的事件,常用于点击按钮上传文件
vue中利用ref属性实现隔山打牛效果图:利用ref属性来实现隔山打牛页面代码:<button ref="me" @click="aa">我是aa</button><button @click="bb">隔山打牛</button>js方法:aa(){ alert('我是aa'); },bb(){ // 点我出发aa事件 this.$refs.me.click(); }...原创 2020-07-17 15:20:40 · 4331 阅读 · 0 评论 -
vue 自定义拖拉宽度变大变小,侧栏可拖拽改变大小,右边自动适应剩余宽度写自定义目录标题
vue 自定义拖拉宽度变大变小,侧栏可拖拽改变大小,右边自动适应剩余宽度写自定义目录标题1.效果显示图2.页面代码3.样式4.可以修改自定义命令,设置一个最小拖拽宽度1.效果显示图2.页面代码<template> <el-container> <el-main> <div class="myBox"> <div id="silderLeft"> <div class="me原创 2020-07-15 16:34:04 · 4213 阅读 · 6 评论