Vue实现类似于word插入表格时选中行列的效果

最新推荐文章于 2024-02-20 13:39:28 发布

静水流深之鑫

最新推荐文章于 2024-02-20 13:39:28 发布

阅读量1.8k

点赞数 3

分类专栏： CSS3 Web前端

本文链接：https://blog.csdn.net/qq_26941173/article/details/101629968

版权

本文介绍如何在Vue中实现类似Word插入表格时的选中行列效果。通过设置一个容器，放入10x10的小格子，监听鼠标进入和离开事件，以及判断鼠标移动方向，动态改变背景颜色来模拟选中状态。详细步骤和核心代码已提供。

摘要由CSDN通过智能技术生成

首先看一下效果：

在这里插入图片描述

实现的思路：

先设置一个容器的，容器中放上10×10的小格子，同时监听容器的进入和离开方法。
每个小格子上设置鼠标进入的方法，同时传入当前的序号，计算出当前的行和列，改变背景颜色。
监听容器的是从那个位置进入，只有从左边和上边进入有效。

相关的核心代码：

判断鼠标移入元素的方向——上下左右，核心代码：

var direction = Math.round((((Math.atan2(y, x) * (180 / Math.PI)) + 180) / 90) + 3) % 4;

相关代码：

// 判断鼠标是否从左上进入
direct(e) {
   
    const x = e.offsetX - 230 / 2; //鼠标进入的X坐标-盒子宽度的一半
    const y = e.offsetY - 230 / 2; //鼠标进入的y坐标-盒子宽度的一半
    const direction =
          (Math.round((Math.atan2(y, x) * (180 / Math.PI) + 180) / 90) + 3) % 4;
    if (direction === 0 || direction === 3) {
   
        this.isLeftTop = true;
    } else {
   
        this.isLeftTop = false;
    }
}

判断当前滑入到那个小窗格，改变背景颜色

// 获取鼠标进入方格的位置，进行背景渲染
getMousePlace(index) {
   
    this.isOn = true;
    if (!this.isLeftTop || this.isSelected) {
   
        return;
    }
    const x = Math.floor(index % 10);
    const y = Math.floor(index / 10);
    const children = this.$refs.wallRow.children;
    for (let i = 0; i < this.divList.length; i++) {
   
        const childrenx = Math.floor(i % 10);
        const childreny = Math.floor(i / 10);
        if (childrenx < x + 1 && childreny < y + 1) {
   
            children[i]