Vue2.x 侧滑组件 vue-slideout

MIT
JavaScript 查看源码»
跨平台
2019-03-07
hyjiacan

vue-slideout 

这是一个用于 Vue2.x 的侧滑组件。支持从四个不同的方向滑出,支持自定义样式,支持关闭事件(可以阻止关闭/异步支持),支持 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/

顶部滑出

右侧滑出

底部滑出

左侧滑出

 

的码云指数为
超过 的项目
加载中

评论(0)

暂无评论

VUE侧滑组件 vue-slideout 2.1.7发布

vue-slideout 是一个 Vue.js 2.0 的侧滑组件,目标是减少弹出框(dialog)应用,以提升用户体验 使用示例见 https://hyjiacan.github.io/vue-slideout/ 修复 文档错误以及文档中的拼写错误 示例...

06/20 19:52

vue-slideout 2.0 发布了,新增 ESC 键关闭

这是一个用于 Vue2.x 的侧滑组件,以用代替传统的对话框功能。 支持从四个不同的方向滑出,支持自定义样式,支持关闭事件(可以阻止关闭/异步支持) 本次更新: 添加ESC快捷键关闭支持 添加锁...

03/19 16:42

没有更多内容

加载失败,请刷新页面

没有更多内容

暂无问答

35个最好用的Vue开源库

Vue.js Vue.js 是一个非常易用的渐进式 JavaScript 框架,用于构建用户界面。 1.Vue Dark Mode Vue.js 的一个极简主义的深色设计系统。它提供了基本组件,用于构建失眠者最喜欢的深色界面。 ...

04/27 10:54
125
0
vue笔记

添加devtools https://github.com/vuejs/vue-devtools#vue-devtools vue的computed属性 有缓存,methods属性没有缓存 vue实例中的data是属性 可以定义对象,Vue.component中的data是方法 需要...

2017/08/28 04:10
154
0
前端框架vue.js系列(9):Vue.extend、Vue.component与new Vue

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/zeping891103/article/details/78133622 vue构造、vue组件和vue实例这三个是不同的概念,它们的关系有点类似于...

2018/11/28 21:00
34
0
Vue 自动化表单相关资料

1.使用vue自动化表单 2.Vue可视化,Vue代码生成,Vue动态表单 3.前端表单进阶之路:通过 Vue.js 实现表单可配置化 4.使用Vue动态生成form表单 5.autoform-devtool 6.Vue.js实践:实现多条件筛...

2018/07/17 09:28
105
0
vue

vue

2018/04/23 00:16
25
0
关于Vue使用小结

VUE是什么? Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架,基于JavaScript,轻量,无依赖 Vue能做什么? 视图界面美化 Vue的使用步骤 入门 1.安装vue --这里提前安...

07/29 22:35
8
0
vue-cli3快速开始

vue-cli3快速开始 node 如没安装,详见<vue开发环境搭建(mac).md> webpack 安装webpack npm install webpack webpack-cli -g 查看版本 webpack -v vue-cli 安装vue-cli npm install vue-c...

02/27 08:56
31
0
让sublime text3支持Vue语法高亮显示

让sublime text3支持Vue语法高亮显示 1.准备语法高亮插件vue-syntax-highlight。 下载地址: https://github.com/vuejs/vue-syntax-highlight 下载页面并下载: 解开压缩包vue-syntax-highli...

2018/06/27 14:45
43
0
2018年最新Mpvue Vue2 Vuex MintUi视频教程网盘分享

版权声明:转载请注明原创地址 https://blog.csdn.net/u013032788/article/details/82865215 百度网盘链接: https://pan.baidu.com/s/1W2d9vKrK5VMY5m4Kca9czA 提取码: 923t 更多网站源码资源...

2018年最新Mpvue Vue2 Vuex MintUi视频教程网盘分享

版权声明:转载请注明原创地址 https://blog.csdn.net/u013032788/article/details/82865215 百度网盘链接: https://pan.baidu.com/s/1W2d9vKrK5VMY5m4Kca9czA 提取码: 923t 更多网站源码资源...

没有更多内容

加载失败,请刷新页面

返回顶部
顶部