下载 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选择图像的更多相关文章

  1. 基于VUE选择上传图片并在页面显示(图片可删除)

    demo例子: 依赖文件 : http://files.cnblogs.com/files/zhengweijie/jquery.form.rar HTML文本内容: <template> ...

  2. opencv保存选择图像中的区域(二)

    /* * ===================================================================================== * * Filen ...

  3. opencv保存选择图像中的区域

    在自己建立行人检测的图像库时用到,参考别人的修改了一下: #include "opencv2/core/core.hpp" #include "opencv2/highg ...

  4. vue 选择图片(限定大小)上传到服务器

    FormData:  https://developer.mozilla.org/zh-CN/docs/Web/API/FormData/Using_FormData_Objects  成果: htm ...

  5. vue 选择之单选,多选,反选,全选,反选

    1.单选 当我们用v-for渲染一组数据的时候,我们可以带上index以便区分他们我们这里利用这个index来简单地实现单选. <li v-for="(item,index) in r ...

  6. 【opencv学习笔记六】图像的ROI区域选择与复制

    图像的数据量还是比较大的,对整张图片进行处理会影响我们的处理效率,因此常常只对图像中我们需要的部分进行处理,也就是感兴趣区域ROI.今天我们来看一下如何设置图像的感兴趣区域ROI.以及对ROI区域图像 ...

  7. 图像的ROI区域选择与复制

    [opencv学习笔记六]图像的ROI区域选择与复制 孜然   7 人赞同了该文章 图像的数据量还是比较大的,对整张图片进行处理会影响我们的处理效率,因此常常只对图像中我们需要的部分进行处理,也就是感 ...

  8. Vue开源项目库汇总

    最近做了一个Vue开源项目库汇总,里面集合了OpenDigg 上的优质的Vue开源项目库,方便移动开发人员便捷的找到自己需要的项目工具等,感兴趣的可以到GitHub上给个star. UI组件 elem ...

  9. Vue常用经典开源项目汇总参考-海量

    Vue常用经典开源项目汇总参考-海量 Vue是什么? Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的 渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的 ...

随机推荐

  1. HTML5 Drag & Drop

    一定要区分不同事件产生的对象 源元素 属性:draggable = "true" 事件: ondragstart:开始拖拽 ondragend:拖拽结束 目标元素 事件: ondr ...

  2. 深入理解 IoC、DI

    本文转载自博客:https://www.cnblogs.com/xinhuaxuan/p/6132372.html 1.控制反转:谁控制谁?控制什么?为何叫反转(对应于正向)?哪些方面反转了?为何需要 ...

  3. IIS上传文件最大限制问题

    IIS服务器文件最大限制默认是30M. 自定义方法:修改配置文件,路径是:C:\Windows\System32\inetsrv\Config\applicationHost.config 在requ ...

  4. javascript事件环微任务和宏任务队列原理

    哈喽!大家好!我是木瓜太香,我又来嘞,今天来说说前端面试中经常别问到的 JS 事件环问题. JS 事件环 JS 程序的运行是离不开事件环机制的,这个机制保证在发生某些事情的时候我们有机会执行一个我们事 ...

  5. PyCharm怎样添加Qt designer

    cmd命令检查是否安装一下工具包 不存在,用pip 命令安装 添加环境变量; QT_QPA_PLATFORM_PLUGIN_PATH    ---D:\VNConda\Lib\site-package ...

  6. JAVA热部署,通过agent进行代码增量热替换!!!

    在前说明:好久没有更新博客了,这一年在公司做了好多事情,包括代码分析和热部署替换等黑科技,一直没有时间来进行落地写出一些一文章来,甚是可惜,趁着中午睡觉的时间补一篇介绍性的文章吧. 首先热部署的场景是 ...

  7. 如何把自己开发的项目上传到GitHub仓库或者码云仓库?

    首先你需要用你的邮箱去注册一个自己的GitHub仓库 or 码云仓库.然后确保你的电脑安装了git. 码云仓库:https://gitee.com/ GitHub:https://github.com ...

  8. goto 语法在 PHP 中的使用

    在C++.Java及很多语言中,都存在着一个神奇的语法,就是goto.顾名思义,它的使用是直接去到某个地方.从代码的角度来说,也就是直接跳转到指定的地方.PHP中也有这个功能,我们先来看看它是如何使用 ...

  9. vue项目初始化自定义webpack与eslint

    文章目录 问题 简化步骤 问题 // main.js import Antd from "ant-design-vue"; import "ant-design-vue/ ...

  10. matlab中的多项式计算

    在做多项式加法的时候需要做多项式扩展.这里将g1扩展到与f等长 多项式的乘积,是两个多项式之和减1, 多项式求导函数:ployder() 先建立两个多项式,再求a的导函数 在计算两个多项式乘积的导函数 ...