2.2.0 • Published 6 years ago
vue-coverflow v2.2.0
vue-coverflow
vue-coverflow is a vue2 component to simulate the Apple Cover Flow UI effect, without dependency.
Demo | 案例
Install
npm install vue-coverflow --save
# or
yarn add vue-coverflowUse
// Use in component
import coverflow from 'vue-coverflow'
export default {
components: {
coverflow
}
}
// Use in global
import coverflow from 'vue-coverflow'
Vue.component(coverflow.name, coverflow)
// or
Vue.use(coverflow)<coverflow [options]></coverflow>Options
Attributes
You can set them to your data function
| Attribute | Type | Description | Example |
|---|---|---|---|
| coverList | Array | Each object contains two elements, cover is image's url, title will be showed on the bottom of cover(required: true) | { cover: '', title: ''} |
| width | Number | width of coverflow(default: 980) | |
| bgColor | String | background color(default: 'transparent') | |
| index | Number | which cover checked(default: 0) | |
| coverWidth | Number | width of each cover(default: 100) | |
| coverHeight | Number | height of highest cover(default: coverWidth) | |
| coverSpace | Number | spaceing between two cover(default: 50) | |
| coverShadow | Boolean | reflection effect, total height will be changed to two times (default: false) | |
| coverFalt | Boolean | disable 3D rotation(default: false) |
Events
| Event Name | description | Parameters |
|---|---|---|
| change | triggers when the selected cover changes | the index of the curent cover |
Develop
git clone https://github.com/OrangeXC/vue-coverflow.git
cd vue-coverflow
yarn # or npm install
yarn serve # or npm run serveLicense
MIT