Vue图片选择(Vue Select Image)
made with Vuejs

Vue图片选择(Vue Select Image)

这是一个图片选择组件。

简介及使用教程

Vue图片选择(Vue Select Image)是一个图片选择组件,支持从列表中选择图像,提供多选、标签、自定义活动状态和样式等功能。

安装

Npm

npm i vue-select-image

Yarn

yarn add vue-select-image

使用

引入

import VueSelectImage from 'vue-select-image'

添加样式

require('vue-select-image/dist/vue-select-image.css')

注册组件

components: { VueSelectImage }

提供图片数据

[{
  id: '1',
  src: 'https://unsplash.it/200?random',
  alt: 'Alt Image 1'
}, {
  id: '2',
  src: 'https://unsplash.it/200?random',
  alt: 'Alt Image 2'
}]

单选

<vue-select-image :dataImages="dataImages"
                  @onselectimage="onSelectImage">
</vue-select-image>

多选

<vue-select-image :dataImages="dataImages"
                  :is-multiple="true"
                  :selectedImages="initialSelected"
                  @onselectmultipleimage="onSelectMultipleImage">
</vue-select-image>

示例

image.png

image.png

作者

Irfan Maulana

@maz_ipan

相关项目

这是一个基于Vue.js的循环图像序列播放器。
这是一个基于Vue的图像墙组件。
这是一个图片显示视差指令。
这是一个可以用手指或鼠标在浏览器内绘制svg路径的APP。
这是一个根据鼠标悬停缩放响应式的图像组件。
这是一个简单美观的图片上传工具。
这是一个可以让2张图像之间的差异突出现实的组件。