分类：Vue

2021
03-02

vue 使用饿了么UI仿写teambition的筛选功能

问题描述teambition软件是企业办公协同软件，相信部分朋友的公司应该用过这款软件。里面的筛选功能挺有意思，本篇文章，就是仿写其功能。我们先看一下最终做出来的效果图大致的功能效果有如下需求一：常用筛选条件放在上面直接看到，不常用筛选条件放在添加筛选条件里面需求二：筛选的方式有输入框筛选、下拉框筛选、时间选择器筛选等需求三：如果觉得常用筛选条件比较多的话，可以鼠标移入点击删除，使之进入不常用的筛选条... 继续阅读 >

2021
03-02

vue 使用 v-model 双向绑定父子组件的值遇见的问题及解决方案

场景今天在使用v-model进行组件双向数据绑定的时候遇到了一个奇怪的问题，网页本身运行正常，浏览器一直出现警告信息。[Vuewarn]:Avoidmutatingapropdirectlysincethevaluewillbeoverwrittenwhenevertheparentcomponentre-renders.Instead,useadataorcomputedpropertybasedontheprop'svalue.Propbeingmutated:"value"引发这个警告的是一个自定义组件RxSelectVue.component("RxSelect",{mode... 继续阅读 >

2021
02-26

Vue SPA 首屏优化方案

前言常规vue项目打包后访问，返回一个只包含div的html，其他内容块都是通过js动态生成的。存在两个比较大的问题：不利于seo首屏加载页慢，用户体验不好本文是自己根据项目经验总结的方案，如有不足，欢迎指出~优化SSRSSR(Server-SideRendering)即服务端渲染，把vue组件在服务器端渲染为组装好的HTML字符串，然后将它们直接发送到浏览器，最后需要将这些静态标记混合在客户端上完全可交互的应用程序。使用ssr... 继续阅读 >

2021
02-26

vue 动态添加的路由页面刷新时失效的原因及解决方案

问题描述昨天在做vue后台管理系统有关权限页面动态添加到路由的功能时，遇到一个问题：动态添加的路由页面，在页面刷新时出现了404的情况。场景后台管理系统的权限控制是通过在前端页面定义权限code，把code给后台同学保存配置到表中，之后根据后台返回的权限code列表与前端页面配置的code菜单列表做筛选匹配，code相等的页面就是有权限的页面，再通过router.addRoute()动态添加到路由中，有权限的路由才可以被访问，否则会提示无... 继续阅读 >

2021
02-26

vue项目配置 webpack-obfuscator 进行代码加密混淆的实现

背景公司代码提供给第三方使用，为了不完全泄露源码，需要对给出的代码进行加密混淆，前端代码虽然无法做到完全加密混淆，但是通过使用webpack-obfuscator通过增加随机废代码段、字符编码转义等方法可以使构建代码完全混淆，达到无法恢复源码甚至无法阅读的目的。安装webpack-obfuscatorhttps://www.npmjs.com/package/webpack-obfuscatornpminstall--save-devwebpack-obfuscator配置//webpack.config.jsconstJavaScriptOb... 继续阅读 >

2021
02-26

vue中h5端打开app(判断是安卓还是苹果)

