使用vue实现鼠标框选文件的功能

<template>
  <div
    ref="fileTable"
    tabindex="0"
    class="file-table"
    @click.stop="handleClickWarp(data)"
    @contextmenu.prevent.stop="
      handleContextmenu({ event: $event, data: data, type: 'empty' })
    "
    @mousedown.left="onmousedownClick"
    @mouseup="handMouseUp"
    @mousemove="onmouseMove"
  >
    <!-- @click.stop="handleBoxClick(data)" -->
    <div class="list-inner" v-if="tableData && tableData.length">
      <ul class="block-box" v-if="type === 'block'">
        <li
          v-for="item in tableData"
          :key="item.hash + '_' + item.fileId + item.isSelect"
          :id="item.hash"
          :class="[
            { cursor: item.mime === 'directory' },
            { active: item.isSelect },
            { isVirtualization: item.isVirtualization },
            { mousehover: !mouseState.isMove },
          ]"
          @click.stop="handleItemClick(item, true)"
          @dblclick.stop="handleDblClick(item)"
          @contextmenu.prevent.stop="
            handleContextmenu({ event: $event, data: item, type: 'file' })
          "
          :title="item.name"
          name="file"
        >
          <div class="icon-warp">
            <img :src="item.icon" />
          </div>
          <div v-if="item.isInput" class="edit">
            <input
              type="text"
              :id="'input_' + item.hash"
              autofocus="autofocus"
              v-model="item.reName"
              @click.stop
              @keyup="handleKeyUp($event, item.reName)"
              @blur="handleOnBlur(item.reName)"
            />
          </div>
          <p v-else class="name">{{ item.name }}</p>
        </li>
      </ul>
      <Table :columns="columns" :data="tableData" v-if="type === 'table'">
        <template slot-scope="{ row }" slot="name">
          <div
            class="name-warp"
            @click.stop="handleItemClick(row, true)"
            @dblclick.stop="handleDblClick(row)"
            @contextmenu.prevent.stop="
              handleContextmenu({ event: $event, data: row, type: 'file' })
            "
          >
            <div class="icon-warp">
              <img :src="row.icon" />
            </div>
            <div v-if="row.isInput" class="edit">
              <input
                type="text"
                :id="'input_' + row.hash"
                autofocus="autofocus"
                v-model="row.reName"
                @keyup="handleKeyUp($event, row.reName)"
                @blur="handleOnBlur(row.reName)"
              />
            </div>
            <p v-else class="name">{{ row.name }}</p>
          </div>
        </template>
        <template slot-scope="{ row }" slot="power">
          <div class="power-warp">
            <p>
              {{ row.read == 1 ? "可读取" : "不可读" }} 和
              {{ row.write == 1 ? "可写入" : "不可写" }}
            </p>
          </div>
        </template>
        <template slot-scope="{ row }" slot="changeTime">
          <div><Time :time="row.ts" /></div>
        </template>
        <template slot-scope="{ row }" slot="size">
          <span>{{ row.formatSize }}</span>
        </template>
        <template slot-scope="{ row }" slot="type">
          <span v-if="row.mime == 'directory'">{{ fileMapTip["folder"] }}</span>
          <span v-else>{{
            fileMapTip[row.suffix] || fileMapTip["unknown"]
          }}</span>
        </template>
      </Table>
      <div id="rectangular"></div>
    </div>
    <NotDataLoading :loading="loading" :data="tableData">
      暂无任何文件
    </NotDataLoading>
  </div>
