Vue.js中设置元素的长宽比- v-aspect-ratio

Vue.js中设置元素的长宽比- v-aspect-ratio
插件名称 v-aspect-ratio
发布时间 2020年9月27日
插件作者 andrewvasilchuk

Vue.js指令允许您设置和保留元素的宽高比,无论您如何调整视口的大小。

安装和下载:

# Yarn
$ yarn add v-aspect-ratio

# NPM
$ npm install v-aspect-ratio --save

变更日志:

2020年9月26日

  • v2.0.0

如何使用它:

1.安装并导入长宽比指令。

import Vue from "vue";
import AspectRatio from "v-aspect-ratio";

// as a global plugin
Vue.use(AspectRatio);

// as a global directive
Vue.directive("aspect-ratio", AspectRatio.directive)

// as a local directive
export default {
  name: "YourAwesomeComponent",
  directives: {
    "aspect-ratio": AspectRatio.directive
  }
}

2.设置元素的纵横比。

<template>
<div v-aspect-ratio="'16:9'"></div>
<div v-aspect-ratio="'4:3'"></div>
<div v-aspect-ratio="'1:1'"></div>
<div v-aspect-ratio="'5:4'"></div>
</template>