shortcut.js 1.7 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243
  1. define(['vue'], function (Vue) {
  2. 'use strict';
  3. Vue.component('shortcut', {
  4. data: function () {
  5. return {
  6. top: '',
  7. quick: false
  8. };
  9. },
  10. methods: {
  11. touchMove: function (event) {
  12. event.preventDefault();
  13. var screenHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight,
  14. oneTenth = screenHeight / 10,
  15. min = oneTenth * 2,
  16. max = oneTenth * 8;
  17. if (min >= event.touches[0].clientY) {
  18. this.top = screenHeight / 10 * 2;
  19. } else if (event.touches[0].clientY >= max) {
  20. this.top = screenHeight / 10 * 8;
  21. } else {
  22. this.top = event.touches[0].clientY;
  23. }
  24. }
  25. },
  26. template: '<div class="shortcut" :style="{top: top + \'px\'}" @touchmove.stop="touchMove">' +
  27. '<div v-if="quick" class="menu">' +
  28. '<a href="/wap/index/index.html">' +
  29. '<img src="/wap/first/zsff/images/shortcut1.png">' +
  30. '</a>' +
  31. '<a href="/wap/service/service_list.html">' +
  32. '<img src="/wap/first/zsff/images/shortcut4.png">' +
  33. '</a>' +
  34. '<a href="/wap/my/index.html">' +
  35. '<img src="/wap/first/zsff/images/shortcut3.png">' +
  36. '</a>' +
  37. '</div>' +
  38. '<div class="home" @click="quick = !quick">' +
  39. '<img :src="quick ? \'/wap/first/zsff/images/shortcut-open.gif\' : \'/wap/first/zsff/images/shortcut-close.gif\'">' +
  40. '</div>' +
  41. '</div>'
  42. });
  43. });