分类：Vue

2021
07-26

LRU算法在Vue内置组件keep-alive中的使用

目录vue的keep-alive内置组件的使用也是使用了改算法，源码如下：实现一个自己的LRU算法另一种vue的keep-alive内置组件的使用也是使用了改算法，源码如下：exportdefault{name:"keep-alive",//抽象组件属性,它在组件实例建立父子关系的时候会被忽略,发生在initLifecycle的过程中abstract:true,props:{//被缓存组件include:patternTypes,//不被缓存组件exclude:patternTypes,//指定缓... 继续阅读 >
2021
07-26

vue实现水波涟漪效果的点击反馈指令

目录水波效果来看实现定制一个水波纹默认样式计算水波纹的位置和直径鼠标按下时创建水波鼠标抬起时销毁水波通过指令binding去扩展你的水波选项写在最后水波效果当用户点击时，会以点击中心为圆心产生一个水波扩散的涟漪效果，适用各个场景，美观又不浮夸，关键是可以给用户带来很直观的反馈。来看实现首先这里基于Vue3自定义指令进行封装，Vue3的自定义指令跟Vue2相比变动不是很大，。我们的目标是完成一个水波指令的基本原型，这... 继续阅读 >
2021
07-22

vue 实现上传组件

目录1.介绍2.思路文件上传的两种实现方式3.生命周期4.代码草稿5.具体实现1.介绍效果如下图 2.思路文件上传的两种实现方式1.From形式<formmethod="post"enctype="multipart/from-data"action="api/upload"><inputtype="filename="file"><buttontype="submit">Submit</button></form>form的method属性指定为"post"请求，通过HTML表单发送数据给服务器，并返回服务器的修改结果，在这种情况下Content-Type是通... 继续阅读 >
2021
07-22

vue基于Teleport实现Modal组件

目录1.认识Teleport2.Teleport的基本用法3.第一步优化4.第二步优化5.实现Modal组件1.认识Teleport像我们如果写Modal组件、Message组件、Loading组件这种全局式组件，没有Teleport的话，将它们引入一个.vue文件中，则他们的HTML结构会被添加到组件模板中，这是不够完美的。没有Teleport有Teleport下面就实战介绍一下如何用Teleport开发Modal组件2.Teleport的基本用法Teleport的写法十分简单，只需要用<Teleport></Teleport... 继续阅读 >
2021
07-22

vue自定义弹框效果（确认框、提示框）

vue自定义弹框效果（确认框、提示框） 本文实例为大家分享了vue自定义弹框效果的具体代码，供大家参考，具体内容如下1、自定义确认框和提示框根据传入的type来判断是确认框或提示框<template><transitionname="confirm-fade"><divv-if="isShowConfirm"class="my-confirm"@click.stop="clickFun('clickCancel')"><divclass="confirm-content-wrap"@click.stop><h3class="my-confirm-title"v-show="titleText!=''">{{titleText}}</h3>... 继续阅读 >
2021
07-22

Vue中ElementUI分页组件Pagination的使用方法

Vue中ElementUI分页组件Pagination的使用方法 Vue中ElementUI分页组件Pagination的使用，供大家参考，具体内容如下一、概要ElementUI提供了el-pagination组件，只要配置相应得参数和事件，即可实现分页。二、实现1、基本用法<divclass="pagination"><el-paginationbackgroundlayout="total,sizes,prev,pager,next,jumper":current-page="tablePage.pageNum":page-size="tablePage.pageSize":page-sizes="pageSizes":total="t... 继续阅读 >
2021
07-22

Vue必学知识点之forEach()的使用

前言在前端开发中，经常会遇到一些通过遍历循环来获取想要的内容的情形，而且这种情形在开发中无所不在，那么本篇博文就来分享一个比较常用又经典的知识点：forEach()的使用。forEach()是前端开发中操作数组的一种方法，主要功能是遍历数组，其实就是for循环的升级版，该语句需要有一个回调函数作为参数。回调函数的形参依次为：1、value：遍历数组的内容；2、index：对应数组的索引，3、array：数组自身。在Vue项目中，标签... 继续阅读 >
2021
07-22

Vue CLI中模式与环境变量的深入详解

前言在实际项目的开发中，我们一般会经历项目的开发阶段、测试阶段和最终上线阶段，每一个阶段对于项目代码的要求可能都不尽相同，那么我们如何能够游刃有余的在不同阶段下使我们的项目呈现不同的效果，使用不同的功能呢？这里就需要引入环境的概念。官方文档中模式和环境变量说明一般一个项目都会有以下3种环境：开发环境（开发阶段，本地开发版本，一般会使用一些调试工具或额外的辅助功能）；测试环境（测试阶段，上... 继续阅读 >
2021
07-22

ant desing vue table 实现可伸缩列的完整例子

ant desing vue table 实现可伸缩列的完整例子 完美解决ant-design-vuetable可伸缩列问题，实现在固定列，多级表头情况下的伸缩列这个东西本来以为手到擒来，因为在官网中已经给出了例子，但是果然还是不能太信任官方，官方给出来的只能是最基础的，然后我们正常的使用场景往往要复杂很多，比如固定列，比如固定表头，比如自带checkbox列，比如多级表头的情况。要想满足这些情况往往需要自行开发。1.首先蒋官方的例子copy下来，居然拖不动。对照了一下官方，css居然都不一样... 继续阅读 >
2021
07-21

springboot+VUE实现登录注册

springboot+VUE实现登录注册 本文实例为大家分享了springboot+VUE实现登录注册的具体代码，供大家参考，具体内容如下一、springBoot创建springBoot项目分为三个包，分别为controller，service，dao以及resource目录下的xml文件。UserController.javapackagespringbootmybatis.controller;importorg.springframework.web.bind.annotation.CrossOrigin;importorg.springframework.web.bind.annotation.PostMapping;importorg.springframework.web.bind.anno... 继续阅读 >
2021
07-21

vue+springboot实现登录验证码

vue+springboot实现登录验证码 本文实例为大家分享了vue+springboot实现登录验证码的具体代码，供大家参考，具体内容如下先看效果图在login页面添加验证码html在后端pom文件添加kaptcha依赖<dependency><groupId>com.github.penggle</groupId><artifactId>kaptcha</artifactId><version>2.3.2</version></dependency>创建KaptchaConfig工具类packagecom.brilliance.module.system.controller.util;importcom.google.code.kaptcha.impl.Default... 继续阅读 >
2021
07-21

vue+spring boot实现校验码功能

vue+spring boot实现校验码功能 本文实例为大家分享了vue+springboot实现校验码功能的具体代码，供大家参考，具体内容如下用vue写了一个校验码来玩玩，样子如下：1.img标签<img="height:40px;width:100px;cursor:pointer;"ref="imgIdentifyingCode":src="selectedLogoPicture.imgUrl"class="logoImg">2.js代码/***获取校验码*/getIdentifyingCode(){letselft=this;//letpic=this.$refs.imgIdentifyi... 继续阅读 >
2021
07-21

vue-cropper组件实现图片切割上传

本文实例为大家分享了vue-cropper组件实现图片切割上传的具体代码，供大家参考，具体内容如下这几日，等来了些空闲，用vue和springboot实践一次头像上传，因此记下了，望将来的开发有所帮助。vue-cropper在vue中的引入1、组件内引入import{VueCropper}from'vue-cropper'components:{VueCropper,},2、全局引入在main.js中配置如下代码importVueCropperfrom'vue-cropper'Vue.use(VueCropper)3、使用示例vue文件<templ... 继续阅读 >
2021
07-21

vue-cropper插件实现图片截取上传组件封装

vue-cropper插件实现图片截取上传组件封装 基于vue-cropper插件实现图片截取上传组件封装的具体代码，供大家参考，具体内容如下需求场景：后台开发需要上传图片并进行相应比例尺寸图片的截取,本组件开发采用AntDesignVue组件库搭配vue-cropper插件进行封装实现如下html<template><div><a-uploadname="avatar"list-type="picture-card"class="avatar-uploader":show-upload-list="false":custom-request="customRequest":before... 继续阅读 >
2021
07-17

Vue使用axios图片上传遇到的问题

目录FormData是个什么鬼？在vue和axios的配合下实战一波append()set()delete()get()和getAll()has()FormData是个什么鬼？经过多方搜索调查了解，这个神奇的东西是XMLHttpRequestLevel2新增的一个对象，于2008年2月提出，可以利用它来提交表单、模拟表单提交，当然最大的优势就是可以上传二进制文件，可以把所有表单元素的name与value组成一个queryString，提交到后台。划重点：可以把所有表单元素的name与value组成一个query... 继续阅读 >