vuedraggable(vue2.0)組件詳解

github地址

安裝

yarn add vuedraggable

npm i -S vuedraggable

使用方式

通常

<draggable v-model="myArray" group="people" @start="drag=true" @end="drag=false">
   <div v-for="element in myArray" :key="element.id">{{element.name}}</div>
</draggable>

 import draggable from 'vuedraggable'
  ...
  export default {
        components: {
            draggable,
        },
  ...

使用過渡transition-group

<draggable v-model="myArray">
    <transition-group>
        <div v-for="element in myArray" :key="element.id">
            {{element.name}}
        </div>
    </transition-group>
</draggable>

使用footer slot

<draggable v-model="myArray" draggable=".item">
    <div v-for="element in myArray" :key="element.id" class="item">
        {{element.name}}
    </div>
    <button slot="footer" @click="addPeople">Add</button>
</draggable>

使用header slot

<draggable v-model="myArray" draggable=".item'">
    <div v-for="element in myArray" :key="element.id" class="item">
        {{element.name}}
    </div>
    <button slot="header" @click="addPeople">Add</button>
</draggable>

使用vuex

<draggable v-model='myList'>

computed: {
    myList: {
        get() {
            return this.$store.state.myList
        },
        set(value) {
            this.$store.commit('updateList', value)
        }
    }
}

props

value

類型：數組，
必需：否，
默認值：null

通常與內部元素v-for指令引用的數組相同,該組件的首先使用方法，與vuex兼容，也可使用v-model

list

類型：數組，
必需：否，
默認值：null

除了上面的 value prop之外，list是一個要與拖放同步的數組。
主要的區別是list prop是由使用splice方法的draggable組件更新的，而value是不可變的,兩者不能一起使用

tag

類型：字符串
默認值：div

可拖動組件創建的元素的HTML節點類型，作為包含插槽的外部元素
還可以將vue組件的名稱作為元素傳遞。在本例中，draggable屬性將傳遞給創建的組件

clone

類型：function
默認值：(original) => { return original;}


當克隆選項為真時，調用源組件上的函數來克隆元素。
惟一的參數是要克隆的viewModel元素，返回的值是它的克隆版本。
在默認情況下vue.draggable重用viewModel元素，所以如果您想克隆或深度克隆它，就必須使用這個鈎子。

move

類型：函數

如果不為空，這個函數將以類似於Sortable onMove回調的方式調用。返回false將取消拖動操作

function onMoveCallback(evt, originalEvent){
   ...
    // return false; — for cancel
}

<draggable :list="list" :move="checkMove">

checkMove: function(evt){
    return (evt.draggedContext.element.name!=='apple');
}

componentData

類型：Object

該props是用於傳遞額外的信息到子組件

props：要在子組件中傳遞的props
attrs：要在子組件中傳遞的attrs
on：要在子組件中訂閱的事件


<draggable tag="el-collapse" :list="list" :component-data="getComponentData()">
    <el-collapse-item v-for="e in list" :title="e.title" :name="e.name" :key="e.name">
        <div>{{e.description}}</div>
     </el-collapse-item>
</draggable>

methods: {
    handleChange() {
      console.log('changed');
    },
    inputChanged(value) {
      this.activeNames = value;
    },
    getComponentData() {
      return {
        on: {
          change: this.handleChange,
          input: this.inputChanged
        },
        attrs:{
          wrap: true
        },
        props: {
          value: this.activeNames
        }
      };
    }
  }

Events

包括start, add, remove, update, end, choose, sort, filter, clone這些事件
當list不為空且相應數組由於拖放操作而更改時，將觸發事件

<draggable :list="list" @end="onEnd">

參數屬性：

源碼分析待續。。。