分类：VUE

2020
10-08

vue+iview框架实现左侧动态菜单功能的示例代码

vue+iview框架实现左侧动态菜单功能的示例代码 最近在使用vue-cli3配合iview框架搭建新的项目中用到了iview中的menu菜单，按照官网写法固定不太好，因为一般项目都是从后端动态获取菜单列表，所以我们需要将官网代码稍作修改，代码如下：注意事项：【1】菜单高亮部分动态绑定路由跳转的页面Menu组件中有一个active-name反映的是当前高亮区域，因此可以动态的绑定active-name来实现高亮显示。前提是需要将MenuItem绑定的name也设置成页面路由的name【2】动态获取菜单数据，需要更... 继续阅读 >
2020
10-08

vue实现用户长时间不操作自动退出登录功能的实现代码

一、需求说明昨天后端开发人员让我实现一个网页锁屏，当时我一头雾水，问他为啥搞的跟安卓系统一样。他的回复是"看起来帅点"。首先我们梳理下逻辑，先来个简化版的，用户长时间未操作时，返回登录页二、思路使用mouseover事件来监测是否有用户操作页面，写一个定时器间隔特定时间检测是否长时间未操作页面，如果是，退出登陆，清除token，返回登录页三、实现【1】在util文件夹下创建一个storage.js封装localStorage方法exportde... 继续阅读 >
2020
10-08

在vue中封装的弹窗组件使用队列模式实现方法

在vue中封装的弹窗组件使用队列模式实现方法 前言由于业务需要，需要在封装的弹窗组件中引入定时器实现倒计时效果，但是如果同时触发两个弹窗，就会导致计时器bug，前一个弹窗的定时器没有被清除，倒计时就会错乱，此时想到的解决办法就是采用队列模式，将每一个需要的弹窗存到队列中，依次的将弹窗展示出来，同时清除定时器什么是队列队列（Queue）是先进先出（FIFO,First-In-First-Out）的线性表。在具体应用中通常用链表或者数组来实现。队列只允许在尾部进行插入操作（入... 继续阅读 >
2020
10-08

简单了解vue 插值表达式Mustache

一、本节说明用样例详细的说明插值表达式{{}}的使用，将模型数据插入到页面当中。插值表达式为什么叫Mustache(英文:八字须)呢？看看{{内容}}的两个大括号像不像八字胡子呢！二、怎么做<divid="app"style="background-color:aquamarine"><!--mustache语法中,不仅仅可以直接写变量,也可以写简单的表达式--><h2>{{firstName.length}}（使用‘.'获取属性）</h2><h2>{{firstName+lastName}}（字符串拼接）</h2><h2>{{first... 继续阅读 >
2020
10-08

详解vue中v-on事件监听指令的基本用法

一、本节说明我们在开发过程中经常需要监听用户的输入，比如：用户的点击事件、拖拽事件、键盘事件等等。这就需要用到我们下面要学习的内容v-on指令。我们通过一个简单的计数器的例子，来讲解v-on指令的使用。二、怎么做定义数据counter，用于表示计数器数字，初始值设置为0v-on:click表示当发生点击事件的时候，触发等号里面的表达式或者函数表达式counter++和counter--分别实现计数器数值的加1和减1操作语法糖：我们可... 继续阅读 >
2020
10-08

使用vue实现通过变量动态拼接url

如何通过变量动态拼接url？格式：<a:href="'index.shtml?other='+object.name"rel="externalnofollow"rel="externalnofollow">这是一个动态链接</a>需要注意的是href前要加上冒号，href最外层是双引号，中间是单引号。<divclass="tab-content"id="datatable"><divv-for="(object,index)initems"><!-格式如下，href前要加上冒号---><a:href="'index.shtml?other='+object.name"rel="externalnofollow"... 继续阅读 >
2020
10-08

解决vue里a标签值解析变量,跳转页面,前面加默认域名端口的问题

如下所示：letname='www.baidu.com/'<a:href="name"rel="externalnofollow">点击跳转到：localhost:8080/www.baidu.com/解决：写成<a:href="'https//:'+name"rel="externalnofollow">补充知识：问题：vue.jsa标签href里有变量，函数拼接问题正确格式：<a:href="'http://search.jd.com/Search?enc=utf-8&keyword='+keyWord+'&page='+Math.ceil(record.skuRank/60)+'.html'">跳转</a>注意点：1.href前面要加“：”... 继续阅读 >
2020
10-08

详谈vue中router-link和传统a链接的区别

