2.0.5 • Published 3 years ago
vue-keep-ratio v2.0.5
vue-keep-ratio
[中文项目介绍]
As there comes a new css attribute: aspect-ratio, I picked up my old work vue-keep-ratio
, use a more adaptive (but hack) way to achieve keep dom ratio
🍺
What
It's a vue component to keep dom ratio. (just in CSS)
Demo: Try it!
Install
# npm
npm -i vue-keep-ratio
# yarn
yarn add vue-keep-ratio
Global install
// main.js
import VueKeepRatio from "vue-keep-ratio";
Vue.use(VueKeepRatio);
// page.vue
<template>
<VueKeepRatio :ratio="16 / 9">
this box is keep ratio as default 16 / 9
</VueKeepRatio>
</template>
Just in component
// page.vue
<template>
<VueKeepRatio :ratio="16 / 9">
this box is keep ratio as default 16 / 9
</VueKeepRatio>
</template>
<script>
import VueKeepRatio from "vue-keep-ratio";
export default {
components: {
VueKeepRatio
}
}
</script>
Demo
use vue cli start demo
vue serve examples/base/main.js
API
Props
- ratio: {Number} ratio=1/1 The ratio you wanna keep, default: 1 / 1.
- width: {String} Keep width value when dom resized, default.
- height: {String} Keep width value when dom resized.
- innerClassName: {String} innerClassName='' As the name, it specify inner div wrapper additional class name
Bugs
2.0.3
3 years ago
2.0.5
3 years ago
2.0.4
3 years ago
2.0.2
3 years ago
2.0.1
3 years ago
2.0.0
3 years ago
1.3.2
5 years ago
1.3.1
5 years ago
1.3.0
5 years ago
1.2.0
5 years ago
1.1.2
5 years ago
1.1.1
5 years ago
1.1.0
5 years ago
1.0.12
5 years ago
1.0.11
5 years ago
1.0.10
5 years ago
1.0.9
5 years ago
1.0.8
5 years ago
1.0.7
5 years ago