Vue2Gallery

Vue Component for Vue 2.x

Install

    npm install vue2-gallery --save

Demo

For demo, please see here

Usage

1. Import the component

import Vue2Gallery from 'vue2-gallery';

2.1 Use it globally

Vue.use(Vue2Gallery);

// OR with options

Vue.use(Vue2Gallery, {baseURL: 'https://jsonplaceholder.typicode.com/', headers: {'X-API-KEY': 1234}});

*3. Access it locally

<template>
    <vue2-gallery ref="http" v-model="data" :error-fn="onError"></vue2-gallery>
</template>

components: {
    'vue2-gallery': Vue2Gallery
},

Properties

• value: any

• sortable: Boolean

• selectable: Boolean

• clickable: Boolean

• buttons: Array

Example

<template>
    <div id="app" style="text-align: center">
        <div>
            <vue2-gallery v-model="items" :sortable="true" :selectable="true" @click="click" @thumbClick="thumbClick" @save="save" @remove="remove" @test="test" @select="select"
                          :buttons="['save', {name:'remove', label:'<i class=&quot;fa fa-trash&quot;></i>', class: 'btn-outline-danger btn-sm'}]" class="pre-scrollable">
            </vue2-gallery>

            <pre>{{selection}}</pre>

            <button class="btn btn-primary btn-sm" type="button" @click="test">Test</button>

        </div>
    </div>
</template>

<script>
    import Vue from 'vue';
    import Vue2Gallery from '../src/index'

    Vue.use(Vue2Gallery, {});

    export default {
        name: 'app',
        data() {
            return {
                items: this.init(),
                selection: [],
            }
        },
        methods: {
            init() {
                let results = [];

                for (let i = 0; i < 12; i++) {
                    results.push({src: 'https://placeimg.com/320/200/any?r=' + i.toString(), title: i.toString(), contentz: 'this is a test ' + i.toString()});
                }

                results[3].buttons = [{name: 'test', label: '<i class="fa fa-check"></i> Hi!', class: 'btn-danger btn-sm'}];
                results[3].thumbOptions = {playButton: true, caption: 'Video'};

                return results;
            },
            test(data) {
                console.log("test: ", data);
            },
            save(data) {
                console.log("save: ", data);
            },
            remove(data) {
                console.log("remove: ", data);
            },
            click(item) {
                console.log("click: ", item);
            },
            thumbClick(item) {
                console.log("thumbClick: ", item);
            },
            select(items) {
                console.log("items: ", items);
                this.selection = items;
            }
        },
        computed: {}
    }
</script>

Contributing

Contributions are welcome

Build Setup

# install dependencies
npm install

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

# build for production with minification
npm run build