✅Vue选择图像
下载 Vue选择图像
Vue选择图像
Vue 2。用于从列表中选择图像的组件
演示
https://mazipan.github.io/vue-select-image/
安装
#纱
纱添加vue-select-image
# NPM
npm i vue-select-image -save
如何使用
进口
从“vue-select-image”导入VueSelectImage
/ /添加样式表
要求(“vue-select-image / dist / vue-select-image.css”)
注册组件
组件:{VueSelectImage}
注册为全局组件
Vue.use (VueSelectImage)
样本阵列图像
[{
id: ' 1 ',
src:“https://unsplash.it/200?random”,
alt:“alt图像1”
},{
id: ' 2 ',
src:“https://unsplash.it/200?random”,
alt: ' alt Image 2'
},{
id: ' 2 ',
src:“https://unsplash.it/200?random”,
alt: ' alt Image 2',
禁用:真
})
场
描述
id
每个图像的唯一id,也将设置为图像DOM上的id属性
src
图像的Src属性
alt
图像Alt属性
禁用
图像禁用,无法选择
模板
单一的选择
& lt; vue-select-image
: dataImages = " dataImages”
@onselectimage =“onSelectImage”比;
& lt; / vue-select-image>
onselectimage将返回被选中的参数对象图像
多个选择
& lt; vue-select-image
: dataImages = " dataImages”
:是多重= " true "
: selectedImages = " initialSelected”
@onselectmultipleimage =“onSelectMultipleImage”比;
& lt; / vue-select-image>
onselectmultipleimage将返回被选中的对象图像的参数列表
可用的道具
属性
类型
默认的
描述
: dataImages
数组
[]
将显示的图像数组
: selectedImages
数组
[]
初始选择的图像数组
: isMultiple
布尔
假
标记以启用多个选择
: useLabel
布尔
假
标记以启用显示alt为标签
: rootClass
字符串
vue-select-image
初始化此组件的根元素
: activeClass
字符串
——选择
类的活动状态,将与:rootClass连接
: h
字符串
汽车
图像高度,例如:‘50px’
w:
字符串
汽车
图片宽度,例如:‘50px’
:限制
数量
0
设置最大的图像可以选择
可用的事件
事件Attr
返回
@onselectimage
图像对象选择
@onselectmultipleimage
对象图像数组已被选中
@onreachlimit
当所选图像的长度达到极限时
有用的方法(源自v1.6.0)
有时你需要通过$refs访问我们的内部方法,你需要知道以下方法:
方法名称
使用
removeFromSingleSelected ()
在单一选择模式下重置所选图像
removeFromMultipleSelected ()
在多选择模式下从选定列表中移除
resetMultipleSelection (id)
在多选择模式下重置所有选中列表
isExistInArray (id)
如果存在将返回对象图像,如果不存在则未定义
例子
例子可以在这里找到:
App.vue
app.js
信贷
感谢您的灵感:https://github.com/rvera/image-picker
支持我
通过trakteer
直接支持,给我发邮件
贡献
如果你想投稿,请浏览投稿指南。在内部,您将找到关于开放问题、编码标准和开发注释的指导。
希望对你们所有人都有用。
版权2017建造️iran毛拉本文转载于:http://www.diyabc.com/frontweb/news33279.html
✅Vue选择图像的更多相关文章
- 基于VUE选择上传图片并在页面显示(图片可删除)
demo例子: 依赖文件 : http://files.cnblogs.com/files/zhengweijie/jquery.form.rar HTML文本内容: <template> ...
- opencv保存选择图像中的区域(二)
/* * ===================================================================================== * * Filen ...
- opencv保存选择图像中的区域
在自己建立行人检测的图像库时用到,参考别人的修改了一下: #include "opencv2/core/core.hpp" #include "opencv2/highg ...
- vue 选择图片(限定大小)上传到服务器
FormData: https://developer.mozilla.org/zh-CN/docs/Web/API/FormData/Using_FormData_Objects 成果: htm ...
- vue 选择之单选,多选,反选,全选,反选
1.单选 当我们用v-for渲染一组数据的时候,我们可以带上index以便区分他们我们这里利用这个index来简单地实现单选. <li v-for="(item,index) in r ...
- 【opencv学习笔记六】图像的ROI区域选择与复制
图像的数据量还是比较大的,对整张图片进行处理会影响我们的处理效率,因此常常只对图像中我们需要的部分进行处理,也就是感兴趣区域ROI.今天我们来看一下如何设置图像的感兴趣区域ROI.以及对ROI区域图像 ...
- 图像的ROI区域选择与复制
[opencv学习笔记六]图像的ROI区域选择与复制 孜然 7 人赞同了该文章 图像的数据量还是比较大的,对整张图片进行处理会影响我们的处理效率,因此常常只对图像中我们需要的部分进行处理,也就是感 ...
- Vue开源项目库汇总
最近做了一个Vue开源项目库汇总,里面集合了OpenDigg 上的优质的Vue开源项目库,方便移动开发人员便捷的找到自己需要的项目工具等,感兴趣的可以到GitHub上给个star. UI组件 elem ...
- Vue常用经典开源项目汇总参考-海量
Vue常用经典开源项目汇总参考-海量 Vue是什么? Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的 渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的 ...
随机推荐
- HTML5 Drag & Drop
一定要区分不同事件产生的对象 源元素 属性:draggable = "true" 事件: ondragstart:开始拖拽 ondragend:拖拽结束 目标元素 事件: ondr ...
- 深入理解 IoC、DI
本文转载自博客:https://www.cnblogs.com/xinhuaxuan/p/6132372.html 1.控制反转:谁控制谁?控制什么?为何叫反转(对应于正向)?哪些方面反转了?为何需要 ...
- IIS上传文件最大限制问题
IIS服务器文件最大限制默认是30M. 自定义方法:修改配置文件,路径是:C:\Windows\System32\inetsrv\Config\applicationHost.config 在requ ...
- javascript事件环微任务和宏任务队列原理
哈喽!大家好!我是木瓜太香,我又来嘞,今天来说说前端面试中经常别问到的 JS 事件环问题. JS 事件环 JS 程序的运行是离不开事件环机制的,这个机制保证在发生某些事情的时候我们有机会执行一个我们事 ...
- PyCharm怎样添加Qt designer
cmd命令检查是否安装一下工具包 不存在,用pip 命令安装 添加环境变量; QT_QPA_PLATFORM_PLUGIN_PATH ---D:\VNConda\Lib\site-package ...
- JAVA热部署,通过agent进行代码增量热替换!!!
在前说明:好久没有更新博客了,这一年在公司做了好多事情,包括代码分析和热部署替换等黑科技,一直没有时间来进行落地写出一些一文章来,甚是可惜,趁着中午睡觉的时间补一篇介绍性的文章吧. 首先热部署的场景是 ...
- 如何把自己开发的项目上传到GitHub仓库或者码云仓库?
首先你需要用你的邮箱去注册一个自己的GitHub仓库 or 码云仓库.然后确保你的电脑安装了git. 码云仓库:https://gitee.com/ GitHub:https://github.com ...
- goto 语法在 PHP 中的使用
在C++.Java及很多语言中,都存在着一个神奇的语法,就是goto.顾名思义,它的使用是直接去到某个地方.从代码的角度来说,也就是直接跳转到指定的地方.PHP中也有这个功能,我们先来看看它是如何使用 ...
- vue项目初始化自定义webpack与eslint
文章目录 问题 简化步骤 问题 // main.js import Antd from "ant-design-vue"; import "ant-design-vue/ ...
- matlab中的多项式计算
在做多项式加法的时候需要做多项式扩展.这里将g1扩展到与f等长 多项式的乘积,是两个多项式之和减1, 多项式求导函数:ployder() 先建立两个多项式,再求a的导函数 在计算两个多项式乘积的导函数 ...