SetPositionPage.vue 2.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596
  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. <div class="slider">
  9. <el-slider v-model="sliderValue" :max="sliderMax" :format-tooltip="formatTooltip"></el-slider>
  10. </div>
  11. </Window>
  12. </div>
  13. </div>
  14. </template>
  15. <script>
  16. //-----------------------------------------------------------------------------
  17. import Vue from 'vue';
  18. import Component from 'vue-class-component';
  19. import _ from 'lodash';
  20. import Window from '../../share/Window.vue';
  21. export default @Component({
  22. components: {
  23. Window,
  24. },
  25. watch: {
  26. sliderValue: function(newValue) {
  27. this.$emit('book-pos-changed', {bookPos: newValue});
  28. },
  29. },
  30. })
  31. class SetPositionPage extends Vue {
  32. sliderValue = null;
  33. sliderMax = null;
  34. created() {
  35. this.commit = this.$store.commit;
  36. this.reader = this.$store.state.reader;
  37. }
  38. formatTooltip(val) {
  39. if (this.sliderMax)
  40. return (val/this.sliderMax*100).toFixed(2) + '%';
  41. else
  42. return 0;
  43. }
  44. close() {
  45. this.$emit('set-position-toggle');
  46. }
  47. keyHook(event) {
  48. if (event.type == 'keydown' && (event.code == 'Escape' || event.code == 'KeyP')) {
  49. this.close();
  50. }
  51. return true;
  52. }
  53. }
  54. //-----------------------------------------------------------------------------
  55. </script>
  56. <style scoped>
  57. .main {
  58. position: absolute;
  59. width: 100%;
  60. height: 100%;
  61. z-index: 40;
  62. display: flex;
  63. flex-direction: column;
  64. justify-content: center;
  65. align-items: center;
  66. }
  67. .mainWindow {
  68. width: 100%;
  69. max-width: 600px;
  70. height: 140px;
  71. display: flex;
  72. position: relative;
  73. top: -50px;
  74. }
  75. .slider {
  76. margin: 20px;
  77. background-color: #efefef;
  78. border-radius: 15px;
  79. }
  80. .el-slider {
  81. margin-right: 20px;
  82. margin-left: 20px;
  83. }
  84. </style>