Vue2Sort

Vue Component for Vue 2.x

Install

    npm install vue2-sort --save

Demo

For demo, please see here

Usage

1. Import the component

import Vue2Sort from 'vue2-sort';

2.1 Use it globally

Vue.use(Vue2Sort);

// OR with options

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

*3. Access it locally

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

components: {
    'vue2-sort': Vue2Sort
},

Properties

• value: any

Example

<template>
    <div id="app" style="text-align: center">
        <vue2-sort v-model="items" class="d-flex flex-row flex-wrap align-items-start pre-scrollable">
            <div class="card card-body fixed bg-light">fixed</div>
            <div class="card card-body" v-for="(item, i) in items" :key="item.name">{{item.name}}</div>
            <div class="card card-body fixed bg-light">fixed</div>
        </vue2-sort>

        <pre class="debug">items: {{items}}</pre>

        <button class="btn btn-primary btn-sm" type="button" @click="items.push({name: Math.random()})">add</button>
    </div>
</template>

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

    Vue.use(Vue2Sort, {});

    export default {
        name: 'app',
        data() {
            return {
                show: false,
                items: [
                    {name: 'one'},
                    {name: 'two'},
                    {name: 'three'},
                    {name: 'four'},
                    {name: 'five'},
                    {name: 'six'},
                ],
                _el: null,
            }
        },
        methods: {

        },
    }
</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