前言 这段时间赶项目，需要用到多文件上传，用Vue进行前端项目开发。在网上找了不少插件，都不是十分满意，有的使用起来繁琐，有的不能适应本项目。就打算自己折腾一下，写一个Vue的上传插件，一劳永逸，以后可以直接使用。 目前vue-easy-uploader已上传到GitHub和NPM，使用起来方便简单，不需要繁琐的配置即可投入生产，不过需要后端配合，实现上传接口。 本项目GitHub地址: https://github.com/quanzaiyu/vue-easy-uploader 本项...
思路: 用 ajax 将文件下载, 然后用 jszip 压缩文件, 最后用 file-saver 生成文件 1. 准备工作 安装 3 个依赖: axios, jszip, file-saver yarn add axios yarn add jszip yarn add file-saver2. 下载文件 import axios from axios const getFile = url => {return new Promise((resolve, reject) => {axios({method:get,url,responseType: arraybuffer}).then(data => {resolve(data.data)}).catch(error => {reject(error.toString...
饿了么的table组件功能很强大，对于项目中的各种表格基本够用，但是……个人对于它以列为单位的操作不习惯 =。=所以改成了另一种方式（我不会告诉你其实本质没变）。项目中表格较多，所以复用性最重要 步骤一先来个基本的表格展示 官例的tableData tableData: [{date: 2016-05-02,name: 王小虎,address: 上海市普陀区金沙江路 1518 弄 }, {date: 2016-05-04,name: 王小虎,address: 上海市普陀区金沙江路 1517 弄 }, {date: 2016-05...
?其实在去年小颖已经写过一篇：Vue.js实现checkbox的全选和反选 小颖今天在跟着慕课网学习vue的过程中，顺便试试如何在table中实现全选和反选，页面的css样式是直接参考慕课网的样式写的，js是小颖自己写哒，欢迎大家吐槽和点赞，嘻嘻 demo的 git 地址：ShoppingCart 页面效果：具体怎么实现的呢？ 使用localstorage来存储页面信息 中已经有写项目是怎么创建的所以小颖在这里就不重复了，其实只是在上篇文章的基础上稍微做了改动...
本文介绍了vue 运用mock数据的示例代码，分享给大家，具体如下：初始化你的项目话不用啰嗦，首先初始化你的项目，最简单的就是使用vue-cli啦vue init webpack引入mock.js安装 mockjsnpm install --save-dev mockjs引入到Vue原型上，方便使用import mockjs from mockjsVue.prototype.$mock = Vue.$mock = mockjs.mock以上引入到Vue原型上，可以使用 this.$mock直接产生mock数据请看这里Vue.prototype 请看这里mockjs 在项目开发中，...
在开发web-app中，总会遇到v-for出来的li会有很多，当数据达几百上千条的时候，一起加载出来会造成用户体验很差的效果。 这时候我们可以使用无限滚动和下拉刷新来实现控制显示的数量，当刷新到底部的边界的时候会触发无限滚动的事件，再次加载一定数量的条目。 还是拿在项目中的功能来举栗子介绍。有个列表，几千条数据，做分页查询，限制每次显示查询20条，每次拉到最后20条边缘的时候，触发无限滚动，这时候会出现加载图标，继续...
写在前面： 开发的时候，前后端不论是否分离，接口多半是滞后于页面开发的。所以建立一个REST风格的API接口，给前端页面提供虚拟的数据，是非常有必要的。json server 作为模拟工具，因为设置简单，容易上手。本文是做一个简单的上手介绍，有需要的朋友可以做一下参考，喜欢的可以点波赞，或者关注一下，希望可以帮到大家。 json server 工具: 在后台还没给接口之前，使用JSON-Server搭建一台JSON服务器，将接口要返回的数据放在js...
本文介绍了vue语法之拼接字符串的示例代码，分享给大家，具体如下。 先来一行代码： <div class="swiper-slide" v-for="item in message"><img v-bind:src="[xxx(需要拼接的字符串)+item.picurl]" alt="" width="100%" height="245" /> </div>如代码所示，只需要在数组语法中拼接字符串即可。 ***知识点*** 顺便总结一下vue语法 写法也分为：style的绑定和class的绑定 （以下代码部分为官网例子） (1)对象语法 顾名思义，就是有使用...
vue1.0中，组件之间的通信主要通过vm.$dispatch沿着父链向上传播和用vm.$broadcast向下广播来实现。然而在vue2.0中，已经废除了这种用法。vuex加入后，对组件之间的通信有了更加清晰的操作，对于中大型的项目来说，一开始就把vuex的使用计划在内是明智的选择。然而在一些小型的项目，或者说像我这样写到一半才发现vue2.0用不了$.broadcast和$dispatch的人来说，就需要一个比较便捷的解决方法。那么，eventBus的作用就体现出来了。主...
前言本文主要Alert 组件的大致框架， 提供少量可配置选项。 旨在大致提供思路 tooltip常用于展示鼠标 hover 时的提示信息。 模板结构<template><div style="position:relative;"><span ref="trigger"><slot></slot></span><div class="tooltip"v-bind:class="{top: placement === top,left: placement === left,right: placement === right,bottom: placement === bottom,disable: type === disable,delete: type === delete,v...
本文介绍了VUE饿了么树形控件添加增删改功能的示例代码，分享给大家，具体如下：element-ui树形控件：地址 在原文档中有个案例是有新增和删除功能，但是后来发现其修改的数据并不能直接影响到树形数据，所以采用了 render-content 的API重新写了个组件。写个开发的步骤，所以文章比较长emmm 大致效果如图：1.省市API在网上复制了个省市的list，有两个属性是新增的 isEdit ：控制编辑状态maxexpandId ：为现下id的最大值export defa...
目前，项目中使用了纯前端的静态项目+RESTFul接口的模式。为了更好的对数据进行操作，前端使用了vue2的mvvm功能，但是由于不是单页面应用，所以，并没有涉及到其它的如vue-route等功能，也未使用webpack等编译功能，所以，也没有使用.vue文件功能。这时候，如果用到控件，则多数从原jquery的组件中选择。 select下拉搜索选择 这次的需求调研与设计是原来做winform开发的同事，由于用惯了devexpress这个控件库，所以，对于searchloo...
最近在做的一个几月vue的移动端小demo,其中有一块是实现各个页面的统一换肤功能的。想着写一篇文章，来写一写实现过程中遇到的一些问题。项目github地址 项目github地址 一 先看一下实现效果吧 设置主题颜色 讲道理这么一个功能，我觉得这么几点可以说下，分步实现： 1. 色值的选取 2. scss 的一些小众用法(多变量CSS值的批量设置) 3. 全局事件巴士的应用 1 色值的选取和原则 推荐大家看下蚂蚁金服的设计指引，里面对常见的交互和...
本文介绍了vue生成随机验证码的示例代码，分享给大家，具体如下： 样式自调，最终效果如图：实现效果：点击右边input框会自动切换，如果输入的值与字不同，则清空换一串随机数 HTML <input type="text" placeholder="请输入验证码" class="yanzhengma_input" @blur="checkLpicma" v-model="picLyanzhengma"> <input type="button" id="code" @click="createCode" class="verification1" v-model="checkCode"/> <br> <span class="t...
前言 需要进行表单数据验证，原先才用html5来完成验证，但是效果很差，也不够灵活，所以需要进行自定义的表单验证，网上的插件都太过庞大，项目并没有这么多的需求。 那让我们自己来写一个吧！ 知识准备 vue的自定义指令具体可以看官方手册，连接如下：https://vuejs.org/v2/guide/custom-directive.html总的来说就是可以帮你在指定的钩子函数中跳用你的函数，参数（el，binding， vnode） el: 绑定的dombinding: 指令的各项属性vn...