0

我有一个 Vue 3 自定义元素，我想在其中使用 PrimeVue 和 PrimeFlex 等。所以我首先创建一个组件，对 sfc 模式使用 .ce.vue 扩展名，并使用 defineCustomElement 和 customElements.define 的组合将其编译为一个网页组件。最后我在 index.html 中使用它来查看它是否在浏览器中工作。

它在一定程度上起作用，但并不完全。例如，我不确定如何app.use(PrimeVue)为我的案例进行翻译。

//customElement.ce.vue
<template>
  <div>Test</div>
  <AutoComplete field="name" />
</template>

<script lang="ts">
import { defineComponent } from "vue";
import AutoComplete from "primevue/autocomplete";

export default defineComponent({
  name: "customElement",
  props: {
    msg: String,
  },
  components: { AutoComplete },
  setup: () => {
    console.log(JSON.stringify(theme));
    return { PrimeVue };
  },
  styles: [],
});
</script>
<style scoped lang="scss"></style>

//main.ts
import { createApp, defineCustomElement } from "vue";
import App from "./App.vue";

//PrimeVue
import PrimeVue from "primevue/config";
import "/node_modules/primeflex/primeflex.css";
import "primevue/resources/primevue.min.css";
import "primevue/resources/themes/saga-blue/theme.css";

//CustomElement
import customElement from "@/components/customElement.ce.vue";

const customElementWC = defineCustomElement(customElement);
customElements.define("custom-element", customElementWC);

//Setup VueApplication for testing/reference, this works as expected. 
const app = createApp(App);
app.use(PrimeVue);
app.mount("#app");

//index.html (for testing) 
<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <noscript>
      <strong
        >We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work
        properly without JavaScript enabled. Please enable it to
        continue.</strong
      >
    </noscript>
    <div id="app"></div>    //test app
    <custom-element />      //the custom Web Component
    <!-- built files will be auto injected -->
  </body>
</html>

所以我可以看到 PrimeVue-Autocomplete 正在显示，但样式不起作用。

所以问题是：

如何在自定义组件中使用所有 PrimeVue？

或者换句话说：如何使用 PrimeVue 设置 Vue 3 CustomElement？

4

1 回答 1

0

所以我找到了一种解决方法（不是一个合适的解决方案）。使其大部分工作的方法是在组件本身中导入样式和 js/ts 模块。

主要样式最适合在 Web 组件的根组件中导入。它必须存在的原因是：

我仍然无法正确导入 primeflex，所以我不得不使用 cdn 链接。我认为可以使用内部导入，当我知道如何使用时我会更新答案。

要使用特定的 PrimeVue 组件，只需按照文档说明导入并注册它。

<template>
 <Button />
</template>

<script lang="ts">
import Button from "primevue/button";
import { defineComponent } from "vue";
export default defineComponent({
 components: { Button },
});
</script>

<style>
@import url("https://unpkg.com/primeflex@3.1.0/primeflex.css");
</style>
<style lang="scss" src="@/assets/scss/globals.scss"></style>
<style src="primevue/resources/primevue.min.css"></style>
<style src="primevue/resources/themes/tailwind-light/theme.css"></style>


//main.ts
import { defineCustomElement } from "vue";
import App from "./App.ce.vue";

customElements.define("custom-element", defineCustomElement(App));

限制：由于缺少插件支持（或我对此缺乏了解），这些行：

import PrimeVue from 'primevue/config';
app.use(PrimeVue);

是不可能的。不幸的是，我无法完全掌握可能产生的影响。

于 2022-02-01T11:15:30.177 回答