下载 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. 算法专题 | 10行代码实现的最短路算法——Bellman-ford与SPFA

    今天是算法数据结构专题的第33篇文章,我们一起来聊聊最短路问题. 最短路问题也属于图论算法之一,解决的是在一张有向图当中点与点之间的最短距离问题.最短路算法有很多,比较常用的有bellman-ford ...

  2. 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 ...

  3. 深入了解Netty【七】Netty核心组件

    1.Bootstrap与ServerBootstrap bootstrap用于引导Netty的启动,Bootstrap是客户端的引导类,ServerBootstrap是服务端引导类.类继承关系: 2. ...

  4. 用navicat进行身份验证连接出现cannot connect to Mongodb authentication failed

    用navicat进行身份验证连接出现cannot connect to Mongodb authentication failed. 解决办法: 1.打开mongoDB连接 win+r --cmd-- ...

  5. Python中自己不熟悉的知识点记录

    重点笔记: Python  它是动态语言 动态语言的定义:动态编程语言   是   高级程序设计语言   的一个类别,在计算机科学领域已被广泛应用.它是一类   在 运行时可以改变其结构的语言   : ...

  6. PostgressQL

    环境 ubuntu18.04 docker 中 pull postgres:10 images 连接 进入容器内部 docker exec -it [mypostgres] /bin/bash 查看p ...

  7. Ubuntu查看并修改主机名的方法

    1 查看主机名 在Ubuntu系统中,快速查看主机名有多种方法: 在终端窗口中,主机名通常位于@符号后:root@lzyws739307453:~#例如这个的主机名就是lzyws739307453. ...

  8. Java代码工具EasyCode使用

    写Java代码,增删改查,最无趣而又最基础.那机器人就来了,帮你写,减少你的基础的无趣的工作. 推荐两个代写代码的神奇工具Mybatis-generator与EasyCode.这两款软件的数据库持久层 ...

  9. JAVA JDK 环境变量配置 入门详解 - 精简归纳

    JAVA JDK 环境变量配置 入门详解 - 精简归纳 JERRY_Z. ~ 2020 / 9 / 13 转载请注明出处!️ 目录 JAVA JDK 环境变量配置 入门详解 - 精简归纳 一.为什么j ...

  10. Git | Git入门,成为项目管理大师(一)

    大家好,周一我们迎来了一个新的专题--git. 写这个专题的初衷有两点,第一点是觉得好像很少有公众号提到git相关的技术,可能是觉得太基础了看不上.但实际上git非常重要,在我们实际的开发工作当中使用 ...