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.

VResponsive.js 1.7KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758
  1. 'use strict';
  2. Object.defineProperty(exports, "__esModule", {
  3. value: true
  4. });
  5. require('../../../src/stylus/components/_responsive.styl');
  6. var _measurable = require('../../mixins/measurable');
  7. var _measurable2 = _interopRequireDefault(_measurable);
  8. var _mixins = require('../../util/mixins');
  9. var _mixins2 = _interopRequireDefault(_mixins);
  10. function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
  11. /* @vue/component */
  12. // Mixins
  13. exports.default = (0, _mixins2.default)(_measurable2.default).extend({
  14. name: 'v-responsive',
  15. props: {
  16. aspectRatio: [String, Number]
  17. },
  18. computed: {
  19. computedAspectRatio: function computedAspectRatio() {
  20. return Number(this.aspectRatio);
  21. },
  22. aspectStyle: function aspectStyle() {
  23. return this.computedAspectRatio ? { paddingBottom: 1 / this.computedAspectRatio * 100 + '%' } : undefined;
  24. },
  25. __cachedSizer: function __cachedSizer() {
  26. if (!this.aspectStyle) return [];
  27. return this.$createElement('div', {
  28. style: this.aspectStyle,
  29. staticClass: 'v-responsive__sizer'
  30. });
  31. }
  32. },
  33. methods: {
  34. genContent: function genContent() {
  35. return this.$createElement('div', {
  36. staticClass: 'v-responsive__content'
  37. }, this.$slots.default);
  38. }
  39. },
  40. render: function render(h) {
  41. return h('div', {
  42. staticClass: 'v-responsive',
  43. style: this.measurableStyles,
  44. on: this.$listeners
  45. }, [this.__cachedSizer, this.genContent()]);
  46. }
  47. });
  48. // Utils
  49. //# sourceMappingURL=VResponsive.js.map