Как встроить vue компонент в html?

Question

[RuslanSer]

В общем вопрос таков. (Используются графики Apache Echarts)
Есть график.

У графика есть соответственно точки, над которыми при наведении появляются подсказки.
Контент подсказки это просто html текст определяемый в одной из опций графика:

let tooltip = `
Ask Price: ${params.value[0]}<br>
Duration: ${params.value[1]}
`;
//возвращаем подсказку чтобы отрисовать её
return tooltip

Собсна надо сделать как то так, чтобы можно было при клике на слово "Ask Price", можно было сделать какое то действие, например открыть модальное окно.

Пробовал сделать так:

//this.showInfo - метод текущего компонента
let tooltip= `
<span @click="${this.showInfo}">Ask Price</span>: ${params.value[0]}<br>
Duration: ${params.value[1]}
`;
return tooltip

Естесно так не работает, т.к не рендерится @click.

Пробовал сделать так, так тоже не работает, выводится вместо подсказки "[object HTMLDivelement]":

//в ModalInfo кроме слота больше ничего нет
import ModalInfo from '@/components/ModalInfo'
//...
let ComponentClass = Vue.extend(ModalInfo)
let tooltipInfo = new ComponentClass()
tooltipInfo.$slots.info =  `
<span @click="${this.showInfo}">Ask Price</span>: ${params.value[0]}<br>
Duration: ${params.value[1]}
`;
tooltipInfo.$mount()
return tooltipInfo.$el
//...

Answer 1

[Aetae]

Ты понимаешь, что в кавычки `` кладётся простой текст, а в this.showInfo у тебя функция?
Это не заработает никогда.
Почему это работает в .vue файлах внутри <template>? Потому что .vue - это не .js, это отдельный формат файла, использующий отдельный микроязык шаблонов, который компилируется в js.

Простой, но плохой, вариант - использовать обычный html onclick указывающий на пошареную глобально функцию.
Сложный вариант - сложный, надо думать и для начала разбираться с echarts - может что по-проще можно сотворить.

...upd:
Да, можно сделать проще если почитать доки:
Текст не нужен, tooltip formatter может возвращать HTMLElement и HTMLElement[].
А значит можно просто сделать примерно так:

formatter: (params) => {
  const span = document.createElement('span');
  span.onclick = this.showInfo;
  span.textContent = 'Ask Price';

  return [
    span,
    document.createTextNode(`: ${params.value[0]}`),
    document.createElement('br'),
    document.createTextNode(`Duration:  ${params.value[1]}`),
  ]
}

Можно даже намутить отдельно-стоящий vue-компонент, но не нужно.

Comments

[RuslanSer]

Даааа в документации написано что можно HTMLElement и HTMLElement[] но в итоге выводится вот это:
[object HTMLSpanElement].
Здесь я пробовал примерно также но возвращает что то вроде [object *]:

//в ModalInfo кроме слота больше ничего нет
import ModalInfo from '@/components/ModalInfo'
//...
let ComponentClass = Vue.extend(ModalInfo)
let tooltipInfo = new ComponentClass()
tooltipInfo.$slots.info =  `
<span @click="${this.showInfo}">Ask Price</span>: ${params.value[0]}<br>
Duration: ${params.value[1]}
`;
tooltipInfo.$mount()
return tooltipInfo.$el
//...

p.s также я пробовал и в сам компонент поместить контент, без слотов но всеравно выводит [object *]

[Aetae]

RuslanSer, в плэйграунде на оффсайте работает. Наверное стоит попробовать обновить либу. Или у тебя там какая-то кривая обёртка используется - надо смотреть.

P.S. Твои пляски с бубном вокруг Vue всё равно не заработали бы, по причинам описанным мной в ответе.
Это можно было бы сделать через отдельный компонент Vue, принимающий на вход params и showInfo как props.

[RuslanSer]

Aetae, потыркал. Оно почему то работает тогда когда position имеет значения не равные top, left и т.д, если указаны эти значения то вместо элемента выводится [object HTMLSpanElement].

[Aetae]

RuslanSer, охлол. Ну это явный баг, заведи им issue на githab.)
Workaround: юзать функцию, так работает: position: () => 'top':)

Answer 2

[RuslanSer]

В общем эта штука не работает если у tooltip position (неважно где конкретно установлен tooltip) установлены значения 'top', 'bottom', 'left', 'right', 'inside'. (версия 5.1.1)
Нужно в tooltip.position ставить функцию. Но всё же все те значения которые описаны выше можно юзать если вернуть их в функции.
Код вот:

tooltip: {
            position: function (point, params, dom, rect, size) {
                  return 'top'
            }, 
            enterable: true,
            renderMode: 'html',
            appendToBody: true,
            trigger: 'item' ,
            formatter: (params, ticket, callback) => {
                let test = () => console.log('test')
                const span = document.createElement('span');
                span.onclick = test;
                span.textContent = 'Olala';
                return span
            }
    }

Будет также прекрасно работать если юзать и вью элементы:

//...
formatter: (params) => {
  let ComponentClass = Vue.extend(ModalInfo)
  let tooltipInfo = new ComponentClass()
  tooltipInfo.$mount()
  return tooltipInfo.$el
}
//...