vue-slideoutVue2/3 的侧滑组件

联合创作 · 2023-09-19 18:17

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

仓库

依赖

  • 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/

顶部滑出

右侧滑出

底部滑出

左侧滑出

 

浏览 3
点赞
评论
收藏
分享

手机扫一扫分享

编辑 分享
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

编辑 分享
举报