✅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 采用自底向上增量开发的 ...
随机推荐
- 算法专题 | 10行代码实现的最短路算法——Bellman-ford与SPFA
今天是算法数据结构专题的第33篇文章,我们一起来聊聊最短路问题. 最短路问题也属于图论算法之一,解决的是在一张有向图当中点与点之间的最短距离问题.最短路算法有很多,比较常用的有bellman-ford ...
- Codeforces Round #580 (Div. 2)-D. Shortest Cycle(思维建图+dfs找最小环)
You are given nn integer numbers a1,a2,…,ana1,a2,…,an. Consider graph on nn nodes, in which nodes ii ...
- 深入了解Netty【七】Netty核心组件
1.Bootstrap与ServerBootstrap bootstrap用于引导Netty的启动,Bootstrap是客户端的引导类,ServerBootstrap是服务端引导类.类继承关系: 2. ...
- 用navicat进行身份验证连接出现cannot connect to Mongodb authentication failed
用navicat进行身份验证连接出现cannot connect to Mongodb authentication failed. 解决办法: 1.打开mongoDB连接 win+r --cmd-- ...
- Python中自己不熟悉的知识点记录
重点笔记: Python 它是动态语言 动态语言的定义:动态编程语言 是 高级程序设计语言 的一个类别,在计算机科学领域已被广泛应用.它是一类 在 运行时可以改变其结构的语言 : ...
- PostgressQL
环境 ubuntu18.04 docker 中 pull postgres:10 images 连接 进入容器内部 docker exec -it [mypostgres] /bin/bash 查看p ...
- Ubuntu查看并修改主机名的方法
1 查看主机名 在Ubuntu系统中,快速查看主机名有多种方法: 在终端窗口中,主机名通常位于@符号后:root@lzyws739307453:~#例如这个的主机名就是lzyws739307453. ...
- Java代码工具EasyCode使用
写Java代码,增删改查,最无趣而又最基础.那机器人就来了,帮你写,减少你的基础的无趣的工作. 推荐两个代写代码的神奇工具Mybatis-generator与EasyCode.这两款软件的数据库持久层 ...
- JAVA JDK 环境变量配置 入门详解 - 精简归纳
JAVA JDK 环境变量配置 入门详解 - 精简归纳 JERRY_Z. ~ 2020 / 9 / 13 转载请注明出处!️ 目录 JAVA JDK 环境变量配置 入门详解 - 精简归纳 一.为什么j ...
- Git | Git入门,成为项目管理大师(一)
大家好,周一我们迎来了一个新的专题--git. 写这个专题的初衷有两点,第一点是觉得好像很少有公众号提到git相关的技术,可能是觉得太基础了看不上.但实际上git非常重要,在我们实际的开发工作当中使用 ...