от vuejs 2 до vuejs 3, как вставить компонент в contenteditable?

С vuejs 2 я могу вставить компонент (называемый testo2 для моего теста) в contenteditable div, код:

addtesto(){
  let ComponentClass = Vue.extend(testo2);
  let instance = new ComponentClass();
  instance.$mount();

  let sel, range;
  if (window.getSelection) {
    sel = window.getSelection();
    if (sel.getRangeAt && sel.rangeCount) {
      range = sel.getRangeAt(0);
      range.deleteContents();
      range.insertNode(instance.$el);
      window.getSelection().removeAllRanges();
    }
  }
}

Я давно пытаюсь преобразовать этот код для vuejs 3 и его api композиции (внутри setup ()), но этот код не работает:

const addtesto = () => {
// here it changes
  const instance = createApp(testo2);
  instance.mount();

  // here it is same thing
  let sel, range;
  if (window.getSelection) {
    sel = window.getSelection();
    if (sel.getRangeAt && sel.rangeCount) {
      range = sel.getRangeAt(0);
      range.deleteContents();
      range.insertNode(instance.$el);
      window.getSelection().removeAllRanges();
    }}};

Проблема с $ el в range.insertNode (instance. $ El); но я думаю, что компонент testo2 никогда не монтируется.

кто-нибудь умеет делать?


vue.js vuejs3 contenteditable
person napoleon2020    schedule 12.08.2020    source источник

Ответы (1)


arrow_upward
0
arrow_downward

instance.mount(); требует передачи элемента

не уверен, что именно здесь происходит, но вы можете попробовать что-то вроде этого

const addtesto = () => {
  const instance = createApp(testo2);
  let sel, range;
  if (window.getSelection) {
    sel = window.getSelection();
    if (sel.getRangeAt && sel.rangeCount) {
      range = sel.getRangeAt(0);
      instance.mount(range); // mount to range
      window.getSelection().removeAllRanges();
    }
  }
};

Я предполагаю, что range - это элемент, и вы можете либо подключиться непосредственно к нему, либо создать дочерний элемент и подключиться к нему.

person Daniel    schedule 12.08.2020
comment
Фактически, новый компонент должен быть смонтирован, а после range вставить узел из этого компонента (новый компонент должен быть отправлен в диапазон). вы правы для mount (), я должен найти, как это сделать в vuejs 3, методы Vue.extend (newComponent). - person napoleon2020; 13.08.2020
comment
вы пытаетесь сделать компонент элементом? - person Daniel; 14.08.2020
comment
да, Даниэль. Я хочу иметь возможность вставлять компонент, чтобы пользователь мог использовать методы и другие полезные вещи, которые приносят компоненты Vue. После проверки текст не должен изменяться .. На Vuejs 2 он работает хорошо, но мне любопытно, и я хотел протестировать vuejs 3 (это круто). - person napoleon2020; 15.08.2020
comment
как это вписывается в функцию setup() или не использует API композиции? Можете ли вы разместить больше кода? - person Daniel; 16.08.2020