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

A Slide-Out component for Vue.js 2/3.
https://github.com/hyjiacan/vue-slideout

slide vue3 vuejs2

Last synced: about 2 months ago
JSON representation

A Slide-Out component for Vue.js 2/3.

• Host: GitHub
• URL: https://github.com/hyjiacan/vue-slideout
• Owner: hyjiacan
• License: mit
• Created: 2019-03-01T08:45:47.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2023-12-08T09:28:42.000Z (10 months ago)
• Last Synced: 2024-07-19T11:47:38.011Z (3 months ago)
• Topics: slide, vue3, vuejs2
• Language: JavaScript
• Homepage: https://hyjiacan.github.io/vue-slideout/
• Size: 2.27 MB
• Stars: 100
• Watchers: 6
• Forks: 22
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Slideout

[![NPM](https://img.shields.io/npm/l/@hyjiacan/vue-slideout?style=flat-square)](https://github.com/hyjiacan/vue-slideout/blob/master/LICENSE)

[![Travis (.org)](https://img.shields.io/travis/hyjiacan/vue-slideout?style=flat-square)](https://www.travis-ci.org/hyjiacan/vue-slideout)

[![npm (scoped)](https://img.shields.io/npm/v/@hyjiacan/vue-slideout?style=flat-square)](https://www.npmjs.com/package/@hyjiacan/vue-slideout)

![npm bundle size (scoped)](https://img.shields.io/bundlephobia/min/@hyjiacan/vue-slideout?style=flat-square)

[![npm](https://img.shields.io/npm/dm/@hyjiacan/vue-slideout?style=flat-square)](https://npmcharts.com/compare/@hyjiacan/vue-slideout?minimal=true)

[![Coverage Status](https://coveralls.io/repos/github/hyjiacan/vue-slideout/badge.svg?branch=master)](https://coveralls.io/github/hyjiacan/vue-slideout?branch=master)

[![jsdelivr](https://data.jsdelivr.com/v1/package/npm/@hyjiacan/vue-slideout/badge)](https://www.jsdelivr.com/package/npm/@hyjiacan/vue-slideout)

A Slide-Out component for Vue3

## Dependencies

- Vue.js 3.x

- Less

## Install

### NodeJS ENV (commonjs)

```bash

npm i @hyjiacan/vue-slideout@3

```

or

```bash

yarn add @hyjiacan/vue-slideout@3

```

If you need compatible with Vue.js 2.x, use version `@hyjiacan/vue-slideout@2`.

You can get the latest code:

```bash

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

```

or just [download archive](https://github.com/hyjiacan/vue-slideout/archive/master.zip)

### Browser ENV (umd)

Like node-env, a global `Slideout` will be attached onto `window`.

The newest version

```html

```

Specified version

```html

```

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

>

> Also, you can use the uncompressed dist by instead *slideout.umd.min.js* with *slideout.umd.js*

## Usage

### Global (recommended)

*main.js*

```javascript

import Vue from 'vue'

import Slideout from '@hyjiacan/vue-slideout'

import '@hyjiacan/vue-slideout/dist/slideout.css'

// import Slideout component, and set the defaults props

Vue.use(Slideout, {

  // set default props here

})

```

### In Component

*Foobar.vue*

```html

  

    
content

  


import Slideout from '@hyjiacan/vue-slideout'

import '@hyjiacan/vue-slideout/dist/slideout.css'

export default {

  name: 'Foobar',

  components: { Slideout },

  data () {

    return {

      visible: false

    }

  },

  methods: {

    onClosing (e) {

      // prevent close and wait

      e.pause = true

      // close after 3 seconds

      setTimeout(() => {

        // assign true to close, do nothing or assign false to cancel close.

        e.resume = true

      }, 3000)

    }

  }

}

```

- For more usage, see https://hyjiacan.github.io/vue-slideout/

- API reference: [API.md](./API.md)

Try it on the fly [CodePen][codepen]

[codepen]: https://codepen.io/hyjiacan/pen/LYRZONE

## Development

```bash

yarn

# start dev server

yarn serve

# Build library

yarn release

```