GitCode.vue 1.8 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071
  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>
  10. import axios from "axios"
  11. export default {
  12. name: "GitCode",
  13. props:{
  14. project: {
  15. type: String,
  16. default: '/web/persagy-web'
  17. },
  18. raw: {
  19. type: String,
  20. default: '/raw/master'
  21. },
  22. fileUrl: {
  23. type: String,
  24. default: '/persagy-web-big/src/items/SIconTextItem.ts'
  25. },
  26. type: {
  27. type: String,
  28. default: 'typescript'
  29. }
  30. },
  31. data(){
  32. return{
  33. baseUrl: '/git',
  34. username: 'lbsl',
  35. password: '20200829',
  36. code:''
  37. }
  38. },
  39. created() {
  40. this.init()
  41. },
  42. computed:{
  43. requestUrl(){
  44. return this.baseUrl + this.project + this.raw + this.fileUrl;
  45. }
  46. },
  47. methods: {
  48. init(){
  49. axios({
  50. method: "get",
  51. url: this.requestUrl,
  52. headers: {
  53. 'Authorization': "Basic " + btoa(this.username + ":" + this.password)
  54. }
  55. }).then(res => {
  56. this.code = res.data;
  57. this.$nextTick(()=>{
  58. document.querySelectorAll("pre code").forEach(block => {
  59. Prism.highlightElement(block)
  60. });
  61. });
  62. })
  63. }
  64. }
  65. }
  66. </script>
  67. <style scoped>
  68. </style>