Как сделать <div>contentEditable при двойном клике с помощью Svelte? - PullRequest
Новая
       18

Как сделать <div>contentEditable при двойном клике с помощью Svelte?

3 голосов
/ 07 января 2020

Я новичок в Svelte (3.0 +) ... и для моего последнего проекта я хотел бы эмулировать функциональность многих списков "задач", которые позволяют редактировать элементы задач. ранее представленный двойным щелчком по ним ( Вот пример функциональности, которую я ищу ).

Я думаю, первый шаг - выяснить, как сделать div contentEditable с Svelte с обработчиком событий on:dblclick. У меня проблемы с выяснением синтаксиса для этой задачи (хотя я могу сделать это с 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>

Заранее благодарим за помощь!

1 Ответ

4 голосов
/ 07 января 2020

Добавьте логическую переменную 

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

...