12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061 |
- <template>
- <details class="custom-block details custom-code">
- <summary>查看源代码:{{ fileUrl }}</summary>
- <div style="max-height: 800px;overflow: auto">
- <pre class="line-numbers">
- <code class="language-typescript" v-html="code"></code>
- </pre>
- </div>
- </details>
- </template>
- <script lang="ts">
- import axios from "axios"
- import { Component, Prop, Vue } from "vue-property-decorator";
- @Component
- export default class GitCode extends Vue {
- @Prop({
- type: String,
- required: false,
- default: '/web/persagy-web'
- }) project !: string;
- @Prop({
- type: String,
- required: false,
- default: '/raw/master'
- }) raw !: string;
- @Prop({
- type: String,
- required: false,
- default: '/persagy-web-big/src/items/SIconTextItem.ts'
- }) fileUrl !: string;
- @Prop({
- type: String,
- required: false,
- default: 'typescript'
- }) type !: string;
- baseUrl: string = '/gogs';
- code: string = '';
- created() {
- this.init()
- };
- get requestUrl(){
- return this.baseUrl + this.project + this.raw + this.fileUrl;
- };
- init(){
- axios({
- method: "get",
- url: this.requestUrl
- }).then(res => {
- this.code = res.data;
- this.$nextTick(()=>{
- // 此处选择器 只选择当前组件的pre code,否则影响组件外 代码区域 格式
- document.querySelectorAll(".custom-code pre code").forEach(block => {
- // @ts-ignore
- Prism.highlightElement(block)
- });
- });
- })
- }
- }
- </script>
|