下载 ✅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