Onlypursue 2022-08-31 19:05 采纳率: 50%
浏览 90
已结题

vue3项目中动态加载组件后element-plus的标签无法渲染

在vue3项目中,用element-plus编写了一个组件,或者直接将element-plus的dialog作为一个组件,在另外的页面中动态加载这些组件后,组件的标签在浏览器中仍然是,而不是被转化为

这样,请问要怎么操作才能使element-plus样式显示出来?

组件代码:

<template>
  <div class="test-box">
    <el-row class="p-nav-bar">
      <el-col :span="24">
          <el-row class="mb-4" justify="space-between">
            <el-col :span="20">
              <span class="btn p-name">test</span>
              <el-button type="primary" plain class="btn" @click="new_policy">button1</el-button>
              <el-button type="primary" plain class="btn" @click="new_policy">button2</el-button>
              <el-button type="primary" plain class="btn" @click="new_policy">button3</el-button>
              <el-button type="primary" plain class="btn" @click="new_policy">button4</el-button>
            </el-col>
            <el-col :span="4">
              <el-button type="primary" :icon="Star" circle class="star right-btn"></el-button>
            </el-col>
          </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {
  Check,
  Delete,
  Edit,
  Message,
  Search,
  Star,
} from '@element-plus/icons-vue'
import { h, resolveComponent } from "vue";
export default {
  created(){
    return () => {
      const _component_el_button = resolveComponent("el-button")

      return h(
        _component_el_button,
        {
          size: 'small',
          type: 'primary'
        },
        '按钮'
      )
    }
  }
}

组件js:

import { Component, createApp } from "vue";
import { h, resolveComponent } from "vue";
import t from "./test_component.vue";
var instance, unmount;
function mountComponent(RootComponent) {
    const app = createApp(RootComponent);
    const root = document.createElement('div');
    document.getElementById('app').appendChild(root);
    return {
        instance: app.mount(root),
        unmount() {
            console.log("unmount");
            document.body.removeChild(root);
        },
    };
}
// 创建一个组件
export function $add_component() {
    ({ instance, unmount } = mountComponent(t));
    console.log(instance);
}
// 销毁组件
export function $del_component() {
    instance && unmount();
}

调用组件:

<script>
import { $add_component, $del_component } from "@/components/test_component";
export default {
    name: "MainView",
    methods: {
    new_component(){
      $add_component();
      setTimeout(() => {
        // 卸载组件
        $del_component();
      }, 3000);
    }
  },
};
</script>

结果:

img

  • 写回答

1条回答 默认 最新

  • 丨水木旦丨 2022-08-31 23:05
    关注

    导入组件以后需要导入样式。
    以完整导入element-plus为例,下方完整导入了样式。

    // main.ts
    import { createApp } from 'vue'
    import ElementPlus from 'element-plus'
    import 'element-plus/dist/index.css' #导入样式
    import App from './App.vue'
    
    const app = createApp(App)
    
    app.use(ElementPlus)
    app.mount('#app')
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

问题事件

  • 系统已结题 9月9日
  • 已采纳回答 9月1日
  • 创建了问题 8月31日

悬赏问题

  • ¥15 win2012 iscsi ipsec
  • ¥15 封装的 matplotlib animation 不显示图像
  • ¥15 python摄像头画面无法显示
  • ¥15 关于#3d#的问题:d标定算法(语言-python)
  • ¥15 cve,cnnvd漏洞扫描工具推荐
  • ¥15 图像超分real-esrgan网络自己训练模型遇到问题
  • ¥15 如何构建全国统一的物流管理平台?
  • ¥100 ijkplayer使用AndroidStudio/CMake编译,如何支持 rtsp 直播流?
  • ¥15 用js遍历数据并对非空元素添加css样式
  • ¥15 使用autodl云训练,希望有直接运行的代码(关键词-数据集)