头图

selection-area鼠标框选文件

最近做了一个类似于云盘的 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>

在线演示地址


web开发总结
不积跬步无以至千里
1 篇内容引用

纸上得来终觉浅,绝知此事要躬行

473 声望
27 粉丝
0 条评论
推荐阅读
onMounted is called when there is no active component 已解决
If you are using async setup(), make sure to register lifecycle hooks before the first await statement.

来了老弟阅读 149

ESlint + Stylelint + VSCode自动格式化代码(2023)
安装插件 ESLint,然后 File -&gt; Preference-&gt; Settings(如果装了中文插件包应该是 文件 -&gt; 选项 -&gt; 设置),搜索 eslint,点击 Edit in setting.json

谭光志34阅读 20.7k评论 9

vue UI框架比较
最好基于vue2.0PC端:因为用过的是饿了么UI,所以比较以饿了么UI为基础element UI 饿了么UI支持vue2.x80分优点:组件的API方法、属性等封装的较为完善缺点:样式有些生硬,不够炫酷美观N3 N3支持vue2.x70分优点:...

chinawzc22阅读 39.8k评论 17

涨姿势了,有意思的气泡 Loading 效果
今日,群友提问,如何实现这么一个 Loading 效果:这个确实有点意思,但是这是 CSS 能够完成的?没错,这个效果中的核心气泡效果,其实借助 CSS 中的滤镜,能够比较轻松的实现,就是所需的元素可能多点。参考我们...

chokcoco21阅读 2.2k评论 3

你可能不需要JS!CSS实现一个计时器
CSS现在可不仅仅只是改一个颜色这么简单,还可以做很多交互,比如做一个功能齐全的计时器?样式上并不复杂,主要是几个交互的地方数字时钟的变化开始、暂停操作重置操作如何仅使用 CSS 来实现这样的功能呢?一起...

XboxYan23阅读 1.6k评论 1

封面图
在前端使用 JS 进行分类汇总
最近遇到一些同学在问 JS 中进行数据统计的问题。虽然数据统计一般会在数据库中进行,但是后端遇到需要使用程序来进行统计的情况也非常多。.NET 就为了对内存数据和数据库数据进行统一地数据处理,发明了 LINQ (L...

边城17阅读 2k

封面图
【已结束】SegmentFault 思否写作挑战赛!
SegmentFault 思否写作挑战赛 是思否社区新上线的系列社区活动在 2 月 8 日 正式面向社区所有用户开启;挑战赛中包含多个可供作者选择的热门技术方向,根据挑战难度分为多个等级,快来参与挑战,向更好的自己前进!

SegmentFault思否20阅读 5.6k评论 10

封面图

纸上得来终觉浅,绝知此事要躬行

473 声望
27 粉丝
宣传栏