GitCode.vue 1.5 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243
  1. <template>
  2. <details class="custom-block details custom-code">
  3. <summary>查看源代码:{{ fileUrl }}</summary>
  4. <pre class="line-numbers">
  5. <code class="language-typescript" v-html="code"></code>
  6. </pre>
  7. </details>
  8. </template>
  9. <script lang="ts">
  10. import axios from "axios"
  11. import { Component, Prop, Vue } from "vue-property-decorator";
  12. @Component
  13. export default class GitCode extends Vue {
  14. @Prop() private project: string = '/web/persagy-web';
  15. @Prop() private raw: string = '/raw/master';
  16. @Prop() private fileUrl: string = '/persagy-web-big/src/items/SIconTextItem.ts';
  17. @Prop() private type: string = 'typescript';
  18. baseUrl: string = '/git';
  19. code: string = '';
  20. created() {
  21. this.init()
  22. };
  23. get requestUrl(){
  24. return this.baseUrl + this.project + this.raw + this.fileUrl;
  25. };
  26. init(){
  27. axios({
  28. method: "get",
  29. url: this.requestUrl
  30. }).then(res => {
  31. this.code = res.data;
  32. this.$nextTick(()=>{
  33. // 此处选择器 只选择当前组件的pre code,否则影响组件外 代码区域 格式
  34. document.querySelectorAll(".custom-code pre code").forEach(block => {
  35. // @ts-ignore
  36. Prism.highlightElement(block)
  37. });
  38. });
  39. })
  40. }
  41. }
  42. </script>