✅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