A simple library of Slide-Out component for Vue3
There are following steps to use a slide-out component for Vue3
Dependencies
- Vue.js 3.x
- Less
Install
NodeJS ENV (commonjs)
npm i @hyjiacan/vue-slideout@3
or
yarn add @hyjiacan/vue-slideout@3
The newest version
<script src="https://cdn.jsdelivr.net/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.net/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. Also, you can use the uncompressed dist 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 default props here })
In Component
<template> <slideout @closing="onClosing" v-model="visible" title="The title"> <div>content</div> </slideout> </template> <script> import Slideout from '@hyjiacan/vue-slideout' import '@hyjiacan/vue-slideout/lib/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) } } } </script>