公共组件

本模板中提供了一些常用的组件，这里将逐一举例。

🎉 使用以下组件时均有代码提示和注释。

VNode 组件

该组件主要用处为将 JSX 渲染到 template 里，用法示例如下：

code
<template>
  <v-node :node="node" />
</template>

<script lang="tsx" setup>
const node = ref(
  <div>
    <h1>Fast Admin is setting up...</h1>
  </div>,
);

setTimeout(() => {
  node.value = (
    <div>
      <h1>Fast Admin set up successfully!</h1>
    </div>
  );
}, 3000);
</script>

FaIcon 组件

该组件主要用于渲染图标，该组件将优先加载全局注册的图标组件（适用于内网部署环境使用）再在线加载图标。

code
<template>
  <fa-icon :icon="icon" />
</template>

<script lang="tsx" setup>
const icon = ref("logos:vue");

setTimeout(() => {
  icon.value = "logos:nuxt";
}, 3000);
</script>

FaError 组件

该组件主要用于错误信息。

code
<template>
  <fa-error :error="error" />
</template>

<script lang="tsx" setup>
import type { NuxtError } from "#app";

const error = ref<Error | NuxtError<unknown>>(new Error("test error"));

setTimeout(() => {
  error.value = createError({
    statusCode: 404,
    message: "Not Found",
  });
}, 3000);
</script>
Edit this page on GitHub
Table of Contents