Vue-router是伴随着Vue框架出现的路由系统，它也是公认的一种优秀的路由解决方案。在使用Vue-router时候，我们常常会使用其自带的路径跳转组件Link,通过实现跳转，这和传统的何其相似！但它们到底有什么具体的区别呢？官方中给出的解释是这样的：<router-link>比起写死的<ahref="..."rel="externalnofollow"rel="externalnofollow">会好一些，理由如下：无论是HTML5history模式还是hash模式，它的表现行为一致，所以... 继续阅读 >
2020
10-08

解决Vue router-link绑定事件不生效的问题

解决Vue router-link绑定事件不生效的问题 解决方法：加native<router-linkto="/date"@click.native="nav_click">最新</router-link>methods:{nav_click:function(){console.log(1)}}解释：1：因为它是自定义标签，根本就没有事件和方法，所以不触发，加个native就是告诉vue这个标签现在有主了它是H5标签可以加事件了。2：父组件要想在子组件监听自己的click事件就得加native，router-link是标签啊。哪里有父组件？？？？router-link其实就是一个封装好... 继续阅读 >
2020
10-08

vue tab滚动到一定高度,固定在顶部,点击tab切换不同的内容操作

vue tab滚动到一定高度,固定在顶部,点击tab切换不同的内容操作 template里面:<!--tab切换star--><ulclass="tab-list":class="{fixTitle:whether}"><li@click="curId=0":class="{'cur':curId===0}">产品特点</li><li@click="curId=1":class="{'cur':curId===1}">投保须知</li><li@click="curId=2":class="{'cur':curId===2}">理赔流程</li></ul><!--切换内容star-->设置fixTitle的样式,固定在顶部,cur是当前tab点击的颜色<divclass="tab-con"><divv-show="... 继续阅读 >
2020
10-08

vue页面跳转实现页面缓存操作

vue页面跳转实现页面缓存操作 业务需求打野在A页面野区进行一波骚操作打了一只蓝爸爸，然后点击导航栏跑到B页面的野区秀操作打了一只红爸爸，然后他又回到A野区，希望A野区还是只有一只蓝爸爸被打的状态，其他野没被偷第一步在路由里面设置需要缓存的页面第二步使用keep-alive属性包裹需要缓存的页面使用v-if判断，为true的是需要缓存的，false是不需要缓存的第三步在需要缓存的页面设置导航钩子，在A野区离开时将值设置为false保证离开当前野区不被偷第四步在... 继续阅读 >
2020
10-08

解决vue单页面 回退页面 keeplive 缓存问题

解决vue单页面 回退页面 keeplive 缓存问题 场景：项目中遇到vue点击回退从A页跳到B页，缓存A页，当B页状态修改再次返回A时，A页查询条件缓存不刷新，列表刷新A页：B页：解决方法：利用keep-alive缓存需要缓存的页面1.在app.vue中改写router-view<template><divid="app"><keep-alive><router-viewv-if="$route.meta.keepAlive"><!--这里是会被缓存的视图组件，比如page1,page2--></router-view></keep-alive><router-viewv-if="!$route.meta... 继续阅读 >
2020
10-08

vue移动端弹起蒙层滑动禁止底部滑动操作

解决办法在蒙层弹起的时候将body设置为fixed定位在蒙层消失的时候将body恢复原位popupVisible(newValue){if(newValue){document.body.style.position='fixed';document.body.style.width='100%';document.body.style.height='100%';}else{document.body.style.position='static';document.body.style.height='auto';}},设置为fixed的时候整个页面会恢复原位，如果需要把位置开始scrollY... 继续阅读 >
2020
10-08

在vue中实现禁止屏幕滚动,禁止屏幕滑动

在vue中实现禁止屏幕滚动,禁止屏幕滑动 今天写了一个Vue弹层组件，用来全屏查看图片的，大概是下面这么一个效果：其中背景是透明色的，但是弹出这个组件时手指滑动、鼠标滚轮滑动，底部页面是会动。作为自己开发的一个常用的组件，这种bug当然是要解决的。于是学艺不精的我在网上找了蛮久的，看了不少博客，看了不少观点和方法。终于找到了一个最简单、最实在的方法，代码如下：<divclass="magnify"v-show="isShow"@click.self="hide"@touchmove.prevent@mousewheel... 继续阅读 >
2020
10-08

vue 弹出遮罩层样式实例

以前做遮罩层都是写最小高度来占满屏，但是总会出现问题，也没改变，今天一个人在交流群上问这个时，看到一个回答解决了我这一个bug，学到了，现在记录一下样式。<divclass='popContainer'></div>div.popContainer{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.3);}这样遮罩层就会占满屏了补充知识：vue锁定蒙版不让里面页面滑动其实就是一句代码，在你的蒙版里面添加一句@touchmo... 继续阅读 >