javascript - Primevue Textarea 没有样式

Question

我正在使用 Vue 3.x 和 Primevue。当我添加一个 Textarea 组件时，它会出现但没有样式。

在控制台中出现一条消息：

[Vue warn]: Failed to resolve component: Textarea 
at <ArtworkCreate> 
at <App>

我尝试了一个空项目和正在设置样式的组件。

所以我相信这是我的错误。有人能帮我吗？

main.js（在 src 文件夹内）：

import { createApp } from "vue";
import App from "./App.vue";

import PrimeVue from "primevue/config";
import Button from "primevue/button";
import InputText from "primevue/inputtext";
import Calendar from "primevue/calendar";
import Textarea from "primevue/textarea";

import "primevue/resources/themes/saga-blue/theme.css";
import "primevue/resources/primevue.min.css";
import "primeicons/primeicons.css";

const app = createApp(App);
app.use(PrimeVue);

app.component("Button", Button);
app.component("InputText", InputText);
app.component("Calendar", Calendar);
app.component("TextArea", Textarea);

app.mount("#app");

App.vue（在 src 文件夹内）：

<template>
  <div class="create-container">
    <ArtistCreate />
    <ArtworkCreate />
  </div>
</template>

<script>
import ArtistCreate from "./components/ArtistCreate.vue";
import ArtworkCreate from "./components/ArtworkCreate.vue";

export default {
  name: "App",
  components: {
    ArtistCreate,
    ArtworkCreate,
  },
};
</script>

<style>
body {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}

.create-container {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: center;
  align-content: center;
}
</style>

ArtworkCreate.vue（在 src/components 内）

<template>
  <div class="artwork-create-container">
    <h1>Create Artwork</h1>
    <InputText type="text" placeholder="Title" v-model="artworkTitle" />
    <InputText type="text" placeholder="Type" v-model="artworkType" />
    <Textarea v-model="artworkDescription" rows="5" cols="30" />
    <Button label="Submit" />
  </div>
</template>

<script>
export default {
  name: "ArtworkCreate",
  data() {
    return {
      artworkTitle: "",
      artworkType: "",
      artworkDescription: "",
    };
  },
};
</script>

<style scoped>
.artwork-create-container {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: space-evenly;
  align-items: center;
}
.artwork-create-container input,
.artwork-create-container button {
  margin: 5px;
}
</style>

编辑：解决。 app.component("TextArea", Textarea); “文本区域”->“文本区域”

标签： javascripthtmlvue.jsvuejs3primevue