分类：VUE

2020
09-29

Vue 自适应高度表格的实现方法

前言示例版本为Element-ui2.13.1+Vue2.6.11本人是做后台开发的，由于公司业务要求需要将前后台模块进行分离，两年前选择使用vue-element-admin项目进行前台的开发，该框架集成了很多功能，特别适合对Vue很陌生的新手，公司项目组成员接受程度普遍较高。在使用过程中表格是必不可少的一个控件，用于展示数据，单页数据量过多就会导致浏览器自动生成右侧滚动条。如果页面有头部信息或查询按钮，移动滚动条后会遮挡住这些操... 继续阅读 >

2020
09-29

vue-socket.io接收不到数据问题的解决方法

最近公司的一个vue项目用到了vue-socket.io来处理socket数据传输，之前用过socket.io-client，现在知道vue-socket.io是基于socket.io-client的一层封装，将socket挂于全局从而更方便的书写。于是把代码拉取下来运行：什么鬼，同样的代码为什么我的就接收不到数据，自己新建一个测试一下吧！先用express和socket.io搭个小socket服务器：letexpress=require('express');letapp=express();letserver=require('http').Server(a... 继续阅读 >

2020
09-29

Vue关于组件化开发知识点详解

全局组件注册Vue.component('first-component',{data:function(){return{count:0}},template:'<button@click="count++">{{count}}</button>'})data必须是一个函数组件模板内容必须是单个根元素组件模板内容可以是模板字符串全局组件可以嵌套全局组件组件命名方式Vue.component('first-component',{/*....*/})//普通标签模板中不能使用驼峰,只能在template中使用驼峰方式Vue.component('firstComponent',... 继续阅读 >

2020
09-29

Vue 中获取当前时间并实时刷新的实现代码

1.实现代码<template><div>{{nowDate}}{{nowWeek}}{{nowTime}}</div></template><script>exportdefault{data(){return{nowDate:"",//当前日期nowTime:"",//当前时间nowWeek:""//当前星期}},methods:{dealWithTime(data){//获取当前时间letformatDateTime;letY=data.getFullYear();letM=data.getMonth()+1;letD=data.getDate();letH=data.getHours();l... 继续阅读 >

2020
09-29

Vue 中如何将函数作为 props 传递给组件的实现代码

本文GitHubhttps://github.com/qq44924588...上已经收录，更多往期高赞文章的分类，也整理了很多我的文档，和教程资料。欢迎Star和完善，大家面试可以参照考点复习，希望我们一起有点东西。Vue新手经常问的一个常见问题。可以将字符串、数组、数字和对象作为props传递。但是你能把一个函数当作一个props来传递吗?虽然可以将函数作为props传递，但这种方式不好。相反，Vue有一个专门为解决这问题而设计的功能，接下来，我... 继续阅读 >

2020
09-29

vue项目中使用bpmn-自定义platter的示例代码

内容概述本系列“vue项目中使用bpmn-xxxx”分为七篇，均为自己使用过程中用到的实例，手工原创，目前陆续更新中。主要包括vue项目中bpmn使用实例、应用技巧、基本知识点总结和需要注意事项，具有一定的参考价值，需要的朋友可以参考一下。如果转载或通过爬虫直接爬的，格式特别丑，请来原创看：我是作者原文前情提要经过前四篇的学习，我们能够实现bpmn基本绘图、预览、为节点加事件加颜色等效果，这一篇我们来说，如何自定义左侧... 继续阅读 >

2020
09-29

Vue实现图片轮播组件思路及实例解析

1、先看效果：熟悉的图片轮播，只要是个网站，百分之90以上会有个图片轮播。我认为使用图片轮播。第一可以给人以一种美观的感受，而不会显得网站那么呆板，第二可以增加显示内容，同样的区域可以显示更多内容。2、每学一个新东西，图片轮播都是很好的练手案例，而且，也很实用。   3、基本要求：页面加载，自动播放。鼠标悬停，停止播放。鼠标离开，继续播放点击左右箭头切换上一张，下一张图... 继续阅读 >

2020
09-28

Vue.js获取手机系统型号、版本、浏览器类型的示例代码

1.index.html引入<scriptsrc="http://code.jquery.com/jquery-1.11.1.min.js"></script><scriptsrc="https://cdn.jsdelivr.net/npm/mobile-detect@1.4.4/mobile-detect.min.js"></script>2.直接用<script>//判断数组中是否包含某字符串Array.prototype.contains=function(needle){for(iinthis){if(this[i].indexOf(needle)>0)returni;}return-1;}vardevice_type=navigator.u... 继续阅读 >

2020
09-28

vue总线机制(bus)知识点详解

vue中非父子组件之间通信除了使用vuex，也可以通过bus总线，两者适用场景不同。bus适合小项目、数据被更少组件使用的项目，对于中大型项目数据在很多组件之间使用的情况bus就不太适用了。bus其实就是一个发布订阅模式，利用vue的自定义事件机制，在触发的地方通过$emit向外发布一个事件,在需要监听的页面，通过$on监听事件。vuex适用中大型项目、数据在多组件之间公用的情况。简单介绍两者的区别之后，就要介绍下我在一个项目中... 继续阅读 >

2020
09-28

vue路由跳转传递参数的方式总结

日常业务中，路由跳转的同时传递参数是比较常见的，传参的方式有三种：1）通过动态路由方式//路由配置文件中配置动态路由{path:'/detail/:id',name:'Detail',component:Detail}//跳转时页面varid=1;this.$router.push('/detail/'+id)//跳转后页面获取参数this.$route.params.id2）通过query属性传值//路由配置文件中{path:'/detail',name:'Detail',component:Detail}//跳转时页面this.$router.... 继续阅读 >

2020
09-28

vue滑动吸顶及锚点定位的示例代码

在上篇文章给大家介绍了vue实现吸顶、锚点和滚动高亮按钮效果 感兴趣的朋友可以点击查看https://www.jb51.net/article/172365.htm今天给大家继续分享vue滑动吸顶及锚点定位的代码，具体内容如下所示：Vue项目中需要实现滑动吸顶以及锚点定位功能。template代码如下:<template><divclass="main"><divid='menu'><ul><liv-for="itemintabList"@click='clickTab'></li></ul></div><divid='div1'></div><divid=... 继续阅读 >

2020
09-28

Vue列表如何实现滚动到指定位置样式改变效果

这个需求大概是这样子：我做的一个聊天Demo，在搜索框搜索用户，可以滚动到指定的用户。然后成选中状态。这是目前状态，我搜索南宫仆射，想要下面的用户列表直接滚动到南宫仆射并改变CSS样式。查询之后是这个子：嗯，我的思路：在搜索框搜索到用户之后会返回一个用户对象，之后会调用列表的点击事件，改变CSS样式及做一些聊天的逻辑。然后需要获取到列表对应的id值，直接使用document.getElementById(it).scrollIntoView();具体... 继续阅读 >

2020
09-28

Vue实现PC端靠边悬浮球的代码

我想把退出登录的按钮做成一个悬浮球的样子，带动画的那种。实现是这个样子：手边没有球形图。随便找一个，功能这里演示的为单机悬浮球注销登录嗯，具体代码：<div:class="['meun-switchanimatedflex-row',uploadflag?'activerubberBandoff':'leavejello']"@mouseleave="uploadleave"@mouseenter="uploadenter"v-if="uploadShow"@click.stop="logout"><img:src="requ... 继续阅读 >

2020
09-28

有关vue 开发钉钉 H5 微应用 dd.ready() 不执行问题及快速解决方案

最近在做钉钉的免登，npm安装好dingtalk-jsapi后，执行dd.ready()怎么都不生效。但是判断当前环境是不是‘notInDingTalk'时又是有效的。花了很长时间，一直找不到原因。后来无意中发现别人的代码似乎跟我有一点差异，于是抱着死马当活马医的心态试试，结果真的有效。废话不多说，原因在于从官网复制的代码里的匿名函数function(){}，在vue开发里是无效的，需要改成箭头函数()=>{}修改之前的：这个‘this.userCode'是临... 继续阅读 >

2020
09-28

使用vue cli4.x搭建vue项目的过程详解

cli-4.x已经发布好久了，斟酌了好久，还是决定将原来的cli-2.x升级到4.x,详细的升级过程可以戳这里1、创建项目vuecreatevuetest 2、选择配置方式?Pleasepickapreset:(Usearrowkeys)☜(使用箭头键)>default(babel,eslint)☜(使用默认的配置，会安装babel和eslint)Manuallyselectfeatures☜(手动配置)这里我选择的是手动配置（使用↑↓箭头切换，Enter确认，箭头切换失效可以戳这里... 继续阅读 >

2020
09-28

Spring Boot + Vue 前后端分离项目如何踢掉已登录用户

上篇文章中，我们讲了在SpringSecurity中如何踢掉前一个登录用户，或者禁止用户二次登录，通过一个简单的案例，实现了我们想要的效果。但是有一个不太完美的地方，就是我们的用户是配置在内存中的用户，我们没有将用户放到数据库中去。正常情况下，松哥在SpringSecurity系列中讲的其他配置，大家只需要参考SpringSecurity+SpringDataJpa强强联手，安全管理只有更简单！一文，将数据切换为数据库中的数据即可。本文是本系... 继续阅读 >