Vue Aspect Ratio
made with Vuejs

Vue Aspect Ratio

这是一个呈现特定长宽比元素的Vue的组件。

相关问答
暂无相关问题
查看全部
简介及使用教程

Vue Aspect Ratio是一个呈现特定长宽比元素的Vue的组件,无需JavaScript计算。

Vue Aspect Ratio没有依赖关系,并且具有100%的响应速度。

安装

Npm

npm i vue-aspect-ratio

Yarn

yarn add vue-aspect-ratio

使用

作为全局组件引入:

import Vue from "vue";
import VueAspectRatio from "vue-aspect-ratio";

Vue.component("vue-aspect-ratio", VueAspectRatio)

或者组件内引入

import VueAspectRatio from "vue-aspect-ratio";

export default {
    name: "AmazingComponent",
    props: [myprop],
    components: {
        "vue-aspect-ratio": VueAspectRatio
    }
}

模板中使用

<div class="my-container">
    <vue-aspect-ratio ar="16:9" width="640px">
        <div>your content goes here</div>
    </vue-aspect-ratio>
</div>

示例

image.png

responsiveness gif

作者

Alberto De Agostini

@albertodeago88

相关项目

这是一个漂亮的Vue聊天组件。
这是一个基于Vue.js的模拟命令行效果的动画组件。
Vue.js的文本幻灯片组件。
这是一个基于Vue.js的内容切换组件。
这是一个基于Vue的图像墙组件。
这是一个灵活可扩展的内容容器组件。
这是ApexCharts的Vue.js组件。