时间戳

首页 > 解决方案 > 如何在 vue/ionic4 中显示 html

vue.js - 如何在 vue/ionic4 中显示 html

问题描述

我正在使用 Vue 尝试新的 Ionic_beta。
在一个组件中，我有一个显示一些 html 的模板。
如果我将<div>包含 html 的<ion-content>指令放在指令中，则不会显示 html。如果我省略了<ion-content>html，则会显示 html，但现在带有 html 的面板不可滚动。

html 显示，不可滚动.....

<template>
  <div>
    <ion-header>
      <ion-toolbar color="primary">
        <ion-title>Over TRINL</ion-title>
            </ion-toolbar>
        </ion-header>
        <div class="padding">
          <div v-html="legacySystemHTML"></div>
        </div>
    </div>
</template>

html 未显示

<template>
  <div>
    <ion-header>
      <ion-toolbar color="primary">
        <ion-title>Over TRINL</ion-title>
            </ion-toolbar>
        </ion-header>
        <ion-content>
            <div class="padding">
              <div v-html="legacySystemHTML"></div>
            </div>
        </ion-content>
    </div>
</template>

标签： vue.jsionic4

解决方案

如果<ion-header>并且<ion-content>不是的直接子级<ion-app>（例如，为了符合 Vue 组件要求只有 1 个根元素），您应该将它们包装在一个带有 的元素中class="ion-page"，因此在您的情况下：

<template>
  <div class="ion-page"> <!-- apply the "ion-page" class -->
    <ion-header>
      <ion-toolbar color="primary">
        <ion-title>Over TRINL</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content>
      <div class="padding">
        <div v-html="legacySystemHTML"></div>
      </div>
    </ion-content>
  </div>
</template>

另请参阅：使用 Ionic core 4 时不会显示 ion-content

示例：https ://plnkr.co/edit/ylz2jxIFjgUym98gyKeR?p=preview （无 Vue）

推荐阅读