修改穿梭框组件实现

examples/containers/Transfer.vue

@@ -8,11 +8,11 @@
         slot="option"
         slot-scope="option"
       >
-        <option class="option-wrap">
-          <span>{{option.data.name+'&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'}}</span>
-          <span>{{option.data.name}}</span>&nbsp;
+        <div class="option-wrap">
+          <span>{{option.data.label}}</span>
           <span>{{option.data.name}}</span>
-        </option>
+          <span>{{option.data.label}}</span>
+        </div>
       </template>
     </ks-transfer>
   </list-layout>
@@ -24,26 +24,17 @@ export default {
   data() {
     return {
       list: [
-        {
-          id: 1,
-          label: '1111',
-          name: '213',
-        },
-        {
-          id: 2,
-          label: '2222',
-          name: '213',
-        },
-        {
-          id: 3,
-          label: '3333',
-          name: '213',
-        },
-        {
-          id: 4,
-          label: '3223',
-          name: '213',
-        },
+        { id: 1, label: '1111', name: '213' },
+        { id: 2, label: '2222', name: '213' },
+        { id: 3, label: '3333', name: '213' },
+        { id: 4, label: '3223', name: '213' },
+        { id: 5, label: '5555', name: '213' },
+        { id: 6, label: '6666', name: '213' },
+        { id: 7, label: '7777', name: '213' },
+        { id: 8, label: '8888', name: '213' },
+        { id: 9, label: '9999', name: '213' },
+        { id: 10, label: '1465', name: '213' },
+        { id: 11, label: '2387', name: '213' },
       ],
       value: [1, 3],
     };

package.json

 {
   "name": "rym-element-ui",
-  "version": "0.1.59",
+  "version": "0.1.60",
   "description": "任意门组件库",
   "main": "lib/rymUi.common.js",
   "scripts": {

src/components/Transfer/Transfer.vue

@@ -19,16 +19,21 @@
         </div>
       </div>
       <div class="transfer-allData-box">
-        <select
+        <ul
           class="transfer-allData-select"
-          multiple
-          v-model="selected.all"
+          tabindex="1"
+          @focus="() => resetSelect('value')"
         >
           <template v-for="(item, index) in allDataOptions">
-            <option
+            <li
+              :class="{'selected': selected.all.indexOf(getValue('key', item))>-1}"
               :key="index"
+              :id="index"
               :value="getValue('key', item)"
+              @click="() => selectedValueHandle('all', getValue('key', item))"
               @dblclick="() => addClickValue(getValue('key', item))"
+              @mousedown="() => dragstartHandle('all', index)"
+              @mouseover="() => dragingHandle('all', index)"
             >
               <slot
                 name="option"
@@ -37,9 +42,9 @@
               >
                 {{ getValue('label', item) }}
               </slot>
-            </option>
+            </li>
           </template>
-        </select>
+        </ul>
       </div>
     </div>
     <div class="transfer-btnBox">
@@ -102,17 +107,20 @@
         </div>
       </div>
       <div class="transfer-selectData-box">
-        <select
+        <ul
           class="transfer-selectData-select"
-          multiple
-          v-model="selected.value"
+          tabindex="2"
+          @focus="() => resetSelect('all')"
         >
           <template v-for="(item, index) in selectDataOptions">
-
-            <option
+            <li
+              :class="{'selected': selected.value.indexOf(getValue('key', item))>-1}"
               :key="index"
               :value="getValue('key', item)"
+              @click="() => selectedValueHandle('value', getValue('key', item))"
               @dblclick="() => removeClickValue(getValue('key', item))"
+              @mousedown="() => dragstartHandle('value', index)"
+              @mouseover="() => dragingHandle('value', index)"
             >
               <slot
                 name="option"
@@ -121,11 +129,11 @@
               >
                 {{ getValue('label', item) }}
               </slot>
-            </option>
+            </li>
 
           </template>
 
-        </select>
+        </ul>
       </div>
     </div>
   </div>
@@ -150,6 +158,9 @@ export default {
         all: [],
         value: [],
       },
+      dragging: false,
+      startIndex: undefined,
+      lastIndex: undefined,
     };
   },
   watch: {
@@ -212,6 +223,7 @@ export default {
     },
     removeClickValue(val) {
       this.trueValue = this.trueValue.filter(item => item !== val);
+      this.selected.value = this.selected.value.filter(item => item !== val);
     },
     addSelectedValue(flag) {
       this.trueValue = flag
@@ -243,11 +255,56 @@ export default {
       if (key === 'key') return item.id;
       return item[key];
     },
+    selectedValueHandle(key, val) {
+      this.selected[key] = [val];
+    },
+    dragstartHandle(key, index) {
+      let value =
+        key === 'value'
+          ? this.selectDataOptions[index]
+          : this.allDataOptions[index];
+      this.selectedValueHandle(value);
+      this.startIndex = index;
+      this.dragging = true;
+      document.addEventListener('mouseup', this.dragendHandle);
+    },
+    dragingHandle(key, index) {
+      if (this.dragging) {
+        let value =
+          key === 'value'
+            ? this.selectDataOptions[index]
+            : this.allDataOptions[index];
+        this.lastIndex = index;
+        let options =
+          key === 'value' ? this.selectDataOptions : this.allDataOptions;
+        if (this.lastIndex > this.startIndex) {
+          this.selected[key] = options
+            .slice(this.startIndex, this.lastIndex + 1)
+            .map(item => this.getValue('key', item));
+        } else {
+          this.selected[key] = options
+            .slice(this.lastIndex, this.startIndex + 1)
+            .map(item => this.getValue('key', item));
+        }
+      }
+    },
+
+    dragendHandle(e) {
+      this.dragging = false;
+      this.startIndex = undefined;
+      this.lastIndex = undefined;
+      document.removeEventListener('mouseup', this.dragendHandle);
+    },
+    resetSelect(key) {
+      this.selected[key] = [];
+    },
   },
 };
 </script>
 
 <style lang="scss">
+@import '@/assets/styles/variables.scss';
+
 .transfer-wrap {
   height: 600px;
   display: flex;
@@ -260,8 +317,19 @@ export default {
       height: 560px;
       .transfer-selectData-select,
       .transfer-allData-select {
+        background-color: #fff;
+        margin: 0;
+        padding: 0;
+        overflow-y: auto;
         width: 100%;
         height: 100%;
+        li {
+          user-select: none;
+          &.selected {
+            color: #fff;
+            background-color: $subMenuBg;
+          }
+        }
       }
     }
   }