yan263364的博客

一、前提刚开始是通过后台生成二维码并存放在云上的。后来公司的云，在获取到url后，图片不能及时的显示，需要等待几秒；之后，用了腾讯云解决的，在现在这个活动中，竟然出现线上空白的情况最终，选择前端生成二维码二、实现安装依赖包npm install vue-qr --saveHTML:<vue-qr class="vue-qr" :margin="0" :text="downloadData.link" colorDark="#000" colorLight="#fff" size=

一、需求微信H5，小程序，APP三端：手动滑动实现中间放大，两边图片缩小的效果。可视区可看到三张图，其中左右两边的仅出现一小部分。如图二、实现按照依赖包 npm install vue-awesome-swiper --saveHTML: <swiper :options="swiperOption" ref="mySwiper" class="swiper"> <swiper-slide v-for="(item, index) in pictures"

一、需求本次【世纪盛典】活动，分为三期，每期都有海报相关的工作内容。海报带有动态的个人信息、头像、证书编号及二维码等。本次活动需要在微信h5、小程序、app里面正常启动。二、经过网上查找使用了 html2canvas 这个插件来生成海报。首先，加载依赖包npm install html2canvas --save使用import html2canvas from 'html2canvas'html2canvas 是基于已有 DOM 进行截图生成图片的，已有 DOM 如下： &l

一、需求滑动 el-table 滚动条，实现 thead 不动，下拉 tbody 到底部时，el-table加载数据。具体UI请看另一篇文章的需求 PC端下拉加载二、经过同事正好有一个写好的下拉加载的组件，就用了自定义组件 DivScrollPagination.vue<template> <div> <div v-if="loading==0" class="load-more">正在加载...</div> <!--

一、需求产品要求PC端实现下拉加载更多的数据。二、经过经调查，移动端用着比较好，PC端很少有用到。基本都是自己手写一个组件。在git上有一个 vue-mugen-scroll，用的不多，但是实现起来很方便。三、用法先用npm安装了组件npm install --save vue-mugen-scroll然后，下拉加载功能需求在哪个页面用，就importimport MugenScroll from "vue-mugen-scroll"vue – components加入

一、功能 点击 新增行 按钮，el-table 新增一行二、codeVUEjs

一、功能el-input里面有文字出现浮框，没有不出现浮框。刚开始用的因为功能原因，在 template 标签上面加上了 v-ifv-if 时，el-tooltip 标签里加上 el-input; v-else 直接写 el-input 标签加上去之后功能可以了，但是 el-input 有个事件。聚焦时，el-input放大高度；失焦时，el-input 缩小高度el-toolti...

一、功能表格的任意行都可以拖拽位置；默认不能拖拽表格，点击拖拽按钮可以拖拽。二、代码npm 下载 sortablejs页面按钮：页面el-tablejs引入 sortablejsdata() {} 里面的相关数据method: {}disabledRow()...

一、效果二、vue三、JSsettingClass渲染表头： renderHeader排序功能： handleCommand四、less只把 排序 的样式贴出来，其他根据项目不同，自己设置样式。...

前言&nbsp;http://blog.shanamaid.top/2017/03/21/vue仿163musicPC端/vue2越来越受欢迎，无奈现在在公司做的平台是以ng1.x为主，一直没有机会练手vue2，虽然写过一些小demo，但是与完整的项目相比较中间会少很多东西。于是趁在公司空闲...

又一个Vue+Cnavas酷炫的后台管理，依然前后端分离（用PC打开，还没适配移动端）。https://hzzly.github.io/2017/03/21/%E4%B8%80%E4%B8%AAVue-Canvas%E7%9A%84%E9%85%B7%E7%82%AB%E5%90%8E%E5%8F%B...

一、问题当多个路由复用同一个模板，此时在这几个路由间切换，被复用的模板有数据缓存问题。如一个路由页面出现的图表有5个柱状图，在另一个路由页面出现的图表是7个柱状图，且数据项都不同，问题：在另一个路由页面会先出现第一个路由页面的5个柱状图，再加载应有的7个柱状图二、解决方法在vue渲染之前，清空echarts——series——data的数据、echarts——yAxis——dat...

