App.vue 1.3 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889
  1. <template>
  2. <div>
  3. <navbar/>
  4. <router-view />
  5. <span v-if="connecting" class="alert">Socket.io connecting</span>
  6. <span v-if="!connecting && !connected" class="alert">Socket.io not connected</span>
  7. </div>
  8. </template>
  9. <script>
  10. import io from "../io.js";
  11. import Navbar from './components/Navbar.vue';
  12. export default {
  13. components: { Navbar },
  14. replace: false,
  15. data: () => {
  16. return {
  17. connecting: true,
  18. connected: false
  19. }
  20. },
  21. methods: {
  22. },
  23. mounted() {
  24. io.onConnect(() => {
  25. this.connected = true;
  26. this.connecting = false
  27. });
  28. io.onDisconnect(() => {
  29. this.connected = false;
  30. });
  31. io.onConnectError(() => {
  32. this.connecting = false;
  33. });
  34. }
  35. };
  36. </script>
  37. <style lang="scss">
  38. body {
  39. font-family: Roboto, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  40. background-color: lightgray;
  41. }
  42. * {
  43. margin: 0;
  44. padding: 0;
  45. }
  46. main {
  47. padding: 25px 50px;
  48. }
  49. .button {
  50. padding: 8px 12px;
  51. background-color: rgb(45, 150, 185);
  52. color: white;
  53. text-decoration: none;
  54. display: inline-block;
  55. box-shadow: none;
  56. border: none;
  57. cursor: pointer;
  58. &:hover, &:focus {
  59. background-color: rgb(22, 133, 170);
  60. }
  61. }
  62. input, select {
  63. padding: 8px 12px;
  64. }
  65. </style>
  66. <style lang="scss" scoped>
  67. .alert {
  68. position: absolute;
  69. top: 50px;
  70. right: 50px;
  71. background-color: rgb(45, 150, 185);
  72. color: white;
  73. padding: 20px;
  74. font-size: 40px;
  75. }
  76. </style>