refactor

src/components/DragSelect/index.vue

@@ -1,6 +1,6 @@
 <template>
-  <el-select v-model="selectVal" :v-bind="$attrs" multiple>
+  <el-select v-model="selectVal" :v-bind="$attrs" class="drag-select" multiple>
-    <el-option v-for="item in options" :label="item.label" :value="item.value" :key="item.value" />
+    <slot/>
   </el-select>
 </template>
 
@@ -13,33 +13,18 @@ export default {
     value: {
       type: Array,
       required: true
-    },
-    options: {
-      type: Array,
-      required: true
-    }
-  },
-  data() {
-    return {
-
     }
   },
   computed: {
     selectVal: {
       get() {
-        console.log([...this.value])
         return [...this.value]
       },
-      set() {
+      set(val) {
-
+        this.$emit('input', [...val])
       }
     }
   },
-  watch: {
-    value(val) {
-      console.log(val)
-    }
-  },
   mounted() {
     this.setSort()
   },
@@ -54,7 +39,6 @@ export default {
           // Detail see : https://github.com/RubaXa/Sortable/issues/1012
         },
         onEnd: evt => {
-          console.log(evt)
           const targetRow = this.value.splice(evt.oldIndex, 1)[0]
           this.value.splice(evt.newIndex, 0, targetRow)
         }
@@ -64,10 +48,14 @@ export default {
 }
 </script>
 
-<style>
+<style scoped>
-.sortable-ghost{
+.drag-select >>> .sortable-ghost{
   opacity: .8;
   color: #fff!important;
   background: #42b983!important;
 }
+
+.drag-select >>> .el-tag{
+  cursor: pointer;
+}
 </style>

src/directive/el-dragSelect/drag.js

@@ -1,30 +0,0 @@
-// import Sortable from 'sortablejs'
-
-// function setSort(el, binding) {
-//   // import('sortablejs').then(excel => {
-
-//   // })
-//   // import
-//   const d = el.querySelectorAll('.el-select__tags > span')[0]
-//   const sortable = Sortable.create(d, {
-//     ghostClass: 'sortable-ghost', // Class name for the drop placeholder,
-//     setData: function(dataTransfer) {
-//       dataTransfer.setData('Text', '')
-//       // to avoid Firefox bug
-//       // Detail see : https://github.com/RubaXa/Sortable/issues/1012
-//     },
-//     onEnd: evt => {
-//       console.log(binding)
-//       // console.log(evt)
-//       // const targetRow = this.value.splice(evt.oldIndex, 1)[0]
-//       // this.value.splice(evt.newIndex, 0, targetRow)
-//     }
-//   })
-// }
-
-// export default{
-//   bind(el, binding, vnode) {
-//     console.log(binding)
-//     setSort(el, binding)
-//   }
-// }

src/directive/el-dragSelect/index.js

@@ -1,13 +0,0 @@
-import drag from './drag'
-
-const install = function(Vue) {
-  Vue.directive('el-drag-select', drag)
-}
-
-if (window.Vue) {
-  window['el-drag-select'] = drag
-  Vue.use(install); // eslint-disable-line
-}
-
-drag.install = install
-export default drag

src/views/components-demo/dragSelect.vue

@@ -1,68 +1,43 @@
 <template>
   <div class="components-container">
-    <el-select v-el-drag-select v-model="value" multiple placeholder="请选择">
+
+    <el-drag-select v-model="value" style="width:500px;" multiple placeholder="请选择">
       <el-option v-for="item in options" :label="item.label" :value="item.value" :key="item.value" />
-    </el-select>
+    </el-drag-select>
-    {{ value }}
+
+    <div style="margin-top:30px;">
+      <el-tag v-for="item of value" :key="item" style="margin-right:15px;">{{ item }}</el-tag>
+    </div>
+
   </div>
 </template>
 
 <script>
-import Sortable from 'sortablejs'
+import ElDragSelect from '@/components/DragSelect' // base on element-ui
-import elDragSelect from '@/directive/el-dragSelect' // base on element-ui
 
 export default {
   name: 'DragSelectDemo',
-  directives: { elDragSelect },
+  components: { ElDragSelect },
   data() {
     return {
-      value: ['黄金糕', '双皮奶'],
+      value: ['Apple', 'Banana', 'Orange'],
       options: [{
-        value: '黄金糕',
+        value: 'Apple',
-        label: '黄金糕'
+        label: 'Apple'
       }, {
-        value: '双皮奶',
+        value: 'Banana',
-        label: '双皮奶'
+        label: 'Banana'
       }, {
-        value: '蚵仔煎',
+        value: 'Orange',
-        label: '蚵仔煎'
+        label: 'Orange'
       }, {
-        value: '龙须面',
+        value: 'Pear',
-        label: '龙须面'
+        label: 'Pear'
       }, {
-        value: '北京烤鸭',
+        value: 'Strawberry',
-        label: '北京烤鸭'
+        label: 'Strawberry'
       }]
     }
-  },
-  mounted() {
-    // this.setSort()
-  },
-  methods: {
-    setSort() {
-      const el = document.querySelectorAll('.el-select__tags > span')[0]
-      this.sortable = Sortable.create(el, {
-        ghostClass: 'sortable-ghost', // Class name for the drop placeholder,
-        setData: function(dataTransfer) {
-          dataTransfer.setData('Text', '')
-          // to avoid Firefox bug
-          // Detail see : https://github.com/RubaXa/Sortable/issues/1012
-        },
-        onEnd: evt => {
-          // console.log(evt)
-          const targetRow = this.value.splice(evt.oldIndex, 1)[0]
-          this.value.splice(evt.newIndex, 0, targetRow)
-        }
-      })
-    }
   }
 }
 </script>
-
-<style>
-.sortable-ghost{
-  opacity: .8;
-  color: #fff!important;
-  background: #42b983!important;
-}
-</style>