分类：VUE

2021
07-01

Vue Element前端应用开发之树列表组件

目录1、常规树列表控件的使用2、下拉框树列表的处理1、常规树列表控件的使用众所周知，一般界面很多情况涉及到树列表的处理，如类型展示，如果是一层的，可以用下拉列表代替，如果是多个层级的，采用树控件展示会更加直观。在Element里面也有一个el-tree的控件，如下所示，这里主要对它的各种属性和方法进行介绍。简单的代码如下所示<el-tree:data="data"@node-click="handleNodeClick"></el-tree>主要在script部分里面指定它的... 继续阅读 >
2021
06-29

Vue Element前端应用开发之常规的JS处理函数

目录1、常规集合的filter、map、reduce处理方法2、递归处理3、forEach遍历集合处理4、Object.assign赋值方法5、slice()方法1、常规集合的filter、map、reduce处理方法filter函数的主要用途是对数组元素进行过滤，并返回一个符合条件的元素的数组constnums=[10,20,30,111,222,333]letnewNums=nums.filter(function(n){returnn<100})输出：[10,20,30]map函数是对数组每个元素的映射操作，并返回一个新数组，原数组不会改变... 继续阅读 >
2021
06-29

Vue Element前端应用开发之常规Element界面组件

目录1、列表界面和其他模块展示处理2、常规界面组件的使用1）表单和表单项、单文本框2）下拉列表控件的绑定3）图片展示4）第三方扩展控件3、自定义组件的创建使用1、列表界面和其他模块展示处理常规的列表展示界面，一般分为几个区域，一个是查询区域，一个是列表展示区域，一个是底部的分页组件区域。查询区域主要针对常规条件进行布局，以及增加一些全局或者批量的操作，如导入、导出、添加、批量添加、批量删除等按钮；而其中主... 继续阅读 >
2021
06-28

Vue transition实现点赞动画效果的示例

效果一览爱心效果材料：爱心图标两个，没有我这种icon组件的用png图片代替<transition:name="isLike?'zoom':''"mode="out-in"><!--爱心图标--><icondata="@icon/like.svg"color="#FF0000"v-if="isLike"key="like"></icon><icondata="@icon/unlike.svg"color="#333333"v-elsekey="unlike"></icon></transition>因为在点赞时有动画，取消点赞不要动画，所以transition的name属性需要根据... 继续阅读 >
2021
06-28

Vue transition实现点赞动画效果的示例

效果一览爱心效果材料：爱心图标两个，没有我这种icon组件的用png图片代替<transition:name="isLike?'zoom':''"mode="out-in"><!--爱心图标--><icondata="@icon/like.svg"color="#FF0000"v-if="isLike"key="like"></icon><icondata="@icon/unlike.svg"color="#333333"v-elsekey="unlike"></icon></transition>因为在点赞时有动画，取消点赞不要动画，所以transition的name属性需要根据... 继续阅读 >
2021
06-28

Vue Element前端应用开发之表格列表展示

1、列表查询界面效果在介绍任何代码处理逻辑之前，我们先来做一个感官的认识，贴上一个效果图，在逐一介绍其中处理的步骤和注意事项。常规的列表展示界面，一般分为几个区域，一个是查询区域，一个是列表展示区域，一个是底部的分页组件区域。查询区域主要针对常规条件进行布局，以及增加一些全局或者批量的操作，如导入、导出、添加、批量添加、批量删除等按钮；而其中主体的列表展示区域，是相对比较复杂一点的地方，需要对各项... 继续阅读 >
2021
06-28

如何使用vue开发公众号网页

项目背景主要就是一个h5页面，涉及的功能不是很难，主要很久没有开发公众号，对整个开发步骤有些生疏。其中包括对微信sdk的调用方式、用户的微信授权和sdk的接入等。主要围绕开发步骤进行梳理。开始因为是一个h5页面，整体而言项目不大，然后在项目技术选型的时候确定使用vue框架进行开发。使用vue开发h5，个人整体感觉还是效率比较高的。在ui库方面选择的是vant库，组件整体而言还是不错的，支持自定义主题方便样式自定义比较适合... 继续阅读 >
2021
06-23

Vue Element前端应用开发之获取后端数据

概述在前面随笔《循序渐进VUE+Element前端应用开发之动态菜单和路由的关联处理》中介绍了在Vue+Element整合框架中，实现了动态菜单和动态路由的处理，从而可以根据用户角色对应的菜单实现本地路由的过滤和绑定，菜单顺利弄好了，就需要进一步开发页面功能了，本篇随笔介绍一个案例，通过获取后端数据后，进行产品信息页面的处理。1、后端数据的获取处理前后端的边界则非常清晰，前端可以在通过网络获取对应的JSON就可以构建前端... 继续阅读 >
2021
06-23

