SlideOut

A Slide-Out component for Vue.js 2.0

Dependencies

• Vue.js 2.x
• Less

Install

NodeJS ENV (commonjs)

npm i @hyjiacan/vue-slideout

or

yarn add @hyjiacan/vue-slideout

You can get the latest code:

git clone https://github.com/hyjiacan/vue-slideout.git

or just download archive

Browser ENV (umd)

Since version 2.4.0

Unlike node env, a lowercase global slideout will be exploded.

The newest version

<script src="https://cdn.jsdelivr.com/npm/@hyjiacan/vue-slideout/lib/slideout.umd.min.js"></script>
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/@hyjiacan/vue-slideout/lib/slideout.css"
/>

Specified version

<script src="https://cdn.jsdelivr.com/npm/@hyjiacan/vue-slideout@<VERSION>/lib/slideout.umd.min.js"></script>
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/@hyjiacan/vue-slideout@<VERSION>/lib/slideout.css"
/>

unpkg is also available: instead cdn.jsdelivr.net with unpkg.com

And you can use the uncompressed by instead slideout.umd.min.js with slideout.umd.js

Usage

Global (recommended)

main.js

import Vue from 'vue'
import SlideOut from '@hyjiacan/vue-slideout'
import '@hyjiacan/vue-slideout/lib/slideout.css'

// import SlideOut component, and set the defaults props
Vue.use(SlideOut, {
  // set props here
})

In Component

Foobar.vue

<template>
  <div>
    <slide-out :visible.sync="isVisible" @close="onClose">
      <div #header="{title}"></div>
      <div>content</div>
    </slide-out>
  </div>
</template>
<script>
  import SlideOut from '@hyjiacan/vue-slideout'
  import '@hyjiacan/vue-slideout/lib/slideout.css'

  export default {
    name: 'Foobar',
    components: { SlideOut },
    data() {
      return {
        isVisible: false
      }
    },
    methods: {
      onClose(e) {
        // prevent close and wait
        e.wait = true
        // close after 3 seconds
        setTimeout(() => {
          // assign true to close, do nothing or assign false to cancel close.
          e.close = true
        }, 3000)
      }
    }
  }
</script>

After version 2.6.0, property :visible.sync="isVisible" can be instead with v-model="isVisible".

• For more usage, see https://hyjiacan.github.io/vue-slideout/
• API reference: API.md

Development

yarn
# start dev server
yarn serve
# Build library
yarn release