useStretchStyle.js 1014 B

123456789101112131415161718192021222324252627282930313233343536
  1. import { computed, shallowRef } from 'vue';
  2. export default (stretch => {
  3. const targetSize = shallowRef({
  4. width: 0,
  5. height: 0
  6. });
  7. function measureStretch(element) {
  8. targetSize.value = {
  9. width: element.offsetWidth,
  10. height: element.offsetHeight
  11. };
  12. }
  13. // Merge stretch style
  14. const style = computed(() => {
  15. const sizeStyle = {};
  16. if (stretch.value) {
  17. const {
  18. width,
  19. height
  20. } = targetSize.value;
  21. // Stretch with target
  22. if (stretch.value.indexOf('height') !== -1 && height) {
  23. sizeStyle.height = `${height}px`;
  24. } else if (stretch.value.indexOf('minHeight') !== -1 && height) {
  25. sizeStyle.minHeight = `${height}px`;
  26. }
  27. if (stretch.value.indexOf('width') !== -1 && width) {
  28. sizeStyle.width = `${width}px`;
  29. } else if (stretch.value.indexOf('minWidth') !== -1 && width) {
  30. sizeStyle.minWidth = `${width}px`;
  31. }
  32. }
  33. return sizeStyle;
  34. });
  35. return [style, measureStretch];
  36. });