SetPositionPage.vue 1.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475
  1. <template>
  2. <Window ref="window" height="140px" max-width="600px" :top-shift="-50" @close="close">
  3. <template slot="header">
  4. Установить позицию
  5. </template>
  6. <div class="slider q-px-md">
  7. <q-slider
  8. v-model="sliderValue"
  9. :max="sliderMax"
  10. label
  11. :label-value="(sliderMax ? (sliderValue/this.sliderMax*100).toFixed(2) + '%' : 0)"
  12. color="primary"
  13. />
  14. </div>
  15. </Window>
  16. </template>
  17. <script>
  18. //-----------------------------------------------------------------------------
  19. import Vue from 'vue';
  20. import Component from 'vue-class-component';
  21. import Window from '../../share/Window.vue';
  22. export default @Component({
  23. components: {
  24. Window,
  25. },
  26. watch: {
  27. sliderValue: function(newValue) {
  28. if (this.initialized)
  29. this.$emit('book-pos-changed', {bookPos: newValue});
  30. },
  31. },
  32. })
  33. class SetPositionPage extends Vue {
  34. sliderValue = null;
  35. sliderMax = null;
  36. created() {
  37. this.commit = this.$store.commit;
  38. this.reader = this.$store.state.reader;
  39. this.initialized = false;
  40. }
  41. init(sliderValue, sliderMax) {
  42. this.$refs.window.init();
  43. this.sliderMax = sliderMax;
  44. this.sliderValue = sliderValue;
  45. this.initialized = true;
  46. }
  47. close() {
  48. this.$emit('set-position-toggle');
  49. }
  50. keyHook(event) {
  51. if (event.type == 'keydown' && (event.code == 'Escape' || event.code == 'KeyP')) {
  52. this.close();
  53. }
  54. return true;
  55. }
  56. }
  57. //-----------------------------------------------------------------------------
  58. </script>
  59. <style scoped>
  60. .slider {
  61. margin: 20px;
  62. background-color: #efefef;
  63. border-radius: 15px;
  64. }
  65. </style>