vue-slideoutVue2/3 的侧滑组件

vue-slideout 是一个用于 Vue2/3 的侧滑组件。支持从四个不同的方向滑出，支持自定义样式，支持关闭事件（可以阻止关闭/异步支持），支持 ESC 键快捷关闭

仓库

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

依赖

• Less
• Vue2
• v-scroll-lock

安装与使用

安装

npm i @hyjiacan/vue-slideout --save

使用

 For Vue2.6

For Vue2.x

import SlideOut from '@hyjiacan/vue-slideout'

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)
        }
    }
}

更多演示见 https://hyjiacan.github.io/vue-slideout/

顶部滑出

右侧滑出

底部滑出

左侧滑出