1.开发环境vue+vant2.电脑系统windows10专业版3.在h5端开发的过程中,我们经常需要点击一个按钮来判断用户使用安装了app(首先判断是安卓还是苹果,然后判断是否安装了app,如果没有安装则跳转到下载页面,如果安装了则打开)。4.废话不多说,直接上代码:<divclass="xiding-r"@click="openapp">OpenAPP</div>5.在methods中添加如下代码:openapp(){varu=navigator.userAgent,app=navigator.appVersion;varisAndroid... 继续阅读 >

2021
02-23

基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件功能

1.前言之前公司要在管理系统中做一个全局上传插件，即切换各个页面的时候，上传界面还在并且上传不会受到影响，这在vue这种spa框架面前并不是什么难题。然而后端大佬说我们要实现分片上传、秒传以及断点续传的功能，听起来头都大了。很久之前我写了一篇webuploader的文章，结果使用起来发现问题很多，且官方团队不再维护这个插件了，经过多天调研及踩雷，最终决定基于vue-simple-uploader插件实现该功能，在项目中使用起来无痛且... 继续阅读 >

2021
02-21

Vue实现todo应用的示例

背景首先声明，本人并不是前端大神，看过我之前的内容应该知道，我擅长做后端，虽然前端略有涉略，但谈不上精通，连熟悉都勉强。写这个系列的目的仅仅只是出于好奇，好奇为何前几年还是JQuery一统天下的前端局面如今为何如此混乱，好奇好好的js是如何被玩的亲妈都不认识，之所以选择vue作为切入点，完全是因为vue简单，基本看下demo就能入门，既然vue作为目前流行的前端三大框架之一，那么只要了解vue是怎么实现的，是不是对前端稍... 继续阅读 >

2021
02-21

基于vue的video播放器的实现示例

当现有video播放器不能满足需求时，需要自己对video进行封装。video事件loadstart:在视频开始加载时触发，给currentTime赋值(历史播放记录或0)。durationchange:元信息已载入或已改变，视频的长度发生了改变。获取到视频长度(duration，并给currentTime赋值(历史播放记录或0))。playing:在视频开始播放时触发（不论是初次播放、在暂停后恢复、或是在结束后重新开始）。pause:播放暂停时触发。timeupdate:currentTim... 继续阅读 >

2021
02-21

vue登录页实现使用cookie记住7天密码功能的方法

问题描述项目的登录页中，会有要求记住7天密码的功能，本篇文章记录一下写法，主要是使用cookie，注释我写的很详细了，大家可以看一下我写的注释的步骤，还是比较详细的。亲测有效html部分代码图示效果图示代码粘贴<el-formref="form":model="form"label-width="80px"label-position="top"@submit.native.prevent><el-form-itemlabel="用户名/账号"><divclass="u... 继续阅读 >

2021
02-21

Vue如何实现变量表达式选择器

在input输入框中输入表达式在中台项目中是比较常见的场景。其通常是输入一个特定的字符时(如$字符)，显示下拉列表，用户点选下拉列表中的变量，然后继续在input输入框中输入其它运算符，组成一个表达式，其效果如下图：在之前的项目中，使用React+TypeScrpt实现了React版的变量表达式选择器，在本文中，我们将会介绍使用Vue如何实现一个变量表达式选择器。该变量表达式将会实现以下效果：当在输入框中输入特定字符时，... 继续阅读 >

2021
02-21

WebStorm无法正确识别Vue3组合式API的解决方案

1问题描述Vue3的组合式API无法在WebStorm中正确识别，表现为defineComponent等无法被识别：2尝试方案猜想这种问题的原因是无法正确识别对应的Vue3库，笔者相信WebStorm是可以做到的，只是某些配置没有正确，笔者尝试过在设置的Libraries中勾选上node_modules，但是没有效果。3解决办法最终的解决办法参考了此处（图源）：选择node_modules文件夹，右键选择MarkDirectoryas，最后选择NotExcluded即可。之后会花费一段时间索引... 继续阅读 >

2021
02-21

如何在 Vue 中使用 JSX

JSX是什么JSX是一种Javascript的语法扩展，JSX=Javascript+XML，即在Javascript里面写XML，因为JSX的这个特性，所以他即具备了Javascript的灵活性，同时又兼具html的语义化和直观性为什么要在Vue中使用JSX有时候，我们使用渲染函数（renderfunction）来抽象组件，渲染函数不是很清楚的参见官方文档,而渲染函数有时候写起来是非常痛苦的createElement('anchored-heading',{props:{level:1}},[crea... 继续阅读 >

2021
02-21

Vue单页面应用中实现Markdown渲染

之前渲染Markdown的时候,笔者使用的是mavonEditor的预览模式,使用起来比较爽,只需要引入组件即可,但是在最近的开发中,遇到了困难.主要问题在于作为单页面应用,站内链接必须是使用router-link跳转,如果使用mavonEditor默认渲染的a标签,就会重新加载页面,用户体验较差.动态渲染想要实现在前端动态地根据用户内容渲染router-link,需要使用动态渲染,根据官方文档,直接修改vue.config.js即可://vue.config.js... 继续阅读 >

2021
02-21

Vue+Bootstrap实现简易学生管理系统

利用vue和bootstrap做了一个比较简易的学生管理系统，供大家参考，具体内容如下废话不多说，先来看看效果图附上源代码:<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="utf-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width,initial-scale=1"><title>学生管理系统</title><linkhref="../public/css/bootstrap.min.css"rel="stylesheet"><linkhref=... 继续阅读 >

2021
02-21

Vue中使用wangeditor富文本编辑的问题

wangEditor是基于javascript和css开发的Web富文本编辑器，轻量、简洁、易用、开源免费。在我们实际项目上还是比较频繁应用到的，下面出个案例供大家参考学习…wangEditor文档：https://www.wangeditor.com/富文本编辑器截图：<!--富文本编辑器。http://www.wangeditor.com/使用示例：<AppEditorv-model="content"></AppEditor>--><template><articleref="editor"class="AppEditor-root"></article></template><script>const... 继续阅读 >