展示效果圖：

父

<template><div ref="topBox" class="swiper-in page-container bg-white"><div class="page-body"><drag-box class="drag-box"><div class="relative" :class="{'expend-border':!slideStateX}" :style="{'width': slideStateX? '350px' : '35px'}" ref="sliderLeft"><drag-item v-show="slideStateX">123</drag-item><div v-if="expendX" :class="slideStateX?'close-box-button-x':'open-box-button-x'" @click="slideStateX = !slideStateX"></div><div v-show="!slideStateX" class="arrow-content text-gray-500">展開側邊欄</div></div><drag-item class="w-4/5 flex-col-box" :resizeShow="false" ref="sliderRight"><div class="flex-auto flex-col-box">123123</div></drag-item></drag-box></div></div> </template><script> import { dragBox, dragItem } from '@/components/common/dragLayouter' export default {components: {dragBox,dragItem},data() {return {expendX: true,slideStateX: true}},watch: {},created(){},methods:{} } </script><style scoped> @import '../../assets/css/basicPageTemplate/basicPageTemplate.css'; .topbox {padding: 1rem;border-bottom: 1px solid #ccc; } </style>

子1

<template><div ref="container" class="d-flex"><slot>默認信息</slot><!-- 拖拽條 --><div v-if="resizeShow" class="resize"/></div> </template><script>export default {name: 'dragItem',props: {// 控制拖拽條的是否顯示，默認顯示resizeShow: {type: Boolean,default: true}}} </script><style>.d-flex {min-width: 100px;height: 100%;position: relative;}.resize {position: absolute;top: 0;right: 0;width: 4px;height: 100%;cursor: col-resize;background: #e6e6e6;} </style>

子2

<template><div ref='dragBox' class="dragBox"><slot></slot></div> </template><script>export default {name: 'dragBox',data() {return {}},mounted() {this.setDragItemFlex()this.dragControllerDiv()},methods: {// 如果dragItem 沒有定義寬度，則flex=1setDragItemFlex() {const dragBox = this.$refs.dragBoxconst childsLen = dragBox.children.lengthfor (let i = 0; i < childsLen; i++) {const node = dragBox.children[i]if (!node.style.width) {// 如果沒有定義寬度，則flex=1node.style.flex = 1}}},dragControllerDiv() {const resize = document.getElementsByClassName('resize') // 拖拽條// 循環為每個拖拽條添加事件for (let i = 0; i < resize.length; i++) {// 鼠標按下事件resize[i].addEventListener('mousedown', this.onMouseDown)}},onMouseDown(e) {this.resizeBox = e.targetthis.currentBox = this.resizeBox.parentNode.parentNode// 當前盒子this.rightBox = this.getNextElement(this.currentBox)// 當前盒子的下個兄弟節點if (!this.rightBox) {return}this.curLen = this.currentBox.clientWidththis.otherBoxWidth = this.$refs.dragBox.clientWidth - this.currentBox.clientWidth - this.rightBox.clientWidth // 其他盒子的寬度// 顏色改變提醒// this.resizeBox.style.background = '#818181'this.startX = e.clientXdocument.addEventListener('mousemove', this.onMousemove)document.addEventListener('mouseup', this.onMouseup)},// 獲取下一個兄弟元素的兼容函數getNextElement(element) {if (element.nextElementSibling) {return element.nextElementSibling} else {let next = element.nextSibling// 下一個兄弟節點while (next && next.nodeType !== 1) { // 有 并且 不是我想要的next = next.nextSibling}return next}},onMousemove(e) {const endX = e.clientXconst moveLen = endX - this.startX // （endx-startx）= 移動的距離const CurBoxLen = this.curLen + moveLen // resize[i].left+移動的距離=左邊區域最后的寬度const rightBoxLen = this.$refs.dragBox.clientWidth - CurBoxLen - this.otherBoxWidth // 右側寬度=總寬度-左側寬度-其它盒子寬度// 當最小寬度時，無法繼續拖動if (CurBoxLen <= 100 || rightBoxLen <= 100) {return}this.currentBox.style.width = CurBoxLen + 'px'// 當前盒子的寬度this.resizeBox.style.left = CurBoxLen // 設置左側區域的寬度this.rightBox.style.width = rightBoxLen + 'px'},onMouseup() {// 顏色恢復// this.resizeBox.style.background = '#d6d6d6'document.removeEventListener('mousedown', this.onMouseDown)document.removeEventListener('mousemove', this.onMousemove)}}} </script><style scoped>.dragBox {width: 100%;height: 100%;display: flex;} </style> // 公共樣式 /* 展開字體樣式 */ .arrow-content {@apply text-base w-4 my-0 mx-auto pt-24 }/* 底部分頁footer 樣式 */.bottom-footer {@apply w-full flex items-center justify-between }

總結

以上是生活随笔為你收集整理的左右滑动栏的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。