介绍

开发中经常遇到这样的场景：根据元素的宽度，按比例设置高度。今天分享个指令，可以很轻松满足这类需求。
项目地址： https://github.com/MarxJiao/vue-proportion-directive

使用

安装

npm install vue-proportion-directive --save

代码

在新建vue实例前引用指令

import proportion from 'vue-proportion-directive';

Vue.use(proportion);

在需要设置比例的元素上使用指令

<template>
    <!-- 这个元素的高度会是宽度的0.5倍 -->
    <div v-proportion="0.5">
        这里是头部
    </div>
</template>