TypeScript实现DIV左右伸缩

效果

具体实现

1. template

<Panel class="detail-drawer">
	//panel info 伸缩handle定义
	<div class="panel-handle" 
		@mousedown="stretchPanel" 
		@mouseup="stopStretch>
	</div>
    //panel info 具体内容
</Panel>

2. script

let panelParams = reactive({
  panel: null,
  clientX: 0,
  width: 0,
  minWidth: 0,
})

//鼠标在handle的监听事件，这里我设定了panel的最小宽度
const mouseMoveHandler = (e) => {
  let moveX = panelParams.clientX - e.clientX
  let newWidth = panelParams.width + moveX
  //修改panel的宽度
  if (newWidth > panelParams.minWidth) {
    panelParams.panel.style.width = newWidth + 'px'
  } else {
    panelParams.panel.style.width = panelParams.minWidth + 'px' 
  }
}
//伸缩
const stretchPanel = (e) => {
  //flowchat-container是detail-drawer父级元素，为设置panel的minWidth
  let element = document.querySelector('.flowchat-container') 
  let panel = document.querySelector('.detail-drawer')

  panelParams.panel = panel
  panelParams.clientX = e.clientX
  panelParams.width = panel.clientWidth
  panelParams.minWidth = element.clientWidth * 0.32

  document.addEventListener('mousemove', mouseMoveHandler)
  //这个必须监听，否则鼠标拖拽后停不下来
  document.addEventListener('mouseup', stopStretch)
}

//停止伸缩
const stopStretch = () => {
  document.removeEventListener('mousemove', mouseMoveHandler)
  document.removeEventListener('mouseup', stopStretch)
}

4. style：主要就是定义panel-handle相对父级detail-drawer的高度和位置，我定义的handle在左边框，实现左右伸缩。

• cursor: ew-resize ：定义伸缩图标
• cursor:move：定义拖拽十字图标
• cursor:pointer：定义手型图标
• cursor：更多样式参考

.detail-drawer {
  position: absolute;
  right: 10px;
  top: 3%;
  width: 32%;
  height: 93%;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0px 0px 1px 0px rgba(19, 51, 107, 0.08), 0px 1px 2px 0px rgba(19, 51, 107, 0.05);
  border: 1px solid #dfe2ea;
  margin: 0;
  padding: 10px;

  .panel-handle {
    position: absolute;
    left: -3px;
    width: 6px;
    height: 98%;
    cursor: ew-resize;
  }
}