persagy-service-doc/docs/.vuepress/components/GitCode.vue

<template>
    <details class="custom-block details custom-code">
        <summary>查看代码：{{ fileUrl }}</summary>
        <pre class="line-numbers">
    <code class="language-typescript" v-html="code"></code>
        </pre>
    </details>
</template>

<script>
    import axios from "axios"
    export default {
        name: "GitCode",
        props:{
            project: {
                type: String,
                default: '/web/persagy-web'
            },
            raw: {
                type: String,
                default: '/raw/master'
            },
            fileUrl: {
                type: String,
                default: '/persagy-web-big/src/items/SIconTextItem.ts'
            },
            type: {
                type: String,
                default: 'typescript'
            }
        },
        data(){
            return{
                baseUrl: '/git',
                code:''
            }
        },
        created() {
            this.init()
        },
        computed:{
          requestUrl(){
              return this.baseUrl + this.project + this.raw + this.fileUrl;
          }
        },
        methods: {
            init(){
                axios({
                    method: "get",
                    url: this.requestUrl
                }).then(res => {
                    this.code = res.data;
                    this.$nextTick(()=>{
                        document.querySelectorAll("pre code").forEach(block => {
                            Prism.highlightElement(block)
                        });
                    });
                })
            }
        }
    }
</script>

<style scoped>

</style>