A Slide-Out component for Vue.js 2.0
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
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
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
})
Foobar.vue
<slide-out @close="onClose">
<div slot="header" slot-scope="{title}">
</div>
content
</slide-out>
<script>
import SlideOut from '@hyjiacan/vue-slideout'
import '@hyjiacan/vue-slideout/lib/slideout.css'
export default {
name: 'Foobar',
components: {SlideOut},
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>
yarn
# start dev server
yarn serve
# Build library
yarn release
Author: hyjiacan
Live Demo: https://hyjiacan.github.io/vue-slideout/
GitHub: https://github.com/hyjiacan/vue-slideout
#vuejs #javascript #vue-js #vue