好家伙，
0.代码已开源
Fattiger4399/lowcode-demo: 一个简单的低代码编辑器 技术栈:Vue3 element-plus jsx (github.com)
本篇实现效果如下：
1.分析
这玩意的思路很好理解
本质上就是给组件绑个拖拽方法
拽到哪里，就把位置更新给组件就好了，简单粗暴
当然，需要做选中判定，知道我选中了哪些组件
2.选中判定实现
//editor.jsx
import { useFocus } from "./useFocus";
let { blockMousedown, focusData } = useFocus(data, (e) => {
服务器托管网 mousedown(e)
});
//useFocus.js
import {computed} from 'vue'
//useFocus用于处理画布中组件元素的选中
export function useFocus(data,callback){ //获取哪些元素被选中了
const focusData = computed(() => {
let focus = [];
let unfocused = [];
data.value.blocks.forEach(block => (block.focus ? focus : unfocused).push(block))
return {focus,unfocused}
})
return{
blockMousedown,
focusData
}
}
此处，我们做一次选中判定，将选中的组件，和未被选中的组件，分开放，并返回
//useFocus.js
const blockMousedown = (e, block) => {
//block上我们规划一个属性focus 获取焦点后就将focus变为服务器托管网true
e.preventDefault();
e.stopPropagation();
if (e.shiftKey) {
block.focus = !block.focus
} else {
if (!block.focus) {
clearBlockFocus();
block.focus = true;//清空其他组件的focus属性
} else {
block.focus = false;
}
}
callback(e)
}
判断是否按下了shift键
3.点击触发事件
//editor.jsx
div class="editor-container-canvas__content"
style={containerStyles.value}
ref={containerRef}
onMousedown={containerMousedown}>
{
(data.value.blocks.map(block => (
onMousedown={(e) => blockMousedown(e, block)}
>
)))
}
服务器托管，北京服务器托管，服务器租用 http://www.fwqtg.net
机房租用，北京机房租用，IDC机房托管， http://www.fwqtg.net
相关推荐: 极致性能优化：前端SSR渲染利器Qwik.js | 京东云技术团队
高春辉、王春生、朱峰：关于开源创业的15件小事 引言 前端性能已成为网站和应用成功的关键要素之一。用户期望快速加载的页面和流畅的交互，而前端框架的选择对于实现这些目标至关重要。然而，传统的前端框架在某些情况下可能面临性能挑战且存在技术壁垒。 在这个充满挑战的背…
