vue-preview的使用
使用vue-preview做图片缩率图
1.安装 npm i vue-preview -S
2.如果使用vue-cli生成的项目,需要修改webpack.base.conf.js文件中的loaders,添加一个loader
{
test:/vue-preview.src.*?js$/,
loader:'babel'
}
3.导入:import VuePreview from 'vue-preview'
使用: Vue.use(VuePreview)
<div class="thumbs">
<img class="preview-img" v-for="(item, index) in list" :src="item.src" height="100" @click="$preview.open(index, list)" :key="item.src">
</div>
注意:img标签上的class="preview-img" 不能去掉,图片要设置宽和高
vue-preview的使用的更多相关文章
- 05-Vue入门系列之Vue实例详解与生命周期
Vue的实例是Vue框架的入口,其实也就是前端的ViewModel,它包含了页面中的业务逻辑处理.数据模型等,当然它也有自己的一系列的生命周期的事件钩子,辅助我们进行对整个Vue实例生成.编译.挂着. ...
- 04-Vue入门系列之Vue事件处理
4.1. 监听事件的Vue处理 Vue提供了协助我们为标签绑定时间的方法,当然我们可以直接用dom原生的方式去绑定事件.Vue提供的指令进行绑定也是非常方便,而且能让ViewModel更简洁,逻辑更彻 ...
- 03-Vue入门系列之Vue列表渲染及条件渲染实战
3.1. 条件渲染 有时候我们要根据数据的情况,决定标签是否进行显示或者有其他动作.最常见的就是,表格渲染的时候,如果表格没有数据,就显示无数据.如果有数据就显示表格数据. Vue帮我们提供了一个v- ...
- Vue.js入门系列(一)
Vue官网: https://cn.vuejs.org/v2/guide/forms.html#基础用法 [入门系列] (一) http://www.cnblogs.com/gdsblog/p/78 ...
- Vue入门(二)之数据绑定
Vue官网: https://cn.vuejs.org/v2/guide/forms.html#基础用法 [入门系列] (一) http://www.cnblogs.com/gdsblog/p/78 ...
- Vue入门系列(三)之Vue列表渲染及条件渲染实战
Vue官网: https://cn.vuejs.org/v2/guide/forms.html#基础用法 [入门系列] (一) http://www.cnblogs.com/gdsblog/p/78 ...
- Vue入门系列(四)之Vue事件处理
Vue官网: https://cn.vuejs.org/v2/guide/forms.html#基础用法 [入门系列] (一) http://www.cnblogs.com/gdsblog/p/78 ...
- Vue入门系列(五)Vue实例详解与生命周期
Vue官网: https://cn.vuejs.org/v2/guide/forms.html#基础用法 [入门系列] (一) http://www.cnblogs.com/gdsblog/p/78 ...
- [转]vue数据绑定(数据,样式,事件)
1.mounted 与 methods 与 computed 与 watched区别 From:https://blog.csdn.net/qinlulucsdn/article/details/80 ...
- 【vue】跟着老马学习vue-数据双向绑定
学习了node.js教程,只能说是有了一定的了解,之前也了解了webpack和es6的核心内容,也看过vue2.0的官网教程,并结合视频看过项目,但是理解和运用仍然存在很多问题,接下来的一段时间,跟着 ...
随机推荐
- file类型input框设置上传相同文件,并都可以触发change事件。
在使用file类型input框是,删除了第一次上传到文件,再次上传相同文件,无法触发change事件,所以在删除的js上添加如下js代码: document.getElementById('fileU ...
- [转]复制、移动和删除:cp, rm, mv
转自:http://www.cnblogs.com/benio/archive/2010/07/27/1785929.html 要复制文件,请使用cp(copy)命令.不过,cp命令的用途很多.除了单 ...
- 【CF526F】Pudding Monsters cdq分治
[CF526F]Pudding Monsters 题意:给你一个排列$p_i$,问你有对少个区间的值域段是连续的. $n\le 3\times 10^5$ 题解:bzoj3745 Norma 的弱化版 ...
- Qt 4.8.6 PCL 1.8.0 VS 2010 联合编译常见错误
在Qt和PCL联合编译的过程中,会出现各种各样的错误,解决这些错误的过程真是痛苦万分,所以总结一些常见错误方便自己也方便他人.比如我们要编译PCL1.8.0中的apps中的point_cloud_ed ...
- Linux下coreseek环境安装 、mysql数据源、sphinx扩展安装及php调用
一.安装m4-1.4.13.autoconf-2.64.automake-1.11.libtool-2.2.6 下载安装m4-1.4.13.autoconf-2.64.automake-1.11.li ...
- poj1094 Sorting It All Out【floyd】【传递闭包】【拓扑序】
Sorting It All Out Time Limit: 1000MS Memory Limit: 10000K Total Submissions:39731 Accepted: 139 ...
- 初学的linux命令行
这几条命令是今天刚初学的,以前总看别人输入命令,好利落,到自己了,真心觉得难.目前就学了这几个命令.后期等学会了,再进行添加 vm 文件名 ——> 新建文件: :wq ——> 保存并退 ...
- .NET Core开发日志——Action
在叙述Controller一文中,有一处未做解释,即CreateControllerFactory方法中ControllerActionDescriptor参数是如何产生的.这是因为其与Action的 ...
- .NET Core开发日志——从ASP.NET Core Module到KestrelServer
ASP.NET Core程序现在变得如同控制台(Console)程序一般,同样通过Main方法启动整个应用.而Main方法要做的事情很简单,创建一个WebHostBuilder类,调用其Build方法 ...
- POJ 3635 - Full Tank? - [最短路变形][优先队列优化Dijkstra]
题目链接:http://poj.org/problem?id=3635 Description After going through the receipts from your car trip ...