上海建设协会网站,wordpress 删除主题,网站设计与网页制作正文,石家庄集团公司网站建设在开发过程中有时候会碰到需要拖拽修改页面元素宽度的需求#xff0c;实际场景是页面上有并排两个或多个元素#xff0c;需要拖拽修改其中一个元素的宽度#xff0c;则只引入下方组件代替页面中需要被拖拽的元素及右侧相邻的元素。需要将需要拖拽的元素放进下面组件的左边的… 在开发过程中有时候会碰到需要拖拽修改页面元素宽度的需求实际场景是页面上有并排两个或多个元素需要拖拽修改其中一个元素的宽度则只引入下方组件代替页面中需要被拖拽的元素及右侧相邻的元素。需要将需要拖拽的元素放进下面组件的左边的插槽中右侧相邻的元素放入下方组件右侧的插槽中即可。
template!-- 左侧元素 --el-asiderefleftAsideRefclasscontainer__left border-rightwidth260pxmousemovehandleMousemovemousedownhandleMousedownmouseuphandleMouseupslot nameleft/slot/el-aside!-- 右侧元素 --el-asiderefrightAsideRefclasscontainer__middle border-rightwidth260pxmousemovehandleMousemovemousedownhandleMousedownmouseuphandleMouseupslot nameright/slot/el-aside
/templatescript langts
import { defineComponent, reactive, toRefs, ref, watch } from vue;export default defineComponent({name: DragChangeLeftWidth,props: {// 是否隐藏左边的元素hiddenLeft: {type: Boolean,default: false,},// 左侧元素可拖拽的最小宽度minWidth: {type: Number || String,default: 200,},// 左侧元素可拖拽的最大宽度maxWidth: {type: Number || String,default: 900,},},setup(props, { emit }) {const state reactive({// 第一把锁控制鼠标形状改变resizableLock1: false,// 第二把锁控制是否可以拖拽resizableLock2: false,// 拖拽之前起始x坐标initialX: 0,// 拖拽之前起始宽度initialWidth: 0,});// 左侧domRefconst leftAsideRef ref();// 右侧aside domRefconst rightAsideRef ref();/*** description: 左侧指标模块鼠标进入事件* return {*}*/const handleMousemove (e: any) {// 现获取左侧dom 的左侧x轴坐标const rightXAxis leftAsideRef.value?.$el.getBoundingClientRect()?.right;const leftXAxis leftAsideRef.value?.$el.getBoundingClientRect()?.left;// 获取当前鼠标所在x轴的坐标const mouseXAxis e.clientX;// 当鼠标从dom右侧进入5px距离之间时修改鼠标样式if ((rightXAxis mouseXAxis rightXAxis - mouseXAxis 10)|| (rightXAxis mouseXAxis mouseXAxis - rightXAxis 10)) {if (!state.resizableLock2) {// 只能先开启第一把锁state.resizableLock1 true;}} else if (!state.resizableLock2) {// 将鼠标形状复原// 第二把锁不关第一把锁不能关state.resizableLock1 false;}// 第一把锁控制鼠标变形if (state.resizableLock1) {leftAsideRef.value.$el.style.cursor w-resize;rightAsideRef.value.$el.style.cursor w-resize;// 打开第一把锁之后要将fixed-container子元素设置pointer-event:noneconst leftChildList leftAsideRef.value.$el.children;leftChildList.forEach((item: any) {// eslint-disable-next-line no-param-reassignitem.style.pointerEvents none;});const rightChildList rightAsideRef.value.$el.children;rightChildList.forEach((item: any) {// eslint-disable-next-line no-param-reassignitem.style.pointerEvents none;});} else {leftAsideRef.value.$el.style.cursor default;rightAsideRef.value.$el.style.cursor default;// 第一把锁关闭之后要将fixed-container子元素设置pointer-event:autoconst leftChildList leftAsideRef.value.$el.children;leftChildList.forEach((item: any) {// eslint-disable-next-line no-param-reassignitem.style.pointerEvents auto;});const rightChildList rightAsideRef.value.$el.children;rightChildList.forEach((item: any) {// eslint-disable-next-line no-param-reassignitem.style.pointerEvents auto;});}if (state.resizableLock2) {// 只有当可以进行拖拽的时候才去清除鼠标默认事件e.preventDefault();// 第二把锁控制移动const updateWidth e.clientX - state.initialX;// 超出最小值范围则不进行修改宽度操作但是要更新初始宽度和初始x坐标if (rightXAxis - leftXAxis props.minWidth updateWidth 0) {state.initialX e.clientX;state.initialWidth leftAsideRef.value.$el.offsetWidth;return;}if (rightXAxis - leftXAxis props.maxWidth updateWidth 0) {state.initialX e.clientX;state.initialWidth leftAsideRef.value.$el.offsetWidth;return;}const newWidth state.initialWidth updateWidth;leftAsideRef.value.$el.style.width ${newWidth}px;}};/*** description: 监听鼠标按下事件* return {*}*/const handleMousedown (e: any) {if (state.resizableLock1) {// 只有当可以进行拖拽的时候才去清除鼠标默认事件e.preventDefault();// 只有当第一把锁打开的时候才能打开第二把锁state.resizableLock2 true;}state.initialX e.clientX;state.initialWidth leftAsideRef.value.$el.offsetWidth;};/*** description: 鼠标回弹触发事件* return {*}*/const handleMouseup () {state.resizableLock2 false;state.resizableLock1 false;};return {...toRefs(state),leftAsideRef,rightAsideRef,handleTransitionend,handleMousemove,handleMousedown,handleMouseup,};},
});
/script
