分类：vue

2021
10-01

VUE 无限层级树形数据结构显示的实现

目录组件递归调用使用render方法在做项目中，会遇到一些树形的数据结构，常用在左侧菜单导航，或者评论引用等地方，这种数据结构有个特点是不知道它会嵌套多少层，所以用template去展示这样的数据时就有点棘手，这篇文章梳理两种展示这种数据结构的方法。文章中用到的数据是下面这个：mainData:{value:"root",children:[{value:"层级1-1",children:[{value:"层级2-1",children:[{value:"层... 继续阅读 >

2021
09-30

Vue+SpringBoot实现支付宝沙箱支付的示例代码

首先去下载支付宝沙箱的一系列东西，具体的配置什么的我就不说了，有很多博客都讲了，还有蚂蚁金服官方也说的很详细，我就直接说怎么样把后端的支付页面显示到Vue前端来：在你配置好AlipayConfig这个文件后，就可以写前端的逻辑了，前端是采用支付宝的页面如下：下面展示一些内联代码片。/*以下是支付确认html*/<divstyle="text=#000000bgColor=#ffffffleftMargin=0topMargin=4"><headerclass="am-header">... 继续阅读 >

2021
09-30

vue 如何设置背景颜色及透明度

背景颜色及透明度设置如上图，如果是第一张图片，需要在左上角加上灰色背景，白色“封面”字样，背景色需要有透明度。首先，需要知道rgba()函数。rgba()函数使用红(R)、绿(G)、蓝(B)、透明度(A)的叠加来生成各式各样的颜色。RGBA即红色、绿色、蓝色、透明度（英语：Red,Green,Blue、Alpha）。红色（R）0到255间的整数，代表颜色中的红色成分。。绿色（G）0到255间的整数，代表颜色中的绿色成分。蓝色（B）0... 继续阅读 >

2021
09-29

解析如何自动化生成vue组件文档

目录一、现状二、社区解决方案2.1、业务梳理三、技术方案3.1、Vue文件解析3.2、信息提取3.2.1、可直接获取的信息3.2.2、需要约定的信息四、总结五、展望一、现状Vue框架在前端开发中应用广泛，当一个多人开发的Vue项目经过长期维护之后往往会沉淀出很多的公共组件，这个时候经常会出现一个人开发了一个组件而其他维护者或新接手的人却不知道这个组件是做什么的、该怎么用，还必须得再去翻看源码，或者压根就没注意到这个组件的存... 继续阅读 >

2021
09-29

分析Vue指令实现原理

目录一、基本使用二、指令工作原理2.1、初始化2.2、模板编译2.3、生成渲染方法2.4、生成VNode2.5、生成真实DOM三、注意事项四、小结一、基本使用官网案例：<divid='app'><inputtype="text"v-model="inputValue"v-focus></div><script>Vue.directive('focus',{//第一次绑定元素时调用bind(){console.log('bind')},//当被绑定的元素插入到DOM中时……inserted:function(el){conso... 继续阅读 >

2021
09-29

浅谈Vue插槽实现原理

目录一、样例代码二、透过现象看本质三、实现原理四、父组件编译阶段五、父组件生成渲染方法六、父组件生成VNode七、子组件状态初始化八、子组件编译阶段九、子组件生成渲染方法十、使用技巧10.1、具名插槽10.2、作用域插槽一、样例代码<!--子组件comA--><template><divclass='demo'><slot><slot><slotname='test'></slot><slotname='scopedSlots'test='demo'></slot></div></template><!--父组件--><comA... 继续阅读 >

2021
09-28

vue+element ui实现锚点定位

本文实例为大家分享了vue+elementui实现锚点定位的具体代码，供大家参考，具体内容如下vue<el-row:gutter="20"><el-col:span="3"><!--导航选择事件--><el-menu:default-active="activeStep"@select="jump"><el-menu-itemv-for="(item,index)inmenuData":index="`${index}`":key="item.subjectId"><iclass="el-icon-menu"></i><spanslot="title">{{item.subjectName}}</span></el-... 继续阅读 >

2021
09-28

vue实现锚点定位功能

本文实例为大家分享了vue实现锚点定位的具体代码，供大家参考，具体内容如下这里主要是实现了一个简单的滚动触发锚点高亮，以及点击锚点触发滚动的功能如果是获取浏览器的滚动高度，各个浏览器有所差异，使用以下几种方式：Chrome：document.body.scrollTopFirefox：document.documentElement.scrollTopSafari：window.pageYOffset我这里是局部元素滚动，因此稍有差异。先附上html及css代码块：scroll-content为滚动区域，oper... 继续阅读 >

2021
09-28

vue如何根据url下载非同源文件

一般情况下，我们根据url下载文件时可以有以下两种方案：1.window.open(url)2.<a:href="url"rel="externalnofollow"download="文件名称"/>但是我们在开发过程中，有时会遇到后端返回的文件地址和我们的网站不是同源的情况下，使用以上两种方案下载图片、pdf等文件，浏览器会直接打开，而不是下载。下面这种方法就可以解决此类情况：下载文件函数封装：（views/util/index.js）importaxiosfrom"axios";//下载文件（可解决... 继续阅读 >

2021
09-28

vue.js根据图片url进行图片下载

最近在做一个前端vue.js对接的功能模块时，需要实现一个下载图片的功能，后台返回来的是一串图片url，试了很多种方法，发现点击下载时出来的效果，都是跳到一个新的图片网页，后来经过一番琢磨，终于解决了这个问题：这是后台返回来的json数据（防止泄露重要信息IP地址打码了）：我在html里的引用是这样的：<a@click="downCom">下载执照<iclass="icon-down"></i></a>vue.js方法... 继续阅读 >

2021
09-24

Vue局部组件数据共享Vue.observable()的使用

随着组件的细化，就会遇到多组件状态共享的情况，Vuex当然可以解决这类问题，不过就像Vuex官方文档所说的，如果应用不够大，为避免代码繁琐冗余，最好不要使用它，今天我们介绍的是vue.js2.6新增加的ObservableAPI，通过使用这个api我们可以应对一些简单的跨组件数据状态共享的情况。创建store对象首先创建一个store.js，包含一个store和一个mutations，分别用来指向数据和处理方法。//store.jsimportVuefrom'vue'... 继续阅读 >

2021
09-24

如何在Vue 3中扩展Vue Router链接详解

前言<router-link>标签是一个很好的工具，可以在你的Vue应用程序的不同页面之间进行导航，但当导航到一个外部链接时，它不是一个工具，为此，你应该使用一个普通的<a>标签。也许这只是我的问题，但很多时候，我都懒得去理会这其中的差别。其他时候，链接可能是动态的，也就是说，来自数据库或一些用户提供的数据源。在这种情况下，你根本不知道这个链接是外部的还是内部的，而且在每个可能使用这个链接的地方手动做V-if是多么痛... 继续阅读 >

2021
09-24

vue+rem自定义轮播图效果

使用vue+rem自定义轮播图的实现，供大家参考，具体内容如下单位使用rem进行页面布局，在动态计算轮播图整体宽度时，需要把px转换成rem，挺麻烦的。效果如下：如果当前图片不是第一张和最后一张，刚好可以看到当前图片上一张和下一张的一部分。具体代码如下<template><divclass="constructionUp"><divclass="pub-hd"><h2>施工升级包</h2><h3>额外服务项目</h3></div><divid... 继续阅读 >

2021
09-24

Vue 大文件上传和断点续传的实现

目录文件上传的2套方案基于文件流（form-data）客户端把文件转换为base64大文件上传获取到文件对象并转成ArrayBuffer对象创建切片发送请求所有切片发送成功后断点续传代码汇总OneMoreThingFormDataFormData.append()文件上传的2套方案基于文件流（form-data）element-ui框架的上传组件，就是默认基于文件流的。数据格式：form-data；传递的数据：file文件流信息；filename文件名字客户端把文件转换为base64... 继续阅读 >

2021
09-24

vue3.0+vite2实现动态异步组件懒加载

目录创建一个vite项目创建组件创建一个vite项目性能决定成败;vite确实快；cmd命令行(默认你已经安装了node&npm)，执行npminit@vitejs/appvue-study?--templatevue；cd至vue-study，npminstall(安装依赖);npmrundev（启动项目）；创建组件新建一个目录为pages，pages下面再新建一个目录contents，contens下面可以新建具体的组件目录页面，此时目录结构为App.vue<template><p@click="onChangeContents('./pages/conte... 继续阅读 >

2021
09-24

Vue+ssh框架实现在线聊天

本文实例为大家分享了Vue+ssh框架实现在线聊天的具体代码，供大家参考，具体内容如下效果图核心部分websocket编程向后台发送消息<template><el-container><el-header></el-header><el-main><divclass="cht"><divv-for="(d,index)inmycontent":key="index"><my:message="d.mess":time="d.time":bl="d.bl"></my></div></div><divclass="smess"><el-row><el-col:span="18"><el-input... 继续阅读 >