</template>
<script>
import { formatBytes } from "@/utils/index";
import { fileImgMapSuffix, getRequestId } from "@/utils/files.js";
import { cloneDeep } from "lodash";
export default {
  name: "FileTable",
  data() {
    return {
      tableData: [],
      content: {},
      isReName: false, 
      type: "block", // table block
      sort: "size",
      mouseState: {
        isDown: false,
        isMove: false,
      },
      columns: [
        {
          title: "名称",
          slot: "name",
          // sortable: true,
        },
        {
          title: "权限",
          slot: "power",
          width: 240,
        },
        {
          title: "修改于",
          slot: "changeTime",
          width: 160,
        },
        {
          title: "大小",
          slot: "size",
          // sortable: true,
          width: 160,
        },
        {
          title: "类别",
          slot: "type",
          width: 200,
        },
      ],
    };
  },
  props: ["data", "loading", "copyInfo"],
  watch: {
    copyInfo: {
      handler() {
        this.setData(this.data);
      },
    },
    data: {
      handler(newVal) {
        // console.log(newVal);
        if (newVal) {
          this.setData(newVal);
        } else {
          this.setData({ children: [{}] });
        }
      },
      // deep: true,
      immediate: true,
    }, 
  },
  created() {
    this.isDownESC = false;

    this.keyEvent = { ctrlKey: "", keyCode: 0 };
  },
  mounted() {
    // 键盘操作

    this.keyFiles = [];
    this.$refs.fileTable.onkeydown = (e) => {
    
        // console.log(e);
        // this.$parent.copyInfo = {};
        e = e || window.event;
        // e.preventDefault(); //关闭浏览器快捷键
        // e.keyCode = e.charCode || e.keyCode;
        this.keyEvent = e;
        // console.log(this.keyEvent);
        // console.log({ ...this.keyState });

        if (this.keyEvent.ctrlKey && this.keyEvent.keyCode == 65) {
          // ctr+A
          this.handleIsSelect(this.data.children, true);
          this.$store.commit("setMouseClickType", "keydown");
          this.$store.commit("setKeyFiles", this.data.children);
          e.preventDefault();
        } else if (this.keyEvent.ctrlKey && this.keyEvent.keyCode == 67) {
          // ctr+C
          console.log("ctr+C");
          if (!this.isReName) {
            this.$parent.clickMenuDropdown({ type: "duplicate" });
          }
        } else if (this.keyEvent.ctrlKey && this.keyEvent.keyCode == 86) {
          // ctr+V
          console.log("ctr+V");
          this.$parent.clickMenuDropdown({ type: "paste" });
        } else if (this.keyEvent.ctrlKey && this.keyEvent.keyCode == 88) {
          // ctr+X
          console.log("ctr+X");
          this.$parent.clickMenuDropdown({ type: "shear" });
        } else if (this.keyEvent.keyCode == 27) {
          // ESC 退出重命名
          console.log("ESC");
          this.isDownESC = true;
          this.tableData.forEach((item) => {
            item.reName = "";
            item.isInput = false;
          });
        } else if (
          this.$store.state.keyFiles.length &&
          this.keyEvent.keyCode == 46
        ) {
          // Delete
          console.log("Delete");
          // 判断正在重命名
          let file = this.$store.state.keyFiles[0];
          if (file.hash == this.data.hash) return;
          if (file && !document.querySelector(`#input_${file.hash}`)) {
            this.$parent.clickMenuDropdown({ type: "remove" });
          }
        } 
    };
    this.$refs.fileTable.onkeyup = (e) => {
      // e.preventDefault(); //关闭浏览器快捷键
      this.keyEvent = { ctrlKey: "", keyCode: 0 };
    };
  },
  methods: {
    setData(data) {
      this.itemObj = {};
      if (data.hash) {
        let tableData = fileImgMapSuffix(data.children || []);
        let keyFiles = this.$store.state.keyFiles;

        tableData.forEach((item) => {
          // 文件剪切时是否虚化
          item.isVirtualization = false;
          if (keyFiles.length > 0) {
            keyFiles.forEach((each) => {
              if (
                this.copyInfo.menuType === "shear" &&
                each.hash == item.hash
              ) {
                item.isVirtualization = true;
              }
            });
          }

          item.formatSize = formatBytes(item.size);
          item.fileId = getRequestId(8);
          item.isSelect = false;
        });

        this.tableData = this.handleSortFiles({
          type: window.sessionStorage.getItem("file-order-type") || "date",
          sort: window.sessionStorage.getItem("file-order-sort") || "asc",
          content: tableData,
        });

      }
      this.$parent.childrenInfo = data;
      this.handleItemClick(data);

    },
    handleSortFiles({ type, sort, content }) {
      let data = cloneDeep(content || this.tableData);
      // console.log(type);

      let files = [];
      let folder = [];

      data.forEach((item) => {
        if (item.mime == "directory") {
          folder.push(item);
        } else {
          files.push(item);
        }
      });

      //  按时间排序
      if (type == "date") {
        files.sort(function (a, b) {
          if (sort == "asc") {
            return a.ts - b.ts;
          } else {
            return b.ts - a.ts;
          }
        });
        folder.sort(function (a, b) {
          if (sort == "asc") {
            return a.ts - b.ts;
          } else {
            return b.ts - a.ts;
          }
        });
        if (sort == "asc") {
          return [...folder, ...files];
        } else {
          return [...files, ...folder];
        }
      } else if (type == "name") {
        let sortFile = (data) => {
          let chineseChars = [],
            chars = [];
          data.forEach((item) => {
            // 判断是否为中文
            if (/^[\u4e00-\u9fa5]*$/.test(item.name.charAt(0))) {
              chineseChars.push(item); // 姓名首字符为中文的
            } else {
              chars.push(item); // 姓名首字符非中文的（字母，数字）
            }
          });
          chars.sort((a, b) => {
            if (sort == "asc") {
              return a.name.charCodeAt(0) - b.name.charCodeAt(0);
            } else {
              return b.name.charCodeAt(0) - a.name.charCodeAt(0);
            }
          });
          chineseChars.sort((a, b) => {
            if (sort == "asc") {
              return a.name.localeCompare(b.name);
            } else {
              return b.name.localeCompare(a.name);
            }
          });
          return chars.concat(chineseChars); // list为最终想要的数组
        };

        // return [...sortFile(folder), ...sortFile(files)];
        if (sort == "asc") {
          return [...sortFile(folder), ...sortFile(files)];
        } else {
          return [...sortFile(files), ...sortFile(folder)];
        }
      } else if (type == "size") {
        files.sort(function (a, b) {
          if (sort == "asc") {
            return a.size - b.size;
          } else {
            return b.size - a.size;
          }
        });
        folder.sort(function (a, b) {
          if (sort == "asc") {
            return a.size - b.size;
          } else {
            return b.size - a.size;
          }
        });
        if (sort == "asc") {
          return [...folder, ...files];
        } else {
          return [...files, ...folder];
        }
      }
      return content;
    },

    handleIsSelect(file = [], isSelect = true) {
      // if (file) {
      let arrHash = file.map((item) => item.hash) || [];

      this.tableData.forEach((item) => {
        item.isSelect = false;
        if (arrHash.indexOf(item.hash) > -1) {
          item.isSelect = isSelect;
        }
      });
    
    },
  
    // 监听键盘事件
    handleKeyUp(e, name) {
      if (this.isDownESC) {
        this.isDownESC = false;
        return;
      }
      if (e.keyCode == 13) {
        this.handleOnBlur(name);
        this.handleRename({});
      }
    },
    handleOnBlur(rename) {
      // console.log(rename);
      this.isReName = false;
      if (!rename) {
        return;
      }
      if (rename.slice(0, 1) == ".") {
        this.$mitt.emit("confirm-modal", {
          type: "info",
          title: "系统提示",
          content: "暂不支持以”.“开头的文件名称！",
        });
        return;
      }
      if (this.isDownESC) {
        this.isDownESC = false;
        return;
      }
   
      if (this.createType == "mkdir" || this.createType == "mkfile") {
        this.$emit("created-file-folder", {
          name: rename,
          type: this.createType,
        });
      } else if (this.createType == "rename" && this.itemObj.name !== rename) {
        this.$emit("rename-file-folder", rename);
      } else {
        this.handleRename({});
      }

    
    },

    createFolderFile(row, type) {
      this.handleRename(row, type);
    },

    handleClickWarp(row) {
  
      if (!this.mouseState.isMove) {
        // this.$store.commit("setIsShowFileMetadata", false);
        this.$parent.childrenInfo = row;
        this.handleItemClick(row);
      }
    },
    handleItemClick(row = {}, mouseClickType) {
      if (mouseClickType) {
        this.$store.commit("setMouseClickType", "click");
      }

      this.$store.commit(
        "setIsShowFileMetadata",
        row && row.mime !== "directory"
      );

      if (
        !(
          this.copyInfo.menuType == "shear" ||
          this.copyInfo.menuType == "duplicate"
        )
      ) {
        if (
          this.keyEvent &&
          this.keyEvent.ctrlKey &&
          this.keyEvent.keyCode == 17
        ) {
          this.keyFiles.push(row); 
        } else {
          this.keyFiles = [row];
          this.$parent.childrenInfo = row;
          if (row.hash !== this.itemObj.hash) {
            this.handleRename();
          }
        }
        this.handleIsSelect(this.keyFiles, true);
        this.$store.commit("setKeyFiles", this.keyFiles);
      }
    },
    handleRename(row = {}, type) {
      this.isReName = true;
      if (row.hash) {
        this.$parent.childrenInfo = row;
        // this.active = row.hash;
        this.handleIsSelect([row], true);
      }
      this.itemObj = row;
      this.createType = type;
      this.tableData.forEach((item) => {
        if (item.hash === row.hash) {
          item.reName = row.name;
          item.isInput = true;
          this.$nextTick(() => {
            let dom = document.querySelector(`#input_${item.hash}`);
            dom.focus();
            let lastIndexOf = row.name.length;
            if (row.mime != "directory") {
              lastIndexOf = row.name.lastIndexOf(".");
            }
            this.setInputSelection(dom, 0, lastIndexOf);

          }, 500);
        } else {
          item.reName = "";
          item.isInput = false;
        }
      });
    },
    handleDblClick(row) {
      if (row.mime === "directory") {
        this.$emit("on-dblclick", { data: row, isDblClick: true });
      }
    },
    handleContextmenu({ event, data, type }) {
      this.$store.commit("setMouseClickType", "contextmenu");
      this.$store.commit("setIsShowFileMetadata", false);
      let keyFiles = this.$store.state.keyFiles;
      if (keyFiles.length <= 1) {
        this.handleItemClick(data);
      }
      this.$emit("on-contextmenu", { event, data, type });
      // this.active = data.hash;
    },
    // 选中input中部分文字
    setInputSelection(input, startPos, endPos) {
      input.focus();
      if (typeof input.selectionStart != "undefined") {
        input.selectionStart = startPos;
        input.selectionEnd = endPos;
      } else if (document.selection && document.selection.createRange) {
        // IE branch
        input.select();
        var range = document.selection.createRange();
        range.collapse(true);
        range.moveEnd("character", endPos);
        range.moveStart("character", startPos);
        range.select();
      }
    },

    /********* 鼠标框选事件*********************/

    //鼠标左键按下方法
    onmousedownClick(event) {
      this.selectIdList = [];
      this.mouseState.isDown = true;

      this.start_x = event.clientX;
      this.start_y = event.clientY;
   
    },
    onmouseMove(event) {
      if (!this.mouseState.isDown) return;
      this.mouseState.isMove = true;

      let end_x = event.clientX;
      let end_y = event.clientY;
      let that = this;
      let divElement = document.getElementById("rectangular");
      divElement.style.display = "block";
      divElement.className = "rectangular";
    
      if (that.start_x < end_x) {
        divElement.style.width = end_x - that.start_x + "px";
        divElement.style.height =
          (that.start_y > end_y > 0
            ? that.start_y - end_y
            : end_y - that.start_y) + "px";
        divElement.style.left = that.start_x + "px";
        divElement.style.right = end_x + "px";
        //从下往上
        if (that.start_y > end_y) {
          divElement.style.top = end_y + "px";
          divElement.style.bottom = that.start_y + "px";
        } else {
          divElement.style.top = that.start_y + "px";
          divElement.style.bottom = end_y + "px";
        }
      } else {
        divElement.style.width = that.start_x - end_x + "px";
        divElement.style.height =
          (that.start_y > end_y > 0
            ? that.start_y - end_y
            : end_y - that.start_y) + "px";
        divElement.style.left = end_x + "px";
        divElement.style.right = that.start_x + "px";
        //从下往上
        if (that.start_y > end_y) {
          divElement.style.top = end_y + "px";
          divElement.style.bottom = that.start_y + "px";
        } else {
          divElement.style.top = that.start_y + "px";
          divElement.style.bottom = end_y + "px";
        }
      }
    },
    //鼠标左键抬起方法
    handMouseUp(event) {
      let { isMove, isDown } = this.mouseState;

      if (isDown && !isMove) {
        this.mouseState.isDown = false;
      }

      // 移动样式清空
      let divElement = document.getElementById("rectangular");
      divElement.style.display = "none";

      if (isMove && isDown) {
        this.mouseState.isDown = false;
        setTimeout(() => {
          this.mouseState.isMove = false;
        }, 300);

        this.end_x = event.clientX;
        this.end_y = event.clientY;

        let files = document.getElementsByName("file");

        let a = 0;
        for (let i = 0; i < files.length; i++) {
          const file = files[i];
          let id = file.id;
          // console.log(id);
          let el = file.getBoundingClientRect();
          let top = el.top; //上边界
          let left = el.left; //左边界
          let right = el.right; //右边界
          let bottom = el.bottom; //下边界
          //原地点击
          if (this.start_x == this.end_x) {
            if (
              !(
                this.end_x >= left &&
                this.end_x <= right &&
                this.end_y > top &&
                this.end_y < bottom
              )
            ) {
              a += 1;
            }
          } else {
            //从左往右
            if (this.start_x < this.end_x) {
              //从下到上
              if (this.start_y > this.end_y) {
                if (top < this.start_y && bottom > this.end_y) {
                  if (left < this.end_x && right > this.start_x) {
                    if (this.selectIdList.indexOf(id) === -1) {
                      this.selectIdList.push(id);
                      // file.className = file.className + " ctrlClick";
                      // file.style = "border: 1px solid rgba(24, 135, 243, 0.5)";
                    }
                  }
                }
              }
              //从上到下
              else {
                if (top < this.end_y && bottom > this.start_y) {
                  if (left < this.end_x && right > this.start_x) {
                    if (this.selectIdList.indexOf(id) === -1) {
                      this.selectIdList.push(id);
                      // file.className = file.className + " ctrlClick";
                      // file.style = "border: 1px solid rgba(24, 135, 243, 0.5)";
                    }
                  }
                }
              }
              //从右往左
            } else {
              //从下到上
              if (this.start_y > this.end_y) {
                if (top < this.start_y && bottom > this.end_y) {
                  if (left < this.start_x && right > this.end_x) {
                    if (this.selectIdList.indexOf(id) === -1) {
                      this.selectIdList.push(id);
                      // file.className = file.className + " ctrlClick";
                      // file.style = "border: 1px solid rgba(24, 135, 243, 0.5)";
                    }
                  }
                }
              }
              //从上到下
              else {
                if (top < this.end_y && bottom > this.start_y) {
                  if (left < this.start_x && right > this.end_x) {
                    if (this.selectIdList.indexOf(id) === -1) {
                      this.selectIdList.push(id);
                      // file.className = file.className + " ctrlClick";
                      // file.style = "border: 1px solid rgba(24, 135, 243, 0.5)";
                    }
                  }
                }
              }
            }
          }
        }

        this.keyFiles = this.tableData.filter(
          (item) => this.selectIdList.indexOf(item.hash) > -1
        );
       
        this.handleIsSelect(this.keyFiles, true);

        this.$store.commit("setKeyFiles", this.keyFiles);
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.file-table {
  height: 100%;
  outline: none;

  #rectangular {
    background-color: rgba(235, 239, 243, 0.45);
    position: fixed;
    border: 1px solid rgba(24, 135, 243, 1);
    z-index: 20;
  }
  ul {
    display: flex;
    // padding: 14px 0 0 14px;
    padding: 20px;
    flex-wrap: wrap;
    li {
      width: 128px;
      // max-height: 150px;
      position: relative;
      vertical-align: top;
      display: inline-block;
      text-align: center;
      word-wrap: break-word;
      overflow: hidden;
      border: 1px solid transparent;
      padding: 15px;
      margin-right: 5px;
      margin-bottom: 5px;
      border-radius: 6px;
      font-size: 12px;
      user-select: none;
      &.cursor {
        cursor: pointer;
      }
      &.mousehover {
        &:hover {
          background-color: #f1f4f9;
          // border: 1px solid rgba(0, 140, 255, 0.3);
        }
      }
      // &:hover,
      &.active {
        background-color: #f1f4f9;
        // border: 1px solid rgba(0, 140, 255, 0.3);
      }
      &.isVirtualization {
        opacity: 0.5;
      }
      .name {
        max-width: 90px;
        line-height: 20px;
        text-align: center;
        max-height: 58px;
        text-overflow: -o-ellipsis-lastline;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        line-clamp: 3;
        -webkit-box-orient: vertical;
      }
    }
  }
  .edit {
    max-width: 90px;
    input {
      width: 100%;
      padding: 2px 3px;
      line-height: 12px;
      border: 1px solid #ccc;
      border-radius: 3px;
      &:focus {
        outline: none;
      }
    }
  }
  .no-file-warp {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    p {
      font-size: 16px;
      color: #afb6bc;
    }
  }
  .icon-warp {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    .img-viewer {
      max-width: 85px;
    }
    img {
      display: block;
    }
  }
  .block-box {
    .icon-warp {
      width: 85px;
      height: 62px;
    }
    img {
      width: 40px;
    }
  }

  // table
  .name-warp {
    display: flex;
    .icon-warp {
      margin-right: 5px;
    }
    img {
      width: 16px;
    }
  }
}
</style>

<div @mousedown.left="onmousedownClick" @mouseup="handMouseUp"> 
    <ul class="block-box">
      <li
        v-for="item in tableData"
        :key="item.hash + '_' + item.fileId + item.isSelect"
        :id="item.hash"
        :title="item.name"
        name="file"
      >
        <p class="name">{{ item.name }}</p>
      </li>
    </ul>
    <div id="rectangular"></div> 
</div>