关于npm:selectionarea鼠标框选文件

最近做了一个相似于云盘的 Web 文件治理 利用，须要具备一个鼠标框选文件打包下载的性能，这里记录一下前端的实现过程。

利用 UI

须要鼠标按下滑动时呈现线框，提取被框选的文件 id，而后上传给服务端进行打包下载。

失常的网页，按下鼠标左键滑动是不会呈现线框的，这里发现了一个好用的库 selection-area。

具体内容大家能够参考官网文档。

上面是我写得小 demo。

<template>
  <div class="parent">
    <div v-for="(item,index) in list" class="child" :data-id="item.id" :key="index">{{item.name}}</div>
  </div>
</template>

<script>
import SelectionArea from 'selection-area';

export default {
  name: "selection",
  computed: {list() {let arr = []
      for(let i =0;i<=10;i++) {arr.push({name: `file-${i}`, id: i})
      }
      return arr
    }
  },
  mounted() {
    let config = {container: document.querySelector('.parent'),
      area: {class: 'custom-area'},
      targets: '.child',
      touchable: true,
      autostart: true,
      callback: selection => {if (selection.length == 0) alert("empty selection");
        else alert(`${ selection.length} items selected`);

        console.log(selection.map(item => item.dataset.id))
        document.querySelectorAll('.child').forEach(item => {item.classList.remove('active')
        })
        selection.forEach(item => {item.classList.add('active')
        })
      }
    }

    let selectable = new SelectionArea(config);
  }
}
</script>

<style scoped>
body {user-select: none;}
.parent {
  width: 100%;
  height: 100vh;
  background-color: aliceblue;
  display: flex;
  gap: 10px;
  padding: 20px;
}
.child {
  width: 50px;
  height: 50px;
  background-color: antiquewhite;
}
.child.active {box-shadow: 0 0 2px 1px rgba(255,0,0,0.4);
}
.parent>>>.custom-area {background: rgba(52, 152, 219, 0.1);
  border: 1px dotted #2980b9;
}
</style>

在线演示地址