模仿windows桌面框选、重命名（vue3.2）_vue仿pc桌面

html部分：

<template>

  <div class="execise">

    <div

      class="cc"

      style="border:1px solid red;width:100%;height:100vh"

      @mousedown="dian"

      @mousemove="yi"

      @mouseup="li"

      @click.left="sure"

    >

      <div

        id="container"

        ref="selDiv"

        v-bind:style="{backgroundColor:point.back,

            height:point.h+'px',

            width:point.w+'px',

            position:'absolute',

            left:point.left+'px',

            top:point.top+'px',

            opacity:0.2,

            border:point.len+'px dashed #000'}"

      ></div>

      <div class="list">

        <div

          class="li"

          v-for="(item, index) in data"

          :key="item.id"

          ref="list"

          @contextmenu.prevent="chancename(item.name, index)"

        >

          <img class="img" :src="item.icon" alt />

          <p v-show="id == index ? hidtext : true">{{ item.name }}</p>

          <input class="input" v-model="item.name " type="text" v-show="id == index ? hidinpt : ''" />

        </div>

      </div>

    </div>

  </div>

</template>

js 部分：

import { reactive, ref } from "vue";

const hidinpt = ref(false);

const hidtext = ref();

const showtext = ref(true);

const value = ref();

const id = ref();

const list = ref(null);

const selDiv = ref(null);

const data = reactive([

  { id: 0, name: "文件1", icon: require("./img/wenjian.png") },

  { id: 1, name: "文件2", icon: require("./img/wenjian.png") },

  { id: 2, name: "文件3", icon: require("./img/wenjian.png") },

  { id: 3, name: "文件4", icon: require("./img/wenjian.png") },

]);

const point = reactive({

  py: "", //开始y轴的位置

  px: "", //开始x轴的位置

  back: "#f00", //框框背景颜色

  h: "", //框框的高度控制

  w: "", //框框的宽度控制

  top: "", //框框的位置控制

  left: "", //框框的位置控制

  len: 0, //框框的边框

});

function chancename(name, index) {

  hidtext.value = false;

  id.value = index;

  hidinpt.value = true;

  value.value = name;

}

function sure() {

  hidtext.value = true;

  hidinpt.value = false;

}

function dian(event) {

  // console.log(event);

  point.px = event.pageX; //获取x坐标

  point.py = event.pageY; //获取y坐标

}

function yi(event) {

  if (point.px == "" || point.py == "") {

    return;

  }

  var px1 = point.px;

  var px2 = point.py;

  point.left = event.pageX;

  point.top = event.pageY;

  point.h = point.top - point.py;

  point.w = point.left - point.px;

  var hc = -point.h;

  var wc = -point.w;

  point.len = 3;

  point.back = "#31676f";

  if (point.h < 0 && point.w >= 0) {

    point.h = hc;

    point.left = px1;

  } else if (point.h >= 0 && point.w < 0) {

    point.w = wc;

    point.top = px2;

  } else if (point.h < 0 && point.w < 0) {

    point.h = hc;

    point.w = wc;

  } else {

    point.left = point.px;

    point.top = point.py;

  }

  if (point.w < 0) {

    point.w = 0 - point.w;

  }

  if (point.h < 0) {

    point.h = 0 - point.h;

  }

  var _l = selDiv.value.offsetLeft;

  var _t = selDiv.value.offsetTop;

  var _w = selDiv.value.offsetWidth;

  var _h = selDiv.value.offsetHeight;

  list.value.forEach((item) => {

    var sl = item.offsetWidth + item.offsetLeft;

    var st = item.offsetHeight + item.offsetTop;

    if (

      sl > _l &&

      st > _t &&

      item.offsetLeft < _l + _w &&

      item.offsetTop < _t + _h

    ) {

      item.style.backgroundColor = "#f00";

    }

  });

}

function li() {

  //鼠标离开时数据恢复成原来的样子

  point.px = "";

  point.py = "";

  point.h = "";

  point.w = "";

  point.top = "";

  point.left = "";

  point.len = 0;

  point.back = "";

}

css部分：

.cc {

  display: flex;

  justify-content: center;

}

.li {

  display: flex;

  justify-content: center;

  align-items: center;

  flex-direction: column;

  width: 100px;

  height: 100px;

}

.img {

  width: 20px;

  height: 20px;

  background: url("./img/wenjian.png") no-repeat center center;

  background-size: 100% 100%;

}

可能还有一些bug，新手发布望指点！