低代码

低代码技术面向人群是开发者群体（注定要求高效率与强能力）

现代开发者通过编写代码开发软件服务，但低代码本质是通过抽象核心代码实现，编写逻辑代码的软件开发技术

单纯拖拽制作界面，只算可视化设计，常见于内容创作

可视化设计

交互实现

激活文字输入框编辑

以 vue-drag-resize 为例

元素可编辑

<div
  v-text="el.text"
  contenteditable
  @input="el.text = $event.target.innerText"
  @mousedown="handleTextMouseDown(el, $event)"
  @dblclick="handleTextDoubleClick(el, $event)"
></div>

触发编辑状态

const inputActive = ref(false); // 编辑状态
// 进入编辑状态
const handleTextDoubleClick = (ele, event) => {
  const selection = window.getSelection();
  selection.selectAllChildren(event.target);
  inputActive.value = true;
};
// 编辑状态下锁定（不允许拖拽）
const handleTextMouseDown = (ele, event) => {
  if (inputActive.value) event.stopPropagation();
};

完成编辑退出激活

// 取消激活
const handleDeactivated = (el) => {
  el.isActive = false;
  inputActive.value = false; // 退出编辑状态
};

前端可视化与低代码

低代码

可视化设计

交互实现

相关类库

CATALOG

FEATURED TAGS

FRIENDS