3 回答

TA貢獻1794條經(jīng)驗 獲得超8個贊
簡單的答案是否定的,渲染函數(shù)/模板需要根元素。您可以使用<div>
內(nèi)聯(lián)元素(例如 a)<span>
或使用 css 屬性設(shè)置 div 的display: inline
樣式來解決此問題,而不是使用 a。

TA貢獻1155條經(jīng)驗 獲得超0個贊
我通過將 css 樣式屬性傳遞給父 vue 組件的模板,使用解決方法解決了我最初的意圖:
<template>
<div>
<span v-for="(line, index) in paragraph.lines" :key="index">
<p v-if="line.length">
<span v-for="(lineFragment, index) in line" :key="index">
<component class="inline-component" :element="lineFragment" :is="lineFragment.type"/>
</span>
</p>
</span>
</div>
</template>
<script>
import { Component, Prop } from 'vue-property-decorator'
import ElementHook from '@/views/ElementHook.vue'
@Component
export default class ParagraphWrapper extends ElementHook {
@Prop() element!: ParagraphElement
}
</script>
<style scoped>
.inline-component {
display: inline;
}
</style>
ElementHook 組件作為一個基本的抽象類,它導(dǎo)入所有可以通過 `:is="lineFragment.type" 顯示的子組件(例如 TextWrapper 組件的“text”)。
如果想要確保段落仍然圍繞父容器對象的邊框,您需要考慮添加white-space: pre-wrap;到 SFC 底部定義的 css 類。

TA貢獻1836條經(jīng)驗 獲得超4個贊
Vue 組件模板應(yīng)該具有 DOM 中存在的根元素。通常使用div
或包裝元素。span
這很少是一個問題,因為可以設(shè)置根元素的樣式以適應(yīng)布局。
vue-fragment插件提供了React.Fragment
Vue 中的功能。它基本上是在安裝時解開根元素。由于它是一種黑客攻擊,因此它可能無法在所有情況下都按預(yù)期工作。
渲染函數(shù)可用于通過_v
內(nèi)部方法渲染文本節(jié)點。它使用未記錄的 API 表明它也是一種黑客攻擊。
- 3 回答
- 0 關(guān)注
- 172 瀏覽
添加回答
舉報