HelpPage.vue 2.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788
  1. <template>
  2. <div ref="main" class="main" @click="close">
  3. <div class="mainWindow" @click.stop>
  4. <Window @close="close">
  5. <template slot="header">
  6. Справка
  7. </template>
  8. <el-tabs type="border-card" v-model="selectedTab">
  9. <el-tab-pane class="tab" label="Общее">
  10. <CommonHelpPage></CommonHelpPage>
  11. </el-tab-pane>
  12. <el-tab-pane label="Клавиатура">
  13. <HotkeysHelpPage></HotkeysHelpPage>
  14. </el-tab-pane>
  15. <el-tab-pane label="Мышь/тачпад">
  16. </el-tab-pane>
  17. <el-tab-pane label="Помочь проекту">
  18. </el-tab-pane>
  19. </el-tabs>
  20. </Window>
  21. </div>
  22. </div>
  23. </template>
  24. <script>
  25. //-----------------------------------------------------------------------------
  26. import Vue from 'vue';
  27. import Component from 'vue-class-component';
  28. import Window from '../../share/Window.vue';
  29. import CommonHelpPage from './CommonHelpPage/CommonHelpPage.vue';
  30. import HotkeysHelpPage from './HotkeysHelpPage/HotkeysHelpPage.vue';
  31. export default @Component({
  32. components: {
  33. Window,
  34. CommonHelpPage,
  35. HotkeysHelpPage,
  36. },
  37. })
  38. class HelpPage extends Vue {
  39. selectedTab = null;
  40. close() {
  41. this.$emit('help-toggle');
  42. }
  43. keyHook(event) {
  44. if (event.type == 'keydown' && (event.code == 'Escape')) {
  45. this.close();
  46. }
  47. return true;
  48. }
  49. }
  50. //-----------------------------------------------------------------------------
  51. </script>
  52. <style scoped>
  53. .main {
  54. position: absolute;
  55. width: 100%;
  56. height: 100%;
  57. z-index: 40;
  58. display: flex;
  59. flex-direction: column;
  60. justify-content: center;
  61. align-items: center;
  62. }
  63. .mainWindow {
  64. width: 100%;
  65. height: 100%;
  66. display: flex;
  67. }
  68. .el-tabs {
  69. flex: 1;
  70. display: flex;
  71. flex-direction: column;
  72. }
  73. .el-tab-pane {
  74. flex: 1;
  75. display: flex;
  76. }
  77. </style>