xm-square.vue 438 B

1234567891011121314151617181920212223242526272829303132
  1. <template>
  2. <view class="xm-square" :style="{ paddingBottom: height }">
  3. <view class="xm-square-box">
  4. <slot></slot>
  5. </view>
  6. </view>
  7. </template>
  8. <script>
  9. export default {
  10. props: {
  11. height: {
  12. type: String,
  13. default: '100%'
  14. },
  15. }
  16. }
  17. </script>
  18. <style scoped lang="scss">
  19. .xm-square {
  20. width: 100%;
  21. height: 0;
  22. position: relative;
  23. &-box {
  24. position: absolute;
  25. width: 100%;
  26. height: 100%;
  27. }
  28. }
  29. </style>