Debug.vue 890 B

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455
  1. <template>
  2. <div class="debug" :class="{ open }" @click="open = !open">
  3. <pre>debug</pre>
  4. <pre>$page {{ $page }}</pre>
  5. <pre>$siteByRoute {{ $siteByRoute }}</pre>
  6. <pre>$site {{ $site }}</pre>
  7. </div>
  8. </template>
  9. <script>
  10. import { ref } from 'vue'
  11. export default {
  12. setup() {
  13. const open = ref(false)
  14. return {
  15. open
  16. }
  17. }
  18. }
  19. </script>
  20. <style>
  21. .debug {
  22. box-sizing: border-box;
  23. position: fixed;
  24. z-index: 999;
  25. cursor: pointer;
  26. bottom: 0;
  27. right: 0;
  28. width: 80px;
  29. height: 30px;
  30. padding: 5px;
  31. overflow: hidden;
  32. color: #eeeeee;
  33. transition: all .15s ease;
  34. background-color: rgba(0,0,0,0.85);
  35. }
  36. .debug.open {
  37. width: 500px;
  38. height: 100%;
  39. margin-top: 0;
  40. padding: 0 0;
  41. overflow: scroll;
  42. }
  43. .debug pre {
  44. font-family: Hack, monospace;
  45. font-size: 13px;
  46. margin: 0;
  47. padding: 5px 10px;
  48. border-bottom: 1px solid #eee;
  49. }
  50. </style>