如何使用 Svelte 在双击时创建 <div> contentEditable？

Question

我是 Svelte (3.0+) 的新手...对于我的最新项目，我想模拟许多 "todo" 的功能允许您通过双击以前提交的待办事项来编辑它们的列表 (Here's an example of the functionality I'm looking for)。

我想，第一步是弄清楚如何使用带有 on:dblclick 事件处理程序的 Svelte 创建 div contentEditable。我无法弄清楚此任务的语法（尽管我可以使用 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 变量，
看看如何使用三元运算符

动态切换 class "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>

Here's a CodeSandbox fork

如何使用 Svelte 在双击时创建 <div> contentEditable？

How do I make a <div> contentEditable on doubleclick using Svelte?

html

javascript

css

svelte

svelte-3