JBL T280TWS X 真无线蓝牙耳机 入耳式防水防汗音乐运动跑步耳机 通话降噪耳机
基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件功能
1. 前言 之前公司要在管理系统中做一个全局上传插件,即切换各个页面的时候,上传界面还在并且上传不会受到影响,这在vue这种spa框架面前并不是什么难题。然而后端大佬说我们要实现分片上传、秒传以及断点续传的功能,听起来头都大了。 很久之前我写了一篇webuploader的文章,结果使用起来发现问题很多,且官方团队不再维护这个插件了, 经过多天调研及踩雷,最终决定基于vue-simple-uploader插件实现该功能,在项目中使用起来无痛且稳定。 如果你只是想实现基本的(非定制化的)上传功能,直接使用vue-simple-uploader,多读一下它的文档,不需要更多的二次封装。 如果
2021-02-23 56
用vite搭建vue3应用的实现方法
一,安装 提示: VUE3.0目前还没有官方的翻译文档。但是已经有人翻译了。得到了尤雨溪大佬的点赞,这里附上网址https://v3.cn.vuejs.org/ 1.安装 cli 因为要使用 vue3 必须要求 cli 的版本比较高,必须要高于 4.5.X 所以没有安装的 cli 的就直接安装最新版就行了,已有的可以升级或者卸载后重新安装 最好是全局安装 //全局安装 npm install -g @vue/cli # OR yarn global add @vue/cli //全局卸载 npm uninstall -g vue-cli # OR yarn g
2021-02-22 69
详解Vue3.0 + TypeScript + Vite初体验
项目创建 npm: $ npm init vite-app <project-name> $ cd <project-name> $ npm install $ npm run dev or yarn: $ yarn create vite-app <project-name> $ cd <project-name> $ yarn $ yarn dev 项目结构 main.js 在个人想法上,我觉得createApp()是vue应用的实例,createApp支持链式调用 App.vue:
2021-02-22 67
vue-cli 3如何使用vue-bootstrap-datetimepicker日期插件
需求背景简介 最近打算使用vue并结合前端工程化体系重构之前的一个Demo,其中有一个功能是使用bootstrap的datepicker插件选择查询日期。在网上找到了一个基于vue扩展的datepicker插件:vue-bootstrap-datepicker。这篇博客主要介绍在使用vue-cli 3创建的项目中如何使用该插件。项目地址:https://gitlab.com/JiaoXN/vuecli3usedatetimepicker.git 安装插件及其依赖项 这个插件有两个版本:一个是基于bootstrap 3.x开发的,一个是基于bootstrap 4.x开发的。本篇博客将会
2021-02-20 61
Vue实现todo应用的示例
背景 首先声明,本人并不是前端大神,看过我之前的内容应该知道,我擅长做后端,虽然前端略有涉略,但谈不上精通,连熟悉都勉强。写这个系列的目的仅仅只是出于好奇,好奇为何前几年还是JQuery一统天下的前端局面如今为何如此混乱,好奇好好的js是如何被玩的亲妈都不认识,之所以选择vue作为切入点,完全是因为vue简单,基本看下demo就能入门,既然vue作为目前流行的前端三大框架之一,那么只要了解vue是怎么实现的,是不是对前端稍微有了一点认识,于是在这种想法的促使下,有了这个系列。 这里模仿vue并不是指我把vue的源码看了一遍,看懂了然后模仿vue写,而是语法还是vue的语法,但是实现我自己
2021-02-20 81
基于vue的video播放器的实现示例
当现有video播放器不能满足需求时,需要自己对video进行封装。 video事件 loadstart: 在视频开始加载时触发,给currentTime赋值(历史播放记录或0)。 durationchange: 元信息已载入或已改变,视频的长度发生了改变。获取到视频长度(duration,并给currentTime赋值(历史播放记录或0))。 playing: 在视频开始播放时触发(不论是初次播放、在暂停后恢复、或是在结束后重新开始)。 pause: 播放暂停时触发。 timeupdate: currentTime改变, 更新播放进度。处理播放进度条 se
2021-02-19 43
vue登录页实现使用cookie记住7天密码功能的方法
问题描述 项目的登录页中,会有要求记住7天密码的功能,本篇文章记录一下写法,主要是使用cookie,注释我写的很详细了,大家可以看一下我写的注释的步骤,还是比较详细的。亲测有效 html部分 代码图示 效果图示 代码粘贴 <el-form ref="form" :model="form" label-width="80px" label-position="top" @submit.native.prevent > <el-form-item
2021-02-18 56
Vue包大小优化的实现(从1.72M到94K)
一、背景 最近做了一个网站,uidea,是用来辅助独立开发者做一些 UI 设计的,当时只管开发,等部署完以后,发现访问速度堪忧 毕竟是个小水管服务器,相比提高带宽,还是先看看代码上能不能优化一下,性价比更高 这个是优化前的包大小,这家伙都上 1.72 M 了,小水管加载时间直接往 3s 以上走了,臣妾扛不住啊 二、目标 这必须得优化一下,优化前得大致定一下目标,目标又需要指标来衡量,所以定了两个指标: 页面加载时间不多说,至少得 1s 以内,越快越好 包大小控制在 200k 以内 为什么定这两个目标呢?首先页面加载时间是最终要解决的问题,那页面加载时间初步来看,
2021-02-18 50
Vue如何实现变量表达式选择器
在 input 输入框中输入表达式在中台项目中是比较常见的场景。其通常是输入一个特定的字符时(如 $ 字符),显示下拉列表,用户点选下拉列表中的变量,然后继续在 input 输入框中输入其它运算符,组成一个表达式,其效果如下图: 在之前的项目中,使用 React + TypeScrpt 实现了React版的变量表达式选择器,在本文中,我们将会介绍使用Vue如何实现一个变量表达式选择器。 该变量表达式将会实现以下效果: 当在输入框中输入特定字符时,显示下拉列表; 可通过键盘上下键切换下拉选项,鼠标点击下拉选项或者按下 enter 键,选中内容显示到输入框上; 光标移到已输
2021-02-18 56
WebStorm无法正确识别Vue3组合式API的解决方案
1 问题描述 Vue3的组合式API无法在WebStorm中正确识别,表现为defineComponent等无法被识别: 2 尝试方案 猜想这种问题的原因是无法正确识别对应的Vue3库,笔者相信WebStorm是可以做到的,只是某些配置没有正确,笔者尝试过在设置的Libraries中勾选上node_modules,但是没有效果。 3 解决办法 最终的解决办法参考了此处(图源): 选择node_modules文件夹,右键选择Mark Directory as,最后选择Not Excluded即可。 之后会花费一段时间索引,等待完成即可。 4 一些思考 看
2021-02-18 72
如何在 Vue 中使用 JSX
JSX 是什么 JSX 是一种 Javascript 的语法扩展,JSX = Javascript + XML,即在 Javascript 里面写 XML,因为 JSX 的这个特性,所以他即具备了 Javascript 的灵活性,同时又兼具 html 的语义化和直观性 为什么要在 Vue 中使用 JSX 有时候,我们使用渲染函数(render function)来抽象组件,渲染函数不是很清楚的参见官方文档, 而渲染函数有时候写起来是非常痛苦的 createElement( 'anchored-heading', { props: { level: 1 }
2021-02-14 44
Vue单页面应用中实现Markdown渲染
之前渲染 Markdown 的时候, 笔者使用的是 mavonEditor 的预览模式, 使用起来比较爽, 只需要引入组件即可, 但是在最近的开发中, 遇到了困难. 主要问题在于作为单页面应用, 站内链接必须是使用 router-link 跳转, 如果使用 mavonEditor 默认渲染的 a 标签, 就会重新加载页面, 用户体验较差. 动态渲染 想要实现在前端动态地根据用户内容渲染router-link , 需要使用动态渲染, 根据 官方文档, 直接修改vue.config.js 即可: // vue.config.js module.exports = { runti
2021-02-14 64
vue仿携程轮播图效果(滑动轮播,下方高度自适应)
先看案例,使用vue+swiper实现,slide不同高度时,动态计算盒子高度,让其下方高度自适应的效果 首先搭建vue项目,这里不做过多说明,然后安装swiper npm install swiper --save-dev 1. js部分:初始化swiper组件,vue要在mounted生命周期中进行初始化,代码如下: import Swiper from 'swiper' import { TweenMax, Power2 } from 'gsap' 初始化时调用resize函数,计算屏幕容器的宽高,代码如下 // 重新计算屏幕宽高 resize
2021-02-11 55
Vue+Bootstrap实现简易学生管理系统
利用vue和bootstrap做了一个比较简易的学生管理系统,供大家参考,具体内容如下 废话不多说,先来看看效果图 附上源代码: <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=
2021-02-09 44
详解Vue的七种传值方式
1,父传子 子组件中定义props字段,类型为数组(如果需要限制字段值类型,也可以定义为对象的形式)。如下图的例子,父组件挂载子组件HelloWorld,在组件标签上给title赋值,子组件HelloWorld定义props,里面有一个值是title,这样子组件就可以使用父组件的值了。 父组件 <template> <div> <HelloWorld :title="msg" /> </div> </template> <script> import HelloWorld from "../
2021-02-08 172
Vue中使用wangeditor富文本编辑的问题
wangEditor是基于javascript和css开发的 Web富文本编辑器, 轻量、简洁、易用、开源免费。 在我们实际项目上还是比较频繁应用到的,下面出个案例供大家参考学习… wangEditor文档:https://www.wangeditor.com/ 富文本编辑器截图: <!--富文本编辑器。http://www.wangeditor.com/ 使用示例: <AppEditor v-model="content"></AppEditor> --> <template> <article ref="ed
2021-02-07 118
vue使用lodop打印控件实现浏览器兼容打印的方法
前言 此控件直接进行打印底部会有水印,通过官网购买可以解决; 如不想购买,可先执行预览,弹出预览框进行打印; 需要用到的js文件和api文档附后,请注意查看。 首先需要在局部或全局引入LodopFuncs.js文件import {getLodop} from '../../../components/js/LodopFuncs' 方法中调用 print(){ let LODOP = getLodop(); LODOP.PRINT_INITA(0,0,800,1600,"打印库位名称"); LODOP.SET_PRINT_PAGESIZE(1,700,50
2021-02-07 42
vue如何使用rem适配
1.开发环境 vue 2.电脑系统 windows10专业版 3.在使用vue开发移动端的过程中,我们会因为兼容性而头疼,下面我来分享分享下面vue使用rem自适配,希望对你有所帮助。 4.废话不多说,直接上操作: //安装 postcss-pxtorem npm i postcss-pxtorem -S 5.在src目录新建rem文件夹,下面新建rem.js,添加如下代码: //基准大小 const baseSize = 37.5 // 设置 rem 函数 function setRem() { const salepro = document.docum
2021-02-06 50
如何管理Vue中的缓存页面
<keep-alive> <router-view /> </keep-alive> Vue中内置的<keep-alive>组件可以帮助我们在开发SPA应用时,通过把全部路由页面进行缓存(当然也可以有针对性的缓存部分页面),显著提高页面二次访问速度,但是也给我们在某些场景带来了困扰,其中包含两个主要矛盾: 缓存页面如何在合适的时机被销毁 (keep-alive组件提供了三个参数来动态配置缓存状态,但是作用有限,后面分析) 同一个路径如何缓存多个不同的页面(同页不同参),比如淘宝商品页面继续跳转另一个商品页面 本文主要
2021-02-06 73
手动实现vue2.0的双向数据绑定原理详解
一句话概括:数据劫持(Object.defineProperty)+发布订阅模式 双向数据绑定有三大核心模块(dep 、observer、watcher),它们之间是怎么连接的,下面来一一介绍。 为了大家更好的理解双向数据绑定原理以及它们之间是如何实现关联的,先带领大家复习一下发布订阅模式。 一.首先了解什么是发布订阅模式 直接上代码: 一个简单的发布订阅模式,帮助大家更好的理解双向数据绑定原理 //发布订阅模式 function Dep() { this.subs = []//收集依赖(也就是手机watcher实例), } Dep.prototype.addS
2021-02-06 56
vue3.0 自适应不同分辨率电脑的操作
首先我们需要要安装一些依赖 npm i lib-flexible-computer -S //根节点会根据页面视口变化而变化font-size大小 npm i px2rem-loader -D//自动将px转换为rem npm i postcss-px2rem//将代码中px自动转化成对应的rem的一个插件 这里要和大家说的就是lib-flexible-computer这个npm装的依赖,想必大家为了做pc的适配搜索了很多方法他们大多数都是安装的下面这个依赖 npm i lib-flexible -S 安装这个依赖,做适配的话只能做到屏幕540一下的,pc端使用并不
2021-02-06 69