满口金牙 2022-06-30 02:28 采纳率: 91.1%
浏览 90
已结题

Vue img 是用来 鼠标拖动的图标,但拖动 图标 就 拉出一个新网页面来,新网页显示这个图标,请教

**这段代码有两个问题:
1\这 change-col-w类加了hover 显示 下面的img, 第一个td 不起作用(更改一次列宽后),第二个至最后,Hover 有效
第一个TD 拖动了更改一次列宽后 Hover就失效了,后面的 TD hover 一直有效

2\ img 是鼠标拖动用的图标, 但拖动 图标 就 拉出一个新网页面来,新网页显示这个图标**

        <!-- 列号 ------------------------->
        <td v-for="(i, index) in tableJson.cols" :key="index">
            // 这个  change-col-w类加了hover 显示 下面的img DOM
          <div class="change-col-w" @mousedown.left="changeColWidth($event, index)"> 
              // 这img  是用来鼠标拖动的图标,但拖动 图标 就 拉出一个新网页面来,新网页显示这个图标,
            <img src='../../assets/img/changeCOL.svg'  class="v-line-svg" /> 
          </div> 
        </td>

img


这个图标是随鼠标 列宽 一同移动的.
但一不心 就把这个图标拉出一个新网页出来
补充一下js

// 拖动改变列宽
let initPointX = 0, initPointY = 0, initLine = 0, vLine: HTMLDivElement, initWidth: number, colNumber: number
let moveWidth = 0, moveHeight = 0, colSVG: HTMLImageElement, crrCOL: HTMLTableCellElement
function changeColWidth(event: any, index: number) {
  console.log(event)
  colNumber = index // 当前列号
  const form_table = document.getElementById('form_table') as HTMLTableElement
  colSVG = form_table.querySelector('.v-line-svg') as HTMLImageElement // SVG图标
  crrCOL = form_table.querySelectorAll('.col-letter')[index] as HTMLTableCellElement // 当前列 TD dom
  vLine = form_table.querySelector('.v-line') as HTMLDivElement // 竖线
  initLine = crrCOL.offsetLeft + crrCOL.offsetWidth - 0.5  // 竖线出现的位置
  initWidth = crrCOL.offsetWidth                          // 当前列初始宽度
  initPointX = event.clientX                              // x初始位置
  initPointY = event.clientY                              // Y初始位置
  vLine.style.visibility = 'visible'                      // 竖线显示
  vLine.style.height = (ref_table.value as HTMLTableElement).offsetHeight + 'px'
  vLine.style.left = initLine + 'px'


  document.addEventListener("mousemove", colWidthMousemove) //监听鼠标移动事件
  document.addEventListener("mouseup", colWidthMouseup) //监听鼠标抬起事件
}
function colWidthMousemove(event: any) {
  updateCellRange(sDOM, eDOM) // 更新选择框的大小
  moveWidth = event.clientX - initPointX // 移动的距离
  moveHeight = event.clientY - initPointY
  vLine.style.left = initLine + moveWidth + 'px'
  colSVG.style.top = 8 + moveHeight + 'px' // 上下位置随鼠标称动变化
  console.log('鼠标水平移动的距离', moveWidth)
  if ((initWidth + moveWidth) < 20) {
    tableJson.value.cols[colNumber] = 20
  } else {
    tableJson.value.cols[colNumber] = initWidth + moveWidth
  }
}

 // 扡动列宽图标div
    .change-col-w {
      position: absolute;
      background-color: green;
      width: 8px;
      height: 24px;
      top: 0px;
      right: -3px;
      z-index: 1;
      // pointer-events: none;
    }
      .v-line-svg {
        position: absolute;
        display: none;
        width: 20px;
        top: 0;
        left: 0;
        z-index: 1;
        user-select: none;
        -webkit-user-drag: none;
        // background-image: url('../../assets/img/changeCOL.svg');
      }
    }

    .change-col-w:hover>.v-line-svg {
      display: block;
      left: -4px;
      top: 8px;
      -webkit-user-drag: none;
    }
  • 写回答

5条回答 默认 最新

  • web修理工 2022-06-30 10:38
    关注
    
    
    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
        <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
        <style>
            .change-col-w {
                border: 1px solid #f00;
                width: 100px;
                height: 100px;
            }
    
            .change-col-w:hover .v-line-svg {
                display: inline-block
            }
    
            .v-line-svg {
                width: 100px;
                height: 100px;
                display: none;
                -webkit-user-drag: none;
            }
        </style>
    </head>
    
    <body>
        <div id="app">
            <table>
                <td v-for="(i, index) in tableJson.cols" :key="index">
                    <!-- // 这个  change-col-w类加了hover 显示 下面的img DOM -->
                    <div class="change-col-w" @mousedown.left="changeColWidth($event, index)">
                        <!-- // 这img  是用来鼠标拖动的图标,但拖动 图标 就 拉出一个新网页面来,新网页显示这个图标, -->
                        <img src='./R-C.jpg' class="v-line-svg" />
                    </div>
                </td>
            </table>
    
    
        </div>
    
        <script>
            var app = new Vue({
                el: '#app',
                data() {
                    return {
                        tableJson: {
                            cols: [1, 2, 3, 4]
                        }
                    };
                },
    
    
                methods: {
                    changeColWidth(e, index) {
                        console.log(e, index);
                    }
                },
                mounted() {
    
                }
            })
        </script>
    </body>
    
    </html>
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(4条)

报告相同问题?

问题事件

  • 系统已结题 7月9日
  • 已采纳回答 7月1日
  • 修改了问题 6月30日
  • 修改了问题 6月30日
  • 展开全部

悬赏问题

  • ¥15 关于#wireshark#的问题:并且能够给数据做标注,如这个流量是在看视频或者是在转账
  • ¥90 请问,这个视频播放软件的名称,用过的朋友请给答案,上方..avi是啥意思?是看短剧还是播放本地视频?
  • ¥15 运筹优化,gurobi,python
  • ¥15 基于python的电影系统推荐
  • ¥20 springmvc重定向和返回json
  • ¥15 数学建模——参会安排怎么做
  • ¥15 电脑键盘实现触摸功能
  • ¥25 matlab无法将表达式转换为双数组怎么解决?
  • ¥15 单片机汇编语言相关程序
  • ¥20 家用射频美容仪技术规格