Vue Element前端应用开发之动态菜单和路由的关联处理

概述在我开发的很多系统里面，包括Winform混合框架、Bootstrap开发框架等系列产品中，我都倾向于动态配置菜单，并管理对应角色的菜单权限和页面权限，实现系统对用户权限的控制，菜单一般包括有名称、图标、顺序、URL连接等相关信息，对于VUE+Element前端应用来说，应该原理上差不多，本篇随笔介绍结合服务端的动态菜单配置和本地路由的关联处理，实现动态菜单的维护和展示的处理。1、菜单和路由的处理过程由于Vue前端还需要引入... 继续阅读 >
2021
06-23

Vue Element前端应用开发之Vuex中的API Store View的使用

概述在我们开发Vue应用的时候，很多时候需要记录一些变量的内容，这些可以用来做界面状态的承载，也可以作为页面间交换数据的处理，处理这些内容可以归为Vuex的状态控制。例如我们往往前端需要访问后端数据，一般是通过封装的WebAPI调用获取数据，而使用Store模式来处理相关的数据或者状态的变化，而视图View主要就是界面的展示处理。本篇随笔主要介绍如何整合这三者之间的关系，实现数据的获取、处理、展示等逻辑操作。Vuex是一... 继续阅读 >
2021
06-23

vue使用echarts词云图的实战记录

echarts词云图是echarts的一个扩展https://echarts.apache.org/zh/download-extension.html1.安装依赖 npminstallecharts npminstallecharts-wordcloud2.main.js引入importechartsfrom'echarts';Vue.prototype.$echarts=echarts3.在用到的组件中引入扩展<script>import"echarts-wordcloud/dist/echarts-wordcloud";import"echarts-wordcloud/dist/echarts-wordcloud.min"; </script>4.配置<template>... 继续阅读 >
2021
06-23

Vue Element前端应用开发之开发环境的准备工作

概述之前一直采用VS进行各种前端后端的开发，随着项目的需要，正逐步融合纯前端的开发模式，开始主要选型为Vue+Element进行BS前端的开发，后续会进一步整合Vue+AntDesign的界面套件，作为两种不同界面框架的展现方式。采用Vue+Element的前端开发和之前的开发模式需要有较大的转变，以及需要接触更多的相关知识，本系列随笔基于循序渐进的学习研究方式，对使用Vue+Element这种前端开发的各个方面进行一个完整的介绍，并... 继续阅读 >
2021
06-23

如何处理vue router 路由传参刷新页面参数丢失

目录概述方法一：通过params传参方法二：通过query传参方法三：使用props配合组件路由解耦概述常见场景：点击列表的详情，跳转到详情内页，在内页根据传递的参数获取详情数据。路由传参一般有如下几种方式，下面主要介编程式导航router.push的传参方式：方法一：通过params传参路由配置如下：{path:'/detail/:id',//若id后面加?代表这个参数是可选的name:'detail',component:Detail}通过$route... 继续阅读 >
2021
06-23

vue中如何下载excel流文件及设置下载文件名

概述导出excel需求，当点击下载模板或下载反馈结果，axios发起后端接口请求，返回的数据获取response时出现乱码，如图：现总结如下几种处理方法。1、通过url下载即后端提供文件的地址，直接使用浏览器去下载通过window.location.href=文件路径下载window.location.href=`${location.origin}/operation/ruleImport/template`通过window.open(url,'_blank')window.open(`${location.origin}/operation/ruleImport/template... 继续阅读 >
2021
06-23

详解Vue ElementUI手动上传excel文件到服务器

目录概述属性设置处理逻辑概述具体需求场景如下：选择excel文件后，需要把导入的excel文件手动上传到后台服务器，并将导入成功后的统计结果显示出来。官网也有手动上传的示例，通过action="url"传入地址的方式，但在实际项目中请求需要自己配置，下面具体说明实现的方法。说明：在上传文件到展示统计结果，我们后端给了两个接口：首先调用文件上传接口，上传成功后，根据后端返回的mark再调用统计结果接口。属性设置.vue文件<el-... 继续阅读 >
2021
06-23

如何在Vue项目中使用axios请求

在实际的项目中，和后台的数据交互是少不了的，我通常使用的是axios库，所以以下示例也是以axios为基础来进行封装的。1、安装首先是npm安装axios很简单：npminstallaxios2、没有封装存在的问题如果在没有封装接口的项目中，在文件中随处可以看到如下的接口调用方法：this.$axios.post("/user/add",{params:{name:this.name,age:this.age}}).then(res=>{console.log(res)}).then(err=... 继续阅读 >