vc

vue-coverflow

> vue-coverflow is a vue2 component to simulate the Apple Cover Flow UI effect, without dependency.

Showing:

Popularity

Downloads/wk

43

Maintenance

No Maintenance Data Available

Package

Dependencies

0

License

Type Definitions

Tree-Shakeable

No?

Categories

Readme

vue-coverflow

vue-coverflow is a vue2 component to simulate the Apple Cover Flow UI effect, without dependency.

NPM

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

AttributeTypeDescriptionExample
coverListArrayEach object contains two elements, cover is image's url, title will be showed on the bottom of cover(required: true)[{ cover: '', title: ''}]
widthNumberwidth of coverflow(default: 980)
bgColorStringbackground color(default: 'transparent')
indexNumberwhich cover checked(default: 0)
coverWidthNumberwidth of each cover(default: 100)
coverHeightNumberheight of highest cover(default: coverWidth)
coverSpaceNumberspaceing between two cover(default: 50)
coverShadowBooleanreflection effect, total height will be changed to two times (default: false)
coverFaltBooleandisable 3D rotation(default: false)

Events

Event NamedescriptionParameters
changetriggers when the selected cover changesthe 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

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100