Vue.js
文章平均质量分 52
珍珠奶茶爱好者
自学真的可以让自己成长很多,因为兴趣!
展开
-
vue子组件内容过多的时候,使用懒加载
vue的子组件内容过多的时候,使用懒加载components:{ childrenComp:resolve=>require(['you component url'],resolve)}但是由于子组件单个.vue里面内容太多而不能拆分的时候,懒加载也会有延迟。原创 2021-04-09 09:17:57 · 929 阅读 · 0 评论 -
jspdf + jspdf-autotable生成pdf
目前可以弄出的效果,自定义生成pdf。其实和canvas画图的过程类似需求中要求web页面上展示一种UI,生成pdf要word文档那样的简单的。所以一直研究jspdf如何生成pdf因为html2Canvas截长图不能很好的分页。设置高清截图的时候,pdf有好几大M的内存。受不了。一、vue项目中安装下面的依赖,如果你生成pdf不需要表格可以不安装jspdf-autotable(jspdf源码中有table()这个方法,可是我一直调不出来,准确来说传参一直没传对,就用jspd.原创 2021-04-02 16:30:19 · 3585 阅读 · 0 评论 -
vue导出多页PDF(html2Canvas + jsPdf)(PDF左右边距)
参考这里1、将html转成图片canvas( scrollY: refDom.top, // 关键代码,截取长度 height: refDom.height // 加高度,避免截取不全)上面两个属性是截取长图的关键const refDom = this.$refs.htmlDom.getBoundingClientRect()//就是 #pdfDom 这个divhtml2Canvas(document.querySelector('#pdfDom'), {...转载 2021-02-03 16:25:22 · 5865 阅读 · 12 评论 -
文件分片上传,自定义上传进度(效果图+讲解)
效果图我的这个上传是通过vuex保存用户选中的文件,点击上传确定按钮后统一上传文件。(vue-uploader我没找到可以设置文件预览的。所已就自己搞一个大文件上传了)。上传进度可以控制,可以我这里有延迟,因为xhr一直是undefined状态。所有我就只能通过控制分片序号来取消上传正文:代码在另一篇文章中文章...原创 2020-11-02 19:22:43 · 410 阅读 · 0 评论 -
vue自定义文件分片上传,自定义上传进度
GlobalUploader全局的组件<style scoped lang="scss"> /* 设置滚动条的样式 */ .scrollbar-div::-webkit-scrollbar { width: 5px; background-color: #e8e8e8; } /* 滚动槽 */ .scrollbar-div::-webkit-scrollbar-track { -webkit-box-shadow:inset006pxrgba(原创 2020-11-02 19:20:43 · 656 阅读 · 0 评论 -
vue导航栏根据页面滚动变化,点击导航栏滚动页面
以下是两个导航栏按钮对应两个div。可以自己修改.我是参考 ==》博客《=== 的这里是在computed下监听导航栏的点击事件,this.$refs = undefined。1、可以在this.$nextTick(()=>{ //do something})中执行滚动事件 computed:{ ...mapState('menu', { navActive: 'navActive' }), childrenActive(){转载 2020-11-02 18:39:52 · 3185 阅读 · 0 评论 -
可变的table的头,用户可自定义显示的table 的head
效果图1、2、大概就是这样的效果。在表头数据比较多的情况下,可以设置动态的表头。下面是一个该效果的.vue文件。<template> <div @click="tabHeadChange=false"> <table style="width: 80%;"> <thead> <tr style="background-color: rgba(132,84,255,0.14)"&原创 2020-09-24 21:03:31 · 749 阅读 · 0 评论 -
vue2.0版本搭建一个中型PC项目,注意事项
1、兼容浏览,npm install babel-polyfillIE -S ,使IE能将es6转es5,自适应窗口calc()计算、flex布局2、项目结构3、vuex拆分模块(module)【一般按后端返回的数据model分类】、router拆分、4、禁止地址栏输入url地址直接访问需要登录的页面5、后端接口 api 分类6、尽可能减少一个.vue文件的代码行数(模块化【组件】开发)7、设置api请求的拦截器8、子组件使用computed来监听父传子数据9、第一次渲染页面原创 2020-09-03 22:39:04 · 466 阅读 · 0 评论 -
vue接收后端返回的文件流,下载文件(post和get)。前端的集中文件下载方式。大文件下载
后台返回一个File类型的数据给前端,请求的时候1、设置返回类型responseType,不管你用post\get\ect都要设置2、使用blob类型接收3、销毁URL对象this.$axios.post(this.$api.getThesisExcel(),paper,{ responseType: 'blob',//设置返回类型 }).then((res)=>{ const link=document.cre转载 2020-08-19 17:05:03 · 17085 阅读 · 10 评论 -
vue自定义可搜索、多次复用的select选择框,可以修改图标和颜色
1、效果图这是我将该组件作为子组件应用到父组件中使用的效果。 主要是通过控制 选项item 的 显示与隐藏 来实现搜索结果的。数据传递通过vue的父传子和子传父父组件的代码HTML<div> <span class="text">成员名称</span> <MySelect v-bind:dataOption="nameList" v-on:checkOptionValue="obj.memberName"/><...原创 2020-07-02 15:07:07 · 1254 阅读 · 0 评论