vue-response-size
vue-response-size【Vue2】
Vue response size library.
Xs, sm, md, lg, xl size are the same as Element-UI.
Demo
Installation
npm
# vue2
$ npm i vue-response-size@1 -S
# vue3
$ npm i vue-response-size -S
yarn
# vue2
$ yarn add vue-response-size@1
# vue3
$ yarn add vue-response-size
Usage
import Vue from 'vue'
import VueResponseSize from 'vue-response-size'
Vue.use(VueResponseSize)
template:
<div v-if="$vSize.isXl">xl visible: {{ $vSize.width }}</div>
<div v-if="$vSize.isLg">lg visible: {{ $vSize.width }}</div>
<div v-if="$vSize.isMd">md visible: {{ $vSize.width }}</div>
<div v-if="$vSize.isSm">sm visible: {{ $vSize.width }}</div>
<div v-if="$vSize.isXs">xs visible: {{ $vSize.width }}</div>
$vSize Prop
Xs, sm, md, lg, xl size are the same as Element-UI.
prop | description | Type |
---|---|---|
isXl |
≥1920px | Boolean |
isLg |
≥1200px | Boolean |
isMd |
≥992px | Boolean |
isSm |
≥768px | Boolean |
isXs |
<768px | Boolean |
width |
current size | Number |
changeSize |
change size | Function |
Change Size
Vue.use(VueResponseSize, {
size: {
xl: { min: 1904 },
lg: { min: 1264 },
md: { min: 960 },
sm: { min: 600 },
xs: { max: 600 }
}
})
or
this.$vSize.changeSize({
xl: { min: 1904 },
lg: { min: 1264 },
md: { min: 960 },
sm: { min: 600 },
xs: { max: 600 }
})
Dependencies
@babel/core: ^7.12.10@babel/preset-env: ^7.12.11babel-eslint: ^10.1.0eslint: ^6.8.0eslint-config-standard: ^14.1.1eslint-plugin-html: ^6.0.0eslint-plugin-import: ^2.7.0eslint-plugin-node: ^11.0.0eslint-plugin-promise: ^4.0.1eslint-plugin-standard: ^4.0.0rollup: ^2.36.1rollup-plugin-babel: ^4.4.0rollup-plugin-eslint: ^7.0.0rollup-plugin-node-resolve: ^5.2.0rollup-plugin-terser: ^7.0.2