Как отобразить пользовательский компонент во всплывающем окне маркера карты?

Я использую компонент плагина Vue Timeago и хочу показать время назад в содержимом плагина карты. Сверхупрощенный пример, иллюстрирующий использование, будет выглядеть примерно так:

let popup = L.responsivePopup().setContent(`
    <h1>Hello world</h1>
    <p>A thing happened <Timeago datetime="${datetime}"></Timeago></p>
`);
L.marker([lat, lon]).bindPopup(popup).addTo(this.map);

Согласно этому ответу и документацию Vue, я должен быть в состоянии скомпилировать это, используя Vue.compile(), но я не понимаю концепцию.

Во-первых, нет объяснения, что такое «полная сборка». Как я могу сказать, является ли то, что у меня есть, «полной сборкой»? Поиск «полной сборки vuejs» не возвращает ничего, что буквально упоминается как эта фраза, даже если они используют ее в документации. Все, что я знаю, это то, что когда я пытаюсь вызвать Vue.compile() с импортированным import Vue from 'vue', он жалуется, говоря:

TypeError: vue__WEBPACK_IMPORTED_MODULEVue.compile()_.default.compile не является функцией

Так что я не знаю, куда идти оттуда.

И затем, во-вторых (при условии, что первое будет отсортировано), мне придется заставить мой HTML содержать пустой div с определенным id, дождаться его рендеринга, а затем вызвать на нем Vue.compile(), так как там работает пример кода с .mount() в идентификаторе элемента? Потому что это кажется немного «неправильным», имея, казалось бы, лишний шаг. Или это единственный способ заставить этот сценарий работать?

Если есть более простое альтернативное ожидание выполнения этой работы, например, заставить компонент Timeago просто возвращать только отображаемую строку, например 2 hours ago, которую я могу включить в свой строковый литерал, это также сработает для меня. В любом случае это хорошо.


vuejs2 vue-component
person Digital Ninja    schedule 31.08.2019    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Vue имеет разные сборки своего пакета, full означает, что пакет может компилировать шаблоны и запускать его. Все типы сборки можно найти здесь https://vuejs.org/v2/guide/installation.html#Explanation-of-Different-Builds

Vue.compile позволяет вам использовать функции рендеринга, которые позволяют вам манипулировать DOM и создавать элементы программным способом. Здесь вы можете найти документацию по Vue https://vuejs.org/v2/guide/render-function.html

Что касается проблемы, с которой вы столкнулись, вы можете создать компонент vue и поместить в него это всплывающее окно, этот компонент при рендеринге будет отображать компонент timeago.

<template>
    <h1>Hello world</h1>
    <p>A thing happened <Timeago datetime="${datetime}"></Timeago></p>
</template>

import Timego from './Timeago.vue'

export default {
    components: {
        Timeago
    },

    props: {
        datetime: String
    }
}
person Luis Brito    schedule 31.08.2019
comment
Извините, но я не понимаю, как это помогает. Первая часть о функциях рендеринга, которая кажется заменой написанию HTML, но не похожа на метод получения отрендеренного HTML по запросу. В моей ситуации происходит то, что при щелчке пользователя я сам создаю новый элемент DOM (то есть через Leaflet), которому я предоставляю только статический HTML для отображения во всплывающем окне. Поэтому я не понимаю, где находится механизм, в котором я бы сказал vue запустить этот компонент Timeago, чтобы превратить 2019-09-02 в сегодняшний день, и вернуть мне весь этот результат. Тебе известно? - person Digital Ninja; 02.09.2019