文章/答案/技术大牛

发布

社区首页 >问答首页 >在网页上转储vue文件内容

问在网页上转储vue文件内容
EN

Stack Overflow用户

提问于 2021-03-11 18:49:04

回答 1查看 123关注 0票数 0

我目前正在一个站点上工作，用普通的CSS展示UI组件。我在Vue项目中使用标准HTML和CSS。我试图实现的一个特性是每个组件都有两个视图。一个是“预览”，另一个是“代码”，用户可以切换视图查看设计或代码(只需阅读)。

目前，我正试图通过使用fetch方法获取变量中vue文件的内容，并使用该变量显示组件代码来实现这一目标，但由于函数将在静态文件夹(public)中查找该文件，因此我不确定如何访问src文件夹中的文件。

就像这样：https://tailwindui.com/preview

SigInForm.vue

<template>
<component-layout class="sign-in-forms-container">
    <template v-slot:page-header>
        <p>Sign-in and Registration</p>
    </template>
    <template v-slot:page-body>
        <!-- Component list -->
        <component-box v-for="(component, index) in componentsList" :key="index" :class="component.class">
            <template v-slot:header>
                {{ component.title }}
                <span v-if="component.needJS" class="badge badge-red ml-1">requires js</span>
            </template>
            <template v-slot:body>
                <component :is="component.componentName"></component>
            </template>
        </component-box>
    </template>
</component-layout>
</template>

<script>
import ComponentLayout from "@v-includes/ComponentLayout.vue";
import ComponentBox from "@general/ComponentBox.vue";
// Sign in forms -- (I want to get raw code of following components)
import SimpleForm from "@signInForms/SimpleForm.vue";
import SimpleCard from "@signInForms/SimpleCard.vue";
import SplitScreen from "@signInForms/SplitScreen.vue";

export default {
    data() {
        return {
            componentsList: [{
                title: "Simple form",
                componentName: "SimpleForm",
            },
            {
                title: "Form in a card",
                componentName: "SimpleCard",
            },
            {
                title: "Split Screen",
                componentName: "SplitScreen",
            }, ],
        };
    },
    components: {
        ComponentLayout,
        ComponentBox,
        SimpleForm,
        SimpleCard,
        SplitScreen,
    },
};
</script>

ComponentBox.vue

<template>
<div class="component-box">
    <div class="component-box-head">
        <div>
            <slot name="header"></slot>
        </div>
        <div class="action-tabs">
            <button @click="makePreviewActive(true)" class="btn" title="View component" :class="{ active: isPreview }">
                <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z" />
                </svg>
                <span class="ml-1">Preview</span>
            </button>
            <button @click="makePreviewActive(false)" class="btn" title="Component code" :class="{ active: !isPreview }">
                <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" />
                </svg>
                <span class="ml-1">Code</span>
            </button>
        </div>
    </div>
    <div class="component-box-body">
        <transition-fade>
            <!-- Preview body -->
            <slot name="body" v-if="isPreview"></slot>
            <!-- Code body -->
            <div class="code-body" v-else>
                <pre>
                <code>
                    <p>Coming Soon...</p>
                    {{ readFileContent() }}
                </code>
                </pre>
            </div>
        </transition-fade>
    </div>
</div>
</template>

<script>
import TransitionFade from "@general/TransitionFade.vue";

export default {
    data() {
        return {
            isPreview: true,
        };
    },
    methods: {
        makePreviewActive(status) {
            if (status) {
                this.isPreview = true;
            } else {
                this.isPreview = false;
            }
        },
        readFileContent() {
           //Component file name - 
           //so something like "@signInForms/SimpleForm.vue"
            fetch("") 
                .then(function (response) {
                    return response.text();
                }).then(function (data) {
                    console.log(data);
                    //Once i have the file content as data i can use it to display it in my code block
                });
        }
    },
    components: {
        TransitionFade,
    },
};
</script>

截图

图1

图2

javascript

vue.js

回答 1

Stack Overflow用户

发布于 2021-03-11 18:55:23

像这样的事怎么样：

<template>
  <div v-if="showRawCss">
    {{ rawCass }}
  </div>
  <div v-else :style={rawCss}>
    <div class="some-class">
      some box to have the styles applied to.
    </div> 
  </div>
</template>
<script>
export default {
  name: 'SomeName',
  data() {
    return {
      rawCss: `
        border: 1px solid red;
        color: green;
      `
    }
  },
}
</script>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/66588696

复制

相似问题

问在网页上转储vue文件内容
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在网页上转储vue文件内容EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在网页上转储vue文件内容
EN