Ohm-Management - Projektarbeit B-ME
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

VParallax.js 2.2KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788
  1. // Style
  2. import '../../../src/stylus/components/_parallax.styl';
  3. // Mixins
  4. import Translatable from '../../mixins/translatable';
  5. import mixins from '../../util/mixins';
  6. /* @vue/component */
  7. export default mixins(Translatable).extend({
  8. name: 'v-parallax',
  9. props: {
  10. alt: {
  11. type: String,
  12. default: ''
  13. },
  14. height: {
  15. type: [String, Number],
  16. default: 500
  17. },
  18. src: String
  19. },
  20. data: function data() {
  21. return {
  22. isBooted: false
  23. };
  24. },
  25. computed: {
  26. styles: function styles() {
  27. return {
  28. display: 'block',
  29. opacity: this.isBooted ? 1 : 0,
  30. transform: 'translate(-50%, ' + this.parallax + 'px)'
  31. };
  32. }
  33. },
  34. watch: {
  35. parallax: function parallax() {
  36. this.isBooted = true;
  37. }
  38. },
  39. mounted: function mounted() {
  40. this.init();
  41. },
  42. methods: {
  43. init: function init() {
  44. var _this = this;
  45. var img = this.$refs.img;
  46. if (!img) return;
  47. if (img.complete) {
  48. this.translate();
  49. this.listeners();
  50. } else {
  51. img.addEventListener('load', function () {
  52. _this.translate();
  53. _this.listeners();
  54. }, false);
  55. }
  56. },
  57. objHeight: function objHeight() {
  58. return this.$refs.img.naturalHeight;
  59. }
  60. },
  61. render: function render(h) {
  62. var imgData = {
  63. staticClass: 'v-parallax__image',
  64. style: this.styles,
  65. attrs: {
  66. src: this.src,
  67. alt: this.alt
  68. },
  69. ref: 'img'
  70. };
  71. var container = h('div', {
  72. staticClass: 'v-parallax__image-container'
  73. }, [h('img', imgData)]);
  74. var content = h('div', {
  75. staticClass: 'v-parallax__content'
  76. }, this.$slots.default);
  77. return h('div', {
  78. staticClass: 'v-parallax',
  79. style: {
  80. height: this.height + 'px'
  81. },
  82. on: this.$listeners
  83. }, [container, content]);
  84. }
  85. });
  86. //# sourceMappingURL=VParallax.js.map