GitCode.vue 1.9 KB

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