Vue Impress

vue component inspired by impress.js

install

npm install vue-impress

usage

Define a Vue component file, then mount it. Do not forget the css file.

<template lang="pug">
  .app(tabindex="1", ref="app", @keyup.right.space="impressNextStep", @keyup.left="impressPrevStep")
    impress-viewport(ref="impress", :steps="steps", :config="config")
</template>

<script>
import Vue from 'vue'
import VueImpress from 'vue-impress'
import 'vue-impress/dist/vue-impress.css'

Vue.use(VueImpress)
export default {

    methods: {
        impressPrevStep() {
            this.$refs.impress.prevStep()
        },
        impressNextStep() {
            this.$refs.impress.nextStep()
        },
    },

    mounted() {
        this.$refs.app.focus()
    },

    data() {
        return {
            config: {
                width: 1000, // required
                height: 600, // required
                transitionDuration: 1200, default 1000
                perspective: 800, // default 1000

                /* in fullscreen, only first viewport instance work, others are meaningless
                 * 若全屏模式，则只有第一个viewport的实例可以正常工作，大概...
                 * 全屏的话，第一个实例会占满窗口，就像impress.js的例子一样，他实例也没有意义 */
                fullscreen: true, // default true
            },
            steps: [{
                x: 500,
                y: 0,
                /* string content
                 * 可以传入普通文本
                 */
                content: 'Hint: press space, right key to next step, left to prev step',
                id: 'firstStep'
            }, {
                x: 0,
                y: -300,
                scale: 2,
                /* content could be vue component
                 * 可以传入vue组件
                 */
                component: CustomCom,
                /* props is optional
                 * props按需传，没有可不写
                 */
                props: {
                    myname: 'abc',
                },
                transitionDuration: 1000,
                // transitionTimingFunction: 'linear', // default 'ease'
            }, {
                x: 1000,
                y: -200,
                z: 200,
                rotateX: 80,
                scale: 3,
                content: 'X axis rotate',
                id: 'xRotateStep',
            }, {
                x: 0,
                y: 0,
                rotate: 720,
                content: 'z rotate step',
                id: 'zRotateStep',
            }, {
                x: 0,
                y: 1000,
                z: 900,
                scale: 5,
                content: 'overview',
                id: 'overview',
            }],
        }
    },
}
</script>

<style>
  body {
      overflow: hidden;
      height: 100%;
  }
  .app {
      width: 100%;
      height: 100%;
      position: absolute;
      overflow: hidden;
      top: 50%;
      left: 50%;
      transform: translate3d(-50%, -50%, 0);
  }
  .impress-step {
      width: 500px;
      border: solid 1px;
      text-align: center;
      cursor: pointer;
  }
  .impress-viewport.overview .impress-step:not(.active) {
      opacity: 0;
  }
  .impress-step.active {
      cursor: auto;
  }
</style>