Skip to content

响应式 DIV 盒子,根据输入的宽高比自动变化大小

标签
开发/前端/Vue
开发/前端/Vue/Vue3
字数
213 字
阅读时间
2 分钟
主体版本号文档地址(如果有)
Vue3.2
vue
<!-- 响应式 DIV 盒子,根据输入的宽高比自动变化大小 -->

<script lang="ts" setup>
const props = defineProps({
  /**
    # 两种方案选其一填写
    1. 直接填写宽度/高度
    2. 或者填写计算后的宽高比
   */

  // 宽度
  w: {
    required: true,
    type: Number,
  },
  // 高度
  h: {
    required: true,
    type: Number,
  },

  // 宽高比
  aspectRatio: {
    default: 0,
    type: Number,
  },
})

const aspectRatio = computed(() => `${props.aspectRatio || (props.h / props.w * 100).toFixed(4) || 100}%`)
</script>

<template>
  <div class="reactive-box-frame">
    <div class="reactive-box-frame-pillar" />
    <div class="reactive-box">
      <slot />
    </div>
  </div>
</template>

<style scoped>
.reactive-box-frame {
  width: 100%;
  position: relative;
  display: block;
}
.reactive-box-frame-pillar {
  padding-bottom: v-bind(aspectRatio);
  display: block;
}
.reactive-box {
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  top: 0;
  overflow: hidden;
}
</style>

贡献者

文件历史

撰写