rect-selection v1.0.4

rect-selection

介绍

vue 鼠标框选
在页面中按住鼠标左键并拖动行成一个矩形的选择框
释放鼠标按键返回选中节点的视图key

LOG

2023年4月24日 14:10:44 修改了一个在父标签有position: relative;时会出现定位不准的BUG

安装教程

npm i -S rect-selection

属性(Attributes)

参数	说明	类型	默认值
rectCss	选择框的样式	String	'position:absolute... ...'
selectedClass	选中子节点的类名	String	'rect-selected'

事件(Events)

Event Name	Description	Parameters
rectSelected	返回选中节点的视图的key	Array

使用说明

<template>
  <rect-selection @rectSelected="rectSelected">
    <div v-for="(item, idx) in list" :key="idx">
      {{ item.name }}
    </div>
  </rect-selection>
</template>

<script>
import RectSelection from 'rect-selection'
export default {
  components: {
    RectSelection,
  },

  data() {
    let list = []
    for (let i = 0; i < 12; i++) {
      list.push({ name: `name${i}` })
    }
    return {
      list,
    }
  },

  methods: {
    rectSelected(key) {
      let r = []
      for (let item of key) {
        r.push(this.list[item])
      }

      // 返回选中节点的数据集合
      console.log('r', r)
      return r
    },
  },
}
</script>

注意

Vue的设计理念是"数据->视图",但鼠标框选是 "视图->数据" 所以无法直接返回"数据". 只能返回视图的key,其父级通过key查找相应数据