介绍
开发中经常遇到这样的场景:根据元素的宽度,按比例设置高度。今天分享个指令,可以很轻松满足这类需求。
项目地址: 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>