miysortable-vue

miysortable-vue

sortable in vue

Installation

$ npm i miysortable-vue

Then, use or import it

// gobal register：
import VueSortable from 'miysortable-vue';
Vue.use(VueSortable)

// Or in your component：
import { sortable } from 'miysortable-vue';

export default {
  directives: {
    sortable
  },
  // ...your code...
}

Usage

Add directives in your element

<th v-sortable:{methodName}.tooltip.enum="{dataName}">name</th>

Argument

{methodName}：The method will be call, after process finish.

{dataName}：The object in data you set.

tooltip：If you want show the tooltip of sort index, add this.

enum：The sort description will save int, if not ,save on string(desc/asc).

Sample

Set data you want to save on, and method will be call

<th v-sortable:search.tooltip="sort.name">name</th>

 data() {
    return {
      sort: {} // the place you want to save 
    };
  },
  methods: {
    search() {
      // send this.sort to backend...
    }
  }

custom style of arrow and tooltip

.vue-sortable {
  width: auto;
  height: auto;
  background-color: #fff;
  position: relative;
}

.vue-sortable .b-down {
  border-color: #000000 #fff #fff;
  border-style: solid;
  border-width: 4px;
  position: absolute;
  top: 7px;
}

.vue-sortable .b-up {
  border-color: #fff #fff #000000;
  border-style: solid;
  border-width: 4px;
  position: absolute;
  top: 7px;
}

.vue-sortable .tooltiptext {
  font-size: 1px;
  left: 5px;
  top: -9px;
  width: 15px;
  background-color: rgb(82, 72, 72);
  color: #fff;
  text-align: center;
  border-radius: 5px;
  padding: 1px 0;

  position: absolute;
  z-index: 1;
}

format of transfer data

sort:{
 name: {value: "desc", index: 0}
}