Как работать с vue. js и window.getSelection ()? - PullRequest
Новая
       19

Как работать с vue. js и window.getSelection ()?

0 голосов
/ 14 марта 2020

Вот пример из некоторого учебника: 

<p id="p">Example: <i>italic</i> and <b>bold</b></p>

<script>
  let range = new Range();

  range.setStart(p.firstChild, 2);
  range.setEnd(p.querySelector('b').firstChild, 3);

  alert(range); // ample: italic and bol

  // use this range for selection (explained later)
  window.getSelection().addRange(range);
</script>

Как это сделать с vue?

Должен ли я также использовать селекторы запросов?

Мне интересно, как сделать эту манипуляцию выделением в contenteditable. Я могу использовать «ref» для contenteditable контейнера, но внутреннее содержимое выделено жирным шрифтом, itali c et c. теги являются Dynami c и пометить этот код с помощью ссылок: 

... <b><i>some text</i></b> ...

не подходит.

1 Ответ

2 голосов
/ 14 марта 2020

Если вы используете API выбора для манипулирования DOM (не только создания диапазонов, но и добавления / удаления / изменения / переупорядочения узлов DOM), то вы должны выполнять те манипуляции с элементами DOM, которые не управляются Vue. Вы не должны изменять части DOM, управляемые Vue, потому что Vue не будет знать об этих изменениях и будет сбит с толку при попытке исправить DOM во время следующего цикла рендеринга. Vue «владеет» визуализированным DOM его компонентов.

Это не значит, что вы не можете использовать API выбора и Vue вместе, это просто означает, что вам нужно быть осторожным, чтобы не повозиться в DOM волей-неволей.

Должен ли я также использовать селекторы запросов? Использование p.querySelector ('b'). FirstChild не является vue способом, но я не знаю, что мне следует использовать insted

Это правило применяется, только если вы хотите получить ссылку на DOM-узел, представленный Vue. Если бы контейнер был редактируемым, то его содержимое не будет управляться Vue, и вы не сможете ссылаться на его содержимое без использования querySelector и других функций DOM. Попытайтесь не быть пойманным "я делаю это Vue путь?" когда то, что вы пытаетесь сделать, по сути не имеет отношения к Vue.

...