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-coverflow

Use

// 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 serve

License

MIT