如何使用 Svelte 在双击时制作 <div> contentEditable？

Question

我是Svelte ( 3.0+ ) 的新手……对于我的最新项目，我想模拟许多“待办事项”列表的功能，允许您通过双击它们来编辑以前提交的待办事项（这是我正在寻找的功能示例）。

我想，第一步是弄清楚如何contentEditable使用 Svelte 和on:dblclick事件处理程序制作 div 。我无法弄清楚此任务的语法（尽管我可以使用vanilla javascript 来完成）。

这是我到目前为止的 Svelte 代码：（这是在CodeSandBox.io 上- 请参阅页面：CEDiv.svelte）

<script>
function edit(event) {
    //update db functionality goes here
    //alert("you've 'submitted' your edit")
}

function handleDblClick() {
    //I need help HERE...and probably on the div on:dblclick down below....
}
function handleKeydown() {
    key = event.key;
    keyCode = event.keyCode;
    //submit the div's content to the edit function if enter or tab is pressed.
    keyCode == 13 || keyCode == 9 ? edit(event) : null;
}
</script>
<style>
div.read-mode {
    padding:10px;
    border:1px solid green;
    height:30px;
    line-height:30px;
    width:500px;
    margin:0 auto;
}
div.edit-mode {
    padding:10px;
    background: lightgreen;
    border:3px solid green;
    height:26px;
    line-height:26px;
    width:496px;
    margin:0 auto;
}
</style>
<div on:dblclick={handleDblClick} class="read-mode" on:keydown={handleKeydown} contentEditable="false">
    I want this Div to be editable one double click.
</div>

在此先感谢您的帮助！

Answer 1

添加布尔变量

let editable = false;

这将在您的处理程序内更改

function handleDblClick(event) {
  editable = true; // or use  editable=!editable  to toggle
}

将您的editable变量绑定在属性内，
并查看如何"edit-mode"使用三元运算符动态切换类

<div 
  on:dblclick={handleDblClick} 
  class={editable ? 'edit-mode': 'read-mode'} 
  on:keydown={handleKeydown}
  contenteditable={editable}>
    I want this Div to be editable on double click.
</div>

这是一个 CodeSandbox 分支