vue2-images v1.0.9

vue2-images

images container module, support dragged、crtl+v(paste)、click

Request

delete button is use google icon, must import before use it!

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

import

install via NPM

npm install vue2-images

Usage

import vue2Images from 'vue2-images/src/lib/index'

Vue.use(vue2Images)

Template

<div id="app">
  <div style="display: flex; flex-wrap: wrap;gap:5px;">
    <div v-for="img in images" :key="img._id">
      <lyztw-image-container :data="img" @on-delete="removeImage" edit-mode size="150" deleteBtnIcon="face" />
    </div>
    <lyztw-add-image-btn size="150" @on-select="addImage" @on-drop="addImage" @on-paste="addImage"
      ><div>dragged、<br />crtl + v paste、<br />click</div>
    </lyztw-add-image-btn>
  </div>
</div>

export default {
  name: 'app',
  data () {
    return {
      images:[]
    }
  },
  methods:{
    addImage (imgFile) {
      this.images.push({
        src: imgFile.src,
        _id: Math.random()
          .toString()
          .split('.')
          .pop(),
        file: imgFile.file
      })
    },
    removeImage (imgFile) {
      this.images.splice(this.images.findIndex(image => image._id === imgFile._id), 1)
    }
  }
}

lyztw-add-image-btn

props

emits

lyztw-image-container

props

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

For detailed explanation on how things work, npm i vue2-images.