vue-impress v0.0.7

vue-impress

Inspired by impress.js, thanks for it so much.

At the end of impress.js, the words use the source, Luke! really encouraged me! Thanks star wars too. I read the source with the power and made this vue component.

demo

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>

API

vue component

only one component impress-viewport

normally impress-viewport has no child but it can contain other component Check the ball example

Props

the config prop

When fullscreen is true, it means that there should be only one instance in current page. vue-impress will use config width and height and window innerWidth, innerHeight to compute scale. When fullscreen is false, the vue-impress parent element should has has a absolute or relative position, and has a explicit width and height

the object in steps array prop

Events

instance methods

element class, used for css style

Check the example and read the comment there

git clone git@github.com:superwf/vue-impress.git

cd vue-impress

yarn install

npm run dev

fullscreen example http://127.0.0.1:8080 multiple instance http://127.0.0.1:8080/multiple.html dna instance http://127.0.0.1:8080/dna.html ball instance http://127.0.0.1:8080/ball.html