จะแสดงองค์ประกอบที่กำหนดเองลงในป๊อปอัปมาร์กเกอร์ของแผนที่ได้อย่างไร

ฉันกำลังใช้ส่วนประกอบปลั๊กอิน Vue Timeago และฉันต้องการแสดงเวลา 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 full build" จะไม่ส่งคืนสิ่งที่เรียกว่าวลีนั้นตามตัวอักษร แม้ว่าจะใช้ในเอกสารประกอบก็ตาม สิ่งที่ฉันรู้ก็คือเมื่อฉันพยายามโทร 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