GitCode.vue 1.8 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859
  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({
  15. type: String,
  16. required: false,
  17. default: '/web/persagy-web'
  18. }) project !: string;
  19. @Prop({
  20. type: String,
  21. required: false,
  22. default: '/raw/master'
  23. }) raw !: string;
  24. @Prop({
  25. type: String,
  26. required: false,
  27. default: '/persagy-web-big/src/items/SIconTextItem.ts'
  28. }) fileUrl !: string;
  29. @Prop({
  30. type: String,
  31. required: false,
  32. default: 'typescript'
  33. }) type !: string;
  34. baseUrl: string = '/git';
  35. code: string = '';
  36. created() {
  37. this.init()
  38. };
  39. get requestUrl(){
  40. return this.baseUrl + this.project + this.raw + this.fileUrl;
  41. };
  42. init(){
  43. axios({
  44. method: "get",
  45. url: this.requestUrl
  46. }).then(res => {
  47. this.code = res.data;
  48. this.$nextTick(()=>{
  49. // 此处选择器 只选择当前组件的pre code,否则影响组件外 代码区域 格式
  50. document.querySelectorAll(".custom-code pre code").forEach(block => {
  51. // @ts-ignore
  52. Prism.highlightElement(block)
  53. });
  54. });
  55. })
  56. }
  57. }
  58. </script>