vue 子组件批量导入及根据参数动态组件渲染

最新推荐文章于 2024-08-21 10:29:23 发布

看客随心

最新推荐文章于 2024-08-21 10:29:23 发布

阅读量512

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/liux6687/article/details/119376505

版权

Vue 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

<template>
    <div>
        <component class="item" :is="currentView"></component>
    </div>
</template>

<script>
const path = require("path");
const files = require.context("@/views/handle-instruction/details", false, /\.vue$/);
const modules = {};
files.keys().forEach(key => {
  const name = path.basename(key, ".vue");
  modules[name] = files(key).default || files(key);
});
export default {
    components: modules,
    computed: {
        currentView() {
            return `detail-${this.$route.query.type}`
        }
    }
}
</script>

::v-deep .item {
    .wrapper {
        margin: 0 20px;
        padding-right: 40px;
        width: 60%;
    }
    .wrapper img {
        width: 100%;
    }
    .wrapper table tr {
        vertical-align: baseline;
    }
    .wrapper p {
        margin-top: 10px;
        line-height: 1.3;
    }
    .bold {
        font-weight: bold;
    }
    .blue {
        color: #528EFE;
    }
}