vue-seamless-roll

Vue3 Demo

Vue2 Demo

Install

npm i vue-seam-roll

Props

props: {
  rollList: {
    // As the name implies.
    type: Array as PropType<(string | number)[]>,
    default: () => [],
  },
  interval: {
    // How long is the item Staying.
    type: [ Number, String ],
    default: 2000,
  },
  transitions: {
    // No need to describe more.
    type: Object as PropType<{
      'transition-delay': string
      'transition-duration': string
      'transition-timing-function': string
    }>,
    default: () => ({
      'transition-delay': '0',
      'transition-duration': '1s', // Actually, the whole duration time is added with the `transition-delay`.
      'transition-timing-function': 'linear',
    }),
  },
},

TODO

• [ ] Support slot.
• [ ] define and expose methods like startRoll \ stopRoll \ rollTo .