一、问题使用VUE路由，项目的url总是带有锚点，如下：http://localhost:8082/#/二、解决修改路由文件中 index.js 文件，即 src --&amp;gt; router --&amp;gt; index.js没修改前：export default new Router({ routes: [ { path: '/', ...

一、问题在用axios获取本地json数据时，总是报404错误。百思不得其解。二、经过看网友们都是把本地json文件放在static文件中。我写的项目存放在assets中，恍然大悟，应该是文件位置。三、结果文件改存为staticaxios({ method: method, url: url, data: method === 'P...

一、问题新增需求，点击浏览器返回按钮或者详情页的返回按钮，需要返回列表页，并保存之前所有的状态。二、经过刚开始，用this.$router.push({ name: 'detailsPage', params: sendData // sendData是给详情页传的数据信息})详情页通过 this.$route.params 信息判断是哪个列表页传过来的，并给二级页面传...

一、问题上一篇有提到，从列表页–详情页，再点击返回按钮，返回原来的列表页，列表页要显示所有点击详情页之前的状态信息。发现，从其他页面切换到列表页，还是之前的缓存页面，项目需求是，切换页面时，页面全部初始状态。详情页，有一个标签点击事件，返回列表页时，也不应该显示缓存页面。二、经过刚开始，直接在列表页添加的beforRouteLeave(to, from, next){ t...

一、区别不管是单个文件或者多个文件上传，都是通过后台控制的，接口不一样。目前，单个文件，后台不需要传其他额外的参数，就需要上传文件的信息二、仅上传文件信息，没有额外的参数 upfile () { let that = this let formData = new FormData() // .control-file上传文件类名， obj.upId当前点击的上传文件， v...

一、问题用elementUi横着增加一行数据没毛病，可以操作添加一列，这新增的这一列， 第一次去赋值的时候值是改了， 但没生效点击下一行时 值就变过来二、原因横向添加 是复制上面的某一条数据来的，因为data里面有这些属性的定义，所以横向添加没问题而纵向添加的数据，因为没有事先在 el-select v-modle="" 里面定义好字段，定义好的option是通过v-for...

以下内容是我在学习和研究Vue时，对Vue的特性、重点和注意事项的提取、精练和总结，可以做为Vue特性的字典；1. 性能优化：相对于计算属性computed、方法methods、观察watch，优先考虑使用计算属性实现，因为计算属性会缓存它的值，只有当计算属性的相关依赖发生改变时才会重新求值；尽可能最大化地让Vue复用可用的元素，即，在用...

一、问题项目中有很多关于上传文件的功能，为了方便，把上传文件单独写成一个组件上传文件没有问题，清楚功能，只能在子组件里面清楚，父组件里面还是有第一次上传的数据，再次上传文件，数据依然是第一次上传的信息（没有达到同步的效果）二、经过正好最近正在看一大佬的视频，记得有一节内容就是双向绑定。用 .sync 语法糖 实现 父子组件的双向绑定v-model 和.sync 都可以实现...

一、问题上传文件用的H5：input type=file，事件用的 change；问题出在，如果上传的第一个文件是 '一站式.txt‘’，之后再上传同一个文件，页面无法显示文件名.注：文件名是通过 change 事件，获取文件信息后，显示到文本框内的，由于是同一个文件名，没有触发 change 事件。二、解决把 input 的 type 类型转变为其他input类型，然后再转成 file...

一、效果用 input type="file" 实现文件的上传功能。点击浏览按钮，文件显示在input框；点击上传按钮，上传服务器。二、代码vue文件jsless

一、要求由于项目特殊要求，上传到知识库的文件，再点击保存按钮，保存至项目数据库。由于上传多个文件，保存操作后台要求前端用数组作为参数传过去。二、代码试了很多方式，刚开始用的 axios ，各种不行；最后选择用 jQuery 里面的 $.ajax 联调成功。...

一、问题刚开始用一个小项目练手，用vue-cli初始化项目，直接安装了所有的东西，如vue-router、ESLint、unit tests等等，当时只懂得vue-router是什么。问题来了，在vue页面写代码时，命令行报了很多错，几乎全是Expected indentation of 4 spaces but found 6类似这样的二、经过看了报的错，就直接删除了多余的空格。...