标签: primevue

注意：我正在使用的示例可在 GitHub 存储库https://github.com/mary-perret-1986/primevue-poc上找到

我使用 Vue.js 3 + Vite + PrimeVue 创建了一个简单的项目。

到目前为止，当我正在开发并且正在为构建提供服务时（即/dist服务器提供构建（即）时，一切都像魅力一样。

但我想看看我是否可以打开/dist/index.html直接从浏览器打开......我的意思是，从技术上讲，这应该是可能的。

以下是配置部分：

package.json

{\n  "name": "my-vue-app",\n  "version": "0.0.0",\n  "scripts": {\n    "dev": "vite",\n    "build": "vite build",\n    "preview": "vite build && vite preview"\n  },\n  "dependencies": {\n    "primeflex": "^2.0.0",\n    "primeicons": "^4.1.0",\n    "primevue": "^3.2.0-rc.1",\n    "vue": "^3.0.5",\n    "vue-property-decorator": "^9.1.2",\n    "vue-class-component": "^8.0.0-0",\n    "vue-router": "^4.0.0-0",\n    "vuex": "^4.0.0-0"\n  },\n  "devDependencies": {\n    "@types/node": "^14.14.37",\n    "@vitejs/plugin-vue": "^1.2.1",\n    "@vue/compiler-sfc": "^3.0.5",\n    "sass": "^1.26.5",\n    "typescript": "^4.1.3",\n    "vite": "^2.1.5",\n    "vue-tsc": "^0.0.15"\n …

我正在尝试使用基于primevue的vue3和打字稿创建一个库（vue3-lib），该库将用于其他一些项目（如vue3-project）。运行 vue3-lib 时，一切都按预期工作，但是当我运行 (npm run serve) vue3-project 时，我无法显示从 vue3-lib 导入的组件（我收到“[Vue warn]: Invalid VNode 类型：Symbol(Fragment) (symbol)”，当访问 Prime Test 视图时）。我刚刚开始使用 vue3 和整个生态系统，所以任何建议都会有所帮助。谢谢！

Github：https : //github.com/aitudor/vue3-lib https://github.com/aitudor/vue3-project

我想知道是否有一种方法可以通过 primevue toast 函数调用创建可重用的脚本/类/服务，这样我就不需要在每个组件中直接调用 primevue toast 函数。

到目前为止，我尝试做的是创建一个ToastService.ts，如下所示：

import { useToast } from 'primevue/usetoast';

    const toast = useToast();

    export function addMsgSuccess(): void {
        toast.add({ severity: 'success', summary: 'Test', detail: 'Test', life: 3000 });
    }

但是这段代码使我的应用程序崩溃，并且出现以下错误：

未捕获错误：未提供 PrimeVue Toast！在 useToast (usetoast.esm.js?18cb:8:1) eval (ToastService.ts?73ba:3:1) Module../src/shared/service/ToastService.ts (app .js:1864:1) webpack_require (app.js:849:30) fn (app.js:151:20) eval (cjs.js?!./node_modules/babel-loader/lib/index.js!./ node_modules/ts-loader/index.js?!./node_modules/eslint-loader/index.js?!./src/views/cadastro-plano/CadastroPlano.ts?vue&type=script&lang=ts:31:87) 模块。 ./node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/ts-loader/index.js?!./node_modules/eslint-loader/ index.js？！./src/views/cadastro-plano/CadastroPlano.ts？

有谁知道如何解决这个问题，或者创建进行此 add() 调用的函数，这样我就不需要每次都调用它？

太长了；在 v2 中，this.$refs可以完成这项工作，但在 v3 组合 api 中我该如何做到这一点？

我正在尝试在Vue3中使用PrimeVue的CustomUpload功能，但是该API在上传文件后不会清除上传文件，我需要调用clear()父组件中的子组件的方法来清除文件并刷新按钮。

这是我的 App.vue

<template>
  <FileUpload
    name="upload"
    url="/"
    mode="basic"
    :auto="true"
    :maxFileSize="26214400"
    :fileLimit="1"
    :customUpload="true"
    @uploader="upload"
  />
  <Button name="lalaal">qweeq</Button>
</template>

<script>
import FileUpload from 'primevue/fileupload'

export default {
  setup() {
    const upload = e => {
      console.log('testing', e)
    }
    return { upload }
  },
  components: {
    FileUpload
  }
}
</script>

谢谢

我在 vue.js 项目上使用 Primevue，并通过以下方式导入主题 Deep Purple：

import 'primevue/resources/themes/mdc-light-deeppurple/theme.css';

现在我只想用自定义颜色修改主题（#673AB7）中的原色集。

我怎样才能做到这一点 ？

我在 primevue 中使用确认对话框并收到此错误：

[Vue警告]：找不到注入“Symbol()”

我不知道这个错误是什么以及如何修复它。有人可以帮我吗？这是我的源代码

const deleteCategory = () => {
        confirm.require({
            message: 'Are you sure you want to proceed?',
            header: 'Confirmation',
            icon: 'pi pi-exclamation-triangle',
            accept: () => {
               notification.showMessage("Successfully!");
            },
            reject: () => {
              router.push({ name: "CategoriesPage" });
            }
        });
    }

我使用 CLI 创建了一个 Vue 3 应用程序，并将 PrimeVue 添加到我的项目中。根据文档我想设置区域设置。

在main.ts文件中，我尝试设置一个具有多种语言的示例

  .use(PrimeVue, {\n    locale: {\n      en: {\n        message: "Message",\n      },\n      ja: {\n        message: "\xe3\x83\xa1\xe3\x83\x83\xe3\x82\xbb\xe3\x83\xbc\xe3\x82\xb8",\n      },\n      de: {\n        message: "Nachricht",\n      },\n    },\n  })\n

这是一个尝试根据message所选语言环境使用的示例组件

<template>\n  <div>\n    <p>{{ message }}</p>\n    <button @click="setCurrentLocaleToJapanese">Change to japanese</button>\n  </div>  \n</template>\n\n<script lang="ts">\nimport { defineComponent, ref } from "vue";\nimport { usePrimeVue } from "primevue/config";\n\nexport default defineComponent({\n  setup() {\n    const primevue = usePrimeVue();\n\n    const message = ref(primevue.config.currentLocale.message); // reactive, fallback locale?\n\n …

从一个干净的 vue 项目开始，我在从 PrimeVue 构建 .vue 组件时遇到了问题。这些都是现成的组件，实际上应该不会构建失败。

每次我尝试构建时，它都会失败，并且似乎在 CSS 样式开头处出现行指针失败。

ERROR in ./node_modules/primevue/components/slider/Slider.vue?vue&type=style&index=0&lang=css& (./node_modules/vue-loader/lib??vue-loader-options!./node_modules/primevue/components/slider/Slider.vue?vue&type=style&index=0&lang=css&) 340:0
Module parse failed: Unexpected token (340:0)
File was processed with these loaders:
 * ./node_modules/vue-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
|
|
> .p-slider {
|   position: relative;
| }
 @ ./node_modules/primevue/components/slider/Slider.vue?vue&type=style&index=0&lang=css& 1:0-119 1:135-138 1:140-256 1:140-256
 @ ./node_modules/primevue/components/slider/Slider.vue
 @ ./node_modules/primevue/slider.js
 @ ./myproject/components/Test.js
 @ ./myproject/components/App.js
 @ ./myproject/main.js

这是我的 webpack 配置文件：

const path = require('path');
const { VueLoaderPlugin } = …

我想使用PrimeVue库中的 Toast 组件，并且还想为其创建一个很好的可重用服务，但我收到此错误。如果我不尝试为 Toast 通知提取单独的服务，这似乎不是问题。

但我确实想useToast()从自定义服务内部调用，而不是直接在组件的setup函数中调用。

我正在使用Vue 3.2.25最新Vite.js 2.9.9版本的PrimeVue

[Vue warn]: inject() can only be used inside setup() or functional components.
[Vue warn]: Unhandled error during execution of native event handler 
  at <App>

Uncaught Error: No PrimeVue Toast provided!
    at useToast (usetoast.esm.js:8:15)
    at Proxy.showToast (toastService.js:4:19)
    at _createElementVNode.onClick._cache.<computed>._cache.<computed> (App.vue:4:21)
    at callWithErrorHandling (runtime-core.esm-bundler.js:155:22)
    at callWithAsyncErrorHandling (runtime-core.esm-bundler.js:164:21)
    at HTMLButtonElement.invoker (runtime-dom.esm-bundler.js:369:13)

这是CodeSandbox链接：https://codesandbox.io/s/prime-vue-toast-issue-owcio8?file=/src/ services/toastService.js

这是我的main.js

[Vue warn]: inject() can only be used …

编辑：由于我无法弄清楚这一点，所以我放弃了 Vue3 并返回到 Vue2 并切换到 Vuetify。

我对 Vue 完全陌生，并决定将 Vue 3 用于项目，这应该会导致我的硕士论文。由于更新后可在 Vue 3 上运行的 UI 库并不多，因此我决定使用 Primevue。

目前我正在尝试将 Primevue 的主题之一应用到我的项目中，但结果不是很令人满意。我使用的是深色主题，但背景全是白色，而组件使用主题作为背景和一般样式。

我希望有人能够帮助正确应用样式。

作为一个额外的问题，我想知道降级到 Vue 2 并使用更完善的 UI 库（例如 Vuetify 或 BootstrapVue）是否会更好。

主文件

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

import TieredMenu from 'primevue/tieredmenu';
import InputSwitch from 'primevue/inputswitch';

// import 'primevue/resources/themes/bootstrap4-light-blue/theme.css';
import 'primevue/resources/themes/bootstrap4-dark-blue/theme.css';
import 'primevue/resources/primevue.min.css';
import 'primeicons/primeicons.css';
import 'primeflex/primeflex.css';

const app = createApp(App);

app.use(store)
    .use(router)
    .use(VueApexCharts)
    .use(VueEllipseProgress)
    .component('TieredMenu', TieredMenu)
    .component('InputSwitch', …