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.4KB

123456789101112131415161718192021222324252627282930313233343536373839404142
  1. import '../../../src/stylus/components/_responsive.styl';
  2. // Mixins
  3. import Measurable from '../../mixins/measurable';
  4. // Utils
  5. import mixins from '../../util/mixins';
  6. /* @vue/component */
  7. export default mixins(Measurable).extend({
  8. name: 'v-responsive',
  9. props: {
  10. aspectRatio: [String, Number]
  11. },
  12. computed: {
  13. computedAspectRatio: function computedAspectRatio() {
  14. return Number(this.aspectRatio);
  15. },
  16. aspectStyle: function aspectStyle() {
  17. return this.computedAspectRatio ? { paddingBottom: 1 / this.computedAspectRatio * 100 + '%' } : undefined;
  18. },
  19. __cachedSizer: function __cachedSizer() {
  20. if (!this.aspectStyle) return [];
  21. return this.$createElement('div', {
  22. style: this.aspectStyle,
  23. staticClass: 'v-responsive__sizer'
  24. });
  25. }
  26. },
  27. methods: {
  28. genContent: function genContent() {
  29. return this.$createElement('div', {
  30. staticClass: 'v-responsive__content'
  31. }, this.$slots.default);
  32. }
  33. },
  34. render: function render(h) {
  35. return h('div', {
  36. staticClass: 'v-responsive',
  37. style: this.measurableStyles,
  38. on: this.$listeners
  39. }, [this.__cachedSizer, this.genContent()]);
  40. }
  41. });
  42. //# sourceMappingURL=VResponsive.js.map