网站包装推广案例,网站icp备案要钱么,网络服务合同范本大全,深圳的上市公司有哪些公司Vue3鼠标拖拽生成区域块并选中元素#xff0c;选中的元素则背景高亮(或者其它逻辑)。 script setup
import { ref } from vue// 区域ref
const regionRef ref(null)// 内容ref
const itemRefs ref(null)// 是否开启绘画区域
const enable ref(false)// 鼠标开始位置…Vue3鼠标拖拽生成区域块并选中元素选中的元素则背景高亮(或者其它逻辑)。 script setup
import { ref } from vue// 区域ref
const regionRef ref(null)// 内容ref
const itemRefs ref(null)// 是否开启绘画区域
const enable ref(false)// 鼠标开始位置
const start ref({x: 0,y: 0
})// 区域块元素配置
const regionConfig ref({top: 0px,left: 0px,width: 0px,height: 0px
})// 鼠标点击
const onMousedown (e) {const { pageX, pageY } estart.value.x pageXstart.value.y pageYregionConfig.value.top pageY pxregionConfig.value.left pageX pxenable.value true
}// 鼠标弹起
const onMouseup () {enable.value false
}// 鼠标移动
const onMousemove (e) {if (!enable.value) return falseconst { pageX, pageY } e// 当前鼠标移动的位置减开始位置得到区域块宽高const x pageX - start.value.xconst y pageY - start.value.yregionConfig.value.width Math.abs(x) pxregionConfig.value.height Math.abs(y) px// 鼠标移动的位置小于开始位置当前鼠标的位置是区域块的位置if (x 0) {regionConfig.value.left pageX px}if (y 0) {regionConfig.value.top pageY px}// 获取区域块和内容的位置const boxRect regionRef.value.getBoundingClientRect()itemRefs.value.forEach((item) {const rect item.getBoundingClientRect()// 判断区域块包裹内容元素则改变背景颜色if (boxRect.top rect.top boxRect.bottom rect.bottom boxRect.left rect.left boxRect.right rect.right) {item.style.backgroundColor rgb(10, 228, 10)} else {item.style.backgroundColor #cbccce}})
}
/scripttemplatemainclassw_h_100 homemousedownonMousedownmouseuponMouseupmousemoveonMousemovediv classboxdivrefitemRefsclassitemv-foritem in 10:keyitem{{ item }}/div/divdivrefregionRefclassregion:styleregionConfig/div/main
/templatestyle langless
.home {display: flex;align-items: center;justify-content: center;.box {width: 200px;display: flex;flex-wrap: wrap;}.item {margin-right: 10px;margin-bottom: 10px;width: 30px;height: 30px;color: #fff;text-align: center;line-height: 30px;background-color: #cbccce;user-select: none;}.region {position: fixed;z-index: 10;border: 1px solid #0094ff;background-color: rgba(0, 148, 255, 0.1);}
}
/style
