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

首先看一下效果：

实现的思路：

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

整体代码如下：

<template><div class="custom-style"><div class="word"><span>{{ rows }}×{{ cols }}</span></div><ul class="wall-row" ref="wallRow" @mouseenter="direct($event)" @mouseleave="clearSelect"><liv-for="(item, index) in divList":key="index"@mouseenter="getMousePlace(index)"@click="selected"></li></ul><div class="wall-cancel"><button @click="cancel">重置</button></div></div>
</template><script>
export default {props: {isBlur: {type: Boolean}},data() {return {divList: [], // 方格列表数组rows: 1, // 行cols: 1, // 列isLeftTop: true, // 鼠标是否从左上方进入isSelected: false, // 是否选中电视墙行列isOn: false};},created() {this.divList.length = 100; // 方格个数 10*10},mounted() {this.autoSelect();},methods: {// 自动根据vuex中行列选中对应方格autoSelect() {this.rows = 1;this.cols = 1;this.selectRowCol(this.rows, this.cols);},// 获取鼠标进入方格的位置，进行背景渲染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].className = "bgColor";this.rows = x + 1;this.cols = y + 1;} else {children[i].className = "";}}},// 当鼠标移出选择区域，如未选定行列，则重置方格 1*1clearSelect() {this.isOn = false;if (this.isSelected) {return;}const children = this.$refs.wallRow.children;for (let i = 0; i < this.divList.length; i++) {if (i != 0) {children[i].className = "";}}this.rows = 1;this.cols = 1;},// 选定行列selected(index) {this.isSelected = true;const data = {rows: this.rows,cols: this.cols};},// 判断鼠标是否从左上进入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) {this.isLeftTop = true;} else if (direction === 1) {this.isLeftTop = false;} else if (direction === 2) {this.isLeftTop = false;} else {this.isLeftTop = true;}},// 点击取消，重置方格 1*1cancel() {const children = this.$refs.wallRow.children;for (let i = 0; i < this.divList.length; i++) {if (i != 0) {children[i].className = "";}}this.rows = 1;this.cols = 1;this.isSelected = false;},// 改变行列数handleTypeChange() {this.selectRowCol(this.rows, this.cols);this.isSelected = true;},// 渲染方格selectRowCol(rows, cols) {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 < rows && childreny < cols) {children[i].className = "bgColor";} else {children[i].className = "";}}},// 点击保存，将数据同步到vuex，并关闭下拉框save() {const data = {rows: this.rows,cols: this.cols};}}
};
</script><style scoped lang="css">
.custom-style {position: absolute;margin: 0;padding: 0;height: 440px;width: 400px;left: 50%;top: 50%;margin-left: -200px;margin-top: -210px;
}.word {display: block;width: 100%;height: 20px;font-size: 13px;background-color: #e2eef6;
}
.word span {line-height: 20px;text-align: center;
}.wall-row {width: 400px;height: 400px;padding: 0;margin: 0;display: block;position: relative;
}.wall-row li {list-style: none;width: 39px;height: 40px;border: 0.5px solid #fff;float: left;background-color: #ebf0f4;
}.wall-row .bgColor {background-color: #00b4ff;
}.word-cancel {width: 100%;height: 20px;display: flex;justify-content: center;align-items: center;
}</style>

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

知识学习1：word插入表格，标题行边框分开设置
知识学习1:word插入表格,标题行边框分开设置遇到问题:发表文章中,表格基本是三线形势,当标题行1个单元格涵盖多行内容,又有多块内容时,将每块内容分开会更加清晰,那么应该怎么设置内. 示例: 设置 ...
Speedoffice(word)插入表格，如何合并单元格？
在用Word制作表格的时候,有时插入的表格需要合并单元格,那怎么合并了?以最常用的speedoffice为例和大家分享一下. 1,首先运行软件,新建一份word插入表格作为演示,接着选中需要合并的单元 ...
Word插入表格相邻单元格边框断开方法
Word插入表格相邻单元格边框断开方法写论文要将相邻单元格边框打断,见了很多教程,这里详细讲解一些如何实现,重点要掌握应用于单元格和段落的边框是不同的,应用于段落的边框之间是分开的. 实现效果: 操 ...
【word】写公式，给公式自动编号以及word插入公式时，输不进去东西
alt和=快捷键调出word自带的公式编辑器利用引用实现自动编号 word插入公式时,输不进去东西按insert键
word插入图片，嵌入型，无效果
尼玛,真的坑~!! 问题描述当使用word插入图片时,可能会出现图片显示不全的问题. 解决方案选中图片,打开段落选项卡,将行距修改为单倍行距. 原因图片无法正常显示的时候,段落选项中 ...
Poi向Word插入表格，设置表格边框和表格居中
Backgroud 网上没查到相关能用的经验,于是自己去扒的poi官网查到的,这里做个记录,同时分享给大家,后面有时间会再写篇博客介绍poi替换word模板,涉及文本替换,插入表格,插入图片等. 先贴 ...
如何解决WPS word插入图片时无法识别jfif格式的问题
背景操作系统:win10 场景:在网上下载了一些图片,在WPS word中插入图片时发现无法识别,原来是默认保存的图片格式为".jfif",并不在word可支持的图片格式范围内. ...
java里怎么给excel加框线,使用Jacob操作word 添加表格时如何给表格添加边框线
/** *//** * 创建表格 * * @param pos 位置 * @param cols 列数 * @param rows 行数 */ public void createTable(S ...
WPS（word）中插入表格时怎么单独调整一个单元格子的大小
对一个表格中单独的一个格子调整大小(上下左右). 下面通过实例教大家简单快速的调整WPS(word)中单独的表格内单元格. (1)插入单元格: (2)移动鼠标箭头至你要选择调整的单元格左侧,直至出现黑 ...

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

实现的思路：

相关的核心代码：

整体代码如下：

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

最新文章

热门文章