vue在拖拽时滚动轴会随着拖拽而上移

最新推荐文章于 2022-12-09 15:30:30 发布

专心致志的程序员！

最新推荐文章于 2022-12-09 15:30:30 发布

阅读量864

点赞数 3

分类专栏： vue 文章标签：前端 vue javascript

本文链接：https://blog.csdn.net/qq_66180056/article/details/126366015

版权

vue 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

就类似上图滚动轴下方有一个固定的可向上延伸的拖拽组件，问题是啥：就是项目上线后产品觉得你的滚动轴固定在那个地方，我拖拽往上方拉伸时会盖住滚动轴无法使用滚动轴查看超出的内容，就这个问题当时觉得是因为没用弹性盒子或者是没有给最外层的盒子按照自适应的方式改写，其实不然我发现我滚动轴用的是相对定位和绝对定位他们不占位如果做弹性盒和自适应是徒劳，所以我找的一个绝对能解决的方式实现，那就是通过拖拽事件在他的事件里进行元素样式修改！

document.getElementById() - 根据节点ID查找，返回一个节点对象
document.getElementsByName() - 根据节点中属性名为name的值查找 - 返回一个节点数组
document.getElementsByTagName() - 根据节点的名称查找 - 返回一个节点数组


//通过这三个找节点属性名的方法

一、找到想要获取里面属性元素值的组件

li :class="{'active': activeTab == 6}">
                    <span style="padding-top: 10px;" @click="clickDetailTab(6)">U<br/>D<br/>F</span>
                    <vue-resizable
                            :max-width="900"
                            :min-width="590"
                            :width="590"
                            :left="-591"
                            :active="['l']"
                            >
                        <div class="detail">
                            <UDFDetail
                                ref="block6"
                                :readonly="curSqlFile.status=='DEPLOYED' || (curSqlFile.category!='myprogram'&&curSqlFile.shareAccess=='read')"
                                @closeTabPanel="closeTabPanel"
                                @insertSqlSnippet="insertSqlSnippet">
                            </UDFDetail>
                        </div>
                    </vue-resizable>
                </li>

二、找到拖拽结束时触发的事件

我画圈的地方是主要逻辑，那可以根据不同的要求做不同的高度计算，我这个不是标准答案，你要结合自己产品经理给出不同的需求做的！！！

 resizeDebugEnd(e) {
            console.log(e.top)
            let arr=e.top+''
            var height =arr.substring(1)
            document.getElementsByClassName('invisible')[0].style.bottom = height+"px";
               console.log( document.getElementsByClassName('invisible')[0].style.bottom)
            if (e.height > 40) {
                this.$refs.debugPanelComp.updateDebugFlag(this.curSqlFile.id, true, e.height, e.top);
            } else {
                this.$refs.debugPanelComp.updateDebugFlag(this.curSqlFile.id, false, e.height, e.top);
            }
            this.layoutEditor();
        },