分类：Vue

2021
03-29

Vue+node实现音频录制播放功能

实现效果：主要实现代码逻辑部分，具体页面结构就不一一介绍了。vue部分：安装recorderxcnpminstallrecorderx--save或者npminstallrecorderx--save在具体的组件中引入<script>importaxiosfrom"axios";import{Toast}from"vant";importRecorderx,{ENCODE_TYPE}from"recorderx";constrc=newRecorderx();exportdefault{data(){return{startime:null,endtime:null... 继续阅读 >

2021
03-23

vue使用Split封装通用拖拽滑动分隔面板组件

前言手动封装一个类似Iview中的Split组件，可将一片区域，分割为可以拖拽调整宽度或高度的两部分区域，最终效果如下：开始基础布局在vue工程中创建SplitPane组件，引入页面使用。<template><divclass="page"><SplitPane/></div></template><script>importSplitPanefrom'./components/split-pane'exportdefault{components:{SplitPane},data(){return{}}}</script><stylescopedlang="scss">.page{hei... 继续阅读 >

2021
03-23

vue 中 get / delete 传递数组参数方法

在前后端交互的时候，有时候需要通过get或者delete传递一个数组给后台，但是这样直接传递后台无法接收数据，因为在传递的过程中数组参数会被转译，结果如下：参数：{name:[1,2,3]}转译效果：http://aaa.com?name[]=1&name[]=2&name[]=3目标效果：http://aaa.com?name=1&name=2&name=3解决办法：使用qs插件将数组参数序列化1、qs.stringify({a:['b','c']},{arrayFormat:'indices'})//输出结果：'a[... 继续阅读 >

2021
03-19

vue+django实现下载文件的示例

一、概述在项目中，点击下载按钮，就可以下载文件。传统的下载链接一般是get方式，这种链接是公开的，可以任意下载。在实际项目，某些下载链接，是私密的。必须使用post方式，传递正确的参数，才能下载。二、django项目本环境使用django3.1.5，新建项目download_demo安装模块pip3installdjangorestframeworkdjango-cors-headers修改文件download_demo/settings.pyINSTALLED_APPS=['django.contrib.admin','django.contrib.... 继续阅读 >

2021
03-19

vue路由实现登录拦截

一、概述在项目开发中每一次路由的切换或者页面的刷新都需要判断用户是否已经登录，前端可以判断，后端也会进行判断的，我们前端最好也进行判断。vue-router提供了导航钩子:全局前置导航钩子beforeEach和全局后置导航钩子afterEach，他们会在路由即将改变前和改变后进行触发。所以判断用户是否登录需要在beforeEach导航钩子中进行判断。导航钩子有3个参数： 1、to:即将要进入的目标路由对象； 2、from:当前导航即将... 继续阅读 >

2021
03-19

vue项目实现分页效果

vue项目中实现分页效果，供大家参考，具体内容如下1.这里我们使用element-ui来实现，先使用npm安装npmielement-ui-S2.在main.js中全局引入importElementUIfrom"element-ui"import'element-ui/lib/theme-chalk/index.css'Vue.use(ElementUI)//将element-ui挂在到全局3.封装组件<template><divclass="block"><el-pagination@current-change="handleCurrentChange":current-page="currentPage":page-size="6"l... 继续阅读 >

2021
03-19

vue实现倒计时功能

本文实例为大家分享了vue实现倒计时功能的具体代码，供大家参考，具体内容如下通过父组件传入的结束时间减去当前日期得到剩余时间1.子组件部分<divclass="itemend"><pclass="itemss">倒计时<span>{{day}}</span>天<span>{{hour}}</span>时<span>{{minute}}</span>分<span>{{second}}</span>秒</p></div>代码：data(){return{day:"",//天hour:"",//时minute:"",//分second:"",//秒flag:false,};},mounted()... 继续阅读 >

2021
03-19

Vue 虚拟列表的实战示例

序言现如今，我们总是在无止境的刷。刷微博、刷抖音、刷沸点......一次次丝滑下拉体验的背后却是前端攻城狮的用心。本篇讨论基于Vue.js的列表无限下拉实践。我们的目标就是：让列表下拉纵享丝滑，而不是像以往的下拉就loading等待的体验。译自BetterProgramming在线Demo设计咱还是用VueCLI来快速构建项目。这是主页面：//EndlessList.vue<template><divclass="endless-scrolling-list"><!--搜索框--><divc... 继续阅读 >

2021
03-19

vue 项目代码拆分的方案

背景由于之前的数据库防火墙产品与数据库审计产品使用的是同一套代码，随着两个产品功能的差异越来越大，代码的冗余度和偶合度越来越高，为了便于后期维护以及添加新功能，所以基于原来的项目代码，进行了代码结构拆分。注意：本次拆分只拆分了可以拆分的部分，有的模块例如：规则、关于我们，是没有进行拆分的，一是有的模块很简单，没必要拆分；二是有的模块原先写得代码偶合太严重，无法拆分，如果要拆分，需要花费大量精力去梳... 继续阅读 >

2021
03-19

vue3的动态组件是如何工作的

在这篇文章中，阿宝哥将介绍Vue3中的内置组件——component，该组件的作用是渲染一个“元组件”为动态组件。如果你对动态组件还不了解的话也没关系，文中阿宝哥会通过具体的示例，来介绍动态组件的应用。由于动态组件内部与组件注册之间有一定的联系，所以为了让大家能够更好地了解动态组件的内部原理，阿宝哥会先介绍组件注册的相关知识。一、组件注册1.1全局注册在Vue3.0中，通过使用app对象的component方法，可... 继续阅读 >

2021
03-12

vue cli3 实现分环境打包的步骤

用cli3搭建的vue项目号称零配置文件，为了方便打包（不用手动来回改不同环境进行打包）那么我们在需要打包的时候分不同环境打包怎么办呢1.在根目录下创建三个配置文件，如下图这里我创建了三个，这三个分别是我的本地；离线；线上环境，三个文件的内容依次为下VUE_APP_TITLE要对应当前文件后缀，build对应的productionNODE_ENV='production'VUE_APP_TITLE='alpha'========================================================... 继续阅读 >

2021
03-12

详解Vue 路由组件传参的 8 种方式

我们在开发单页面应用时，有时需要进入某个路由后基于参数从服务器获取数据，那么我们首先要获取路由传递过来的参数，从而完成服务器请求，所以，我们需要了解路由传参的几种方式，以下方式同vue-router@4。编程式路由传参除了使用<router-link>创建a标签来定义导航链接，我们还可以借助router的实例方法，通过编写代码来实现。1.通过params传递 路由配置路径参数用冒号:表示。constroutes=[//动态段以冒... 继续阅读 >

2021
03-11

Vue模仿ElementUI的form表单实例代码

实现要求模仿ElementUI的表单，分为四层结构：index组件、Form表单组件、FormItem表单项组件、Input和CheckBox组件，具体分工如下：index组件：实现：分别引入Form组件、FormItem组件、Input组件，实现组装；Form表单组件：实现：预留插槽、管理数据模型model、自定义校验规则rules、全局校验方法validate；FormItem表单项组件：实现：预留插槽、显示label标签、执行数据校验、显示校验结果；Input和C... 继续阅读 >

2021
03-10

详解vue的hash跳转原理

在newvueRouter的时候我们可以传入一个mode属性，他可以接收三个值：hash/history/abstracthash和history的区别history的路径更美观一点比如http://yoursite.com/user/id,history是基于pushState()来完成URL跳转而无须重新加载页面。但是强制刷新还是会有问题（服务端来解决这个问题），所以history模式需要后端人员配合使用。hash的路径会带有#,比如http://yoursite.com#/user/idHashHistoryclassVueRouter{constructor(op... 继续阅读 >

2021
03-10

详解vue3中渲染函数的非兼容变更

渲染函数API变更此更改不会影响到<template>用户h现在全局导入，而非作为参数传递给渲染函数渲染函数参数更改为在有状态组件和函数组件之间更加一致vnode现在又一个扁平的prop结构Render函数参数 //2.0渲染函数exportdefault{render(h){returnh('div')}}//3.x语法exportdefault{render(){returnh('div')}}渲染函数签名更改//2.xexportdefault{render(h){returnh('div')}}//3.ximport{h,... 继续阅读 >

2021
03-09

Vue如何使用Dayjs计算常用日期详解

在使用vue开发项目时，前端常常需要计算一些日期时间，如：计算周月截止日期计算XX天前/后的日期将时间戳转换为日期（YYYY-MM-DD）计算月天数日期转时间戳推荐一个轻量的处理时间和日期的JavaScript库：dayjs使用这个插件计算常用日期十分方便1、在项目中安装dayjs，命令为：npminstalldayjs--save2、在main.js中，添加如下2句代码importdayjsfrom'dayjs';Vue.prototype.dayjs=dayjs;3、在页面需要使用的地方... 继续阅读 >