vue-slideout 正在参加 2020 年度 OSC 中国开源项目评选,请投票支持!
vue-slideout 在 2020 年度 OSC 中国开源项目评选 中已获得 {{ projectVoteCount }} 票,请投票支持!
投票让它出道
已投票
授权协议 MIT
操作系统 跨平台
软件类型 开源软件
所属分类 Web应用开发Vue 组件
开发厂商
地区 国产
提 交 者 hyjiacan
适用人群 未知
收录时间 2019-03-07

软件简介

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/

顶部滑出

右侧滑出

底部滑出

左侧滑出

 

展开阅读全文

代码

的 Gitee 指数为
超过 的项目

评论 (0)

加载中
更多评论
发表于大前端专区
2019/09/25 15:01

VUE 组件 vue-slideout 2.2.1 发布,添加固定大小与偏移支持

vue-slideout 是一个 Vue2.x 的侧滑组件。支持从四个不同的方向滑出,支持自定义样式,支持关闭事件(可以阻止关闭/异步支持),支持 ESC 键快捷关闭。 更新内容: 对组件做了一些功能优化 添加设置弹出固定大小支持 添加设置弹出固定大小时的偏移支持

1
15
发表于大前端专区
2019/06/20 19:52

VUE侧滑组件 vue-slideout 2.1.7发布

vue-slideout 是一个 Vue.js 2.0 的侧滑组件,目标是减少弹出框(dialog)应用,以提升用户体验 使用示例见 https://hyjiacan.github.io/vue-slideout/ 修复 文档错误以及文档中的拼写错误 示例页面的多语言问题 按任意键都会关闭slide的问题 添加 中文文档 示例页支持自动语言显示 头部支持自定义按钮 slot 全屏支持 固定...

3
38
发表于大前端专区
2019/03/19 16:42

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

这是一个用于 Vue2.x 的侧滑组件,以用代替传统的对话框功能。 支持从四个不同的方向滑出,支持自定义样式,支持关闭事件(可以阻止关闭/异步支持) 本次更新: 添加ESC快捷键关闭支持 添加锁定页面滚动支持 添加 .d.ts 文件 重命名属性 resize 为 allowResize 示例在 https://hyjiacan.github.io/vue-slideout/ 仓库在 ...

4
22
没有更多内容
加载失败,请刷新页面
点击加载更多
加载中
下一页
发表了博客
2019/06/23 21:29

[Vue] : Vue概述

什么是Vue.js Vue.js 是目前最火的一个前端框架,React是最流行的一个前端框架。 Vue.js 是前端的主流框架之一,和Angular.js、React.js 一起,并成为前端三大主流框架! Vue.js 是一套构建用户界面的框架,只关注视图层,它不仅易于上手,还便于与第三方库或既有项目整合。 Vue 核心的概念,就是让用户不再操作DOM元素,...

0
1
11/19 00:00

VUE|Vue实例

欢迎点击「算法与编程之美」↑关注我们! 本文首发于微信公众号:"算法与编程之美",欢迎关注,及时了解更多此系列文章。 欢迎加入团队圈子!与作者面对面!直接点击! 1.创建一个Vue实例 之前初步学习了Vue的安装...

0
0
发表了博客
2018/04/27 14:00

Vue--vue-Router

一.vue路由的基本使用 为什么需要路由? 因为我们通过component切换组件无法给组件传递参数 component切换组件 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" con...

0
1
发表了博客
2019/04/04 11:41

vue -- vue实例

一、vue实例 let app = new Vue({ // 对象属性 ]) 二、对象属性 1、el 就是父DOM 2、data 所有vue上面操作的数据都会被写在这里 3、methods 所有的函数方法都写在这里 methods: { getFun () { console.log(123) } } 4、components 用来注册子组件用 5、props 这个是子元素用来接收父元素传递数据的...

0
2
发表了博客
2018/08/18 17:12

[vue]vue路由篇vue-router

spa单页开发及vue-router基础: https://www.cnblogs.com/iiiiiher/p/9034496.html url两种传参方式 query: $route.query http://localhost:63342/login?name=maotai&age=22 params: $route.params http://localhost:63342/login/maotai/22 引入router组件后, vm里注册router,会在vm实例上新增router属性 基础路由 匹配...

0
0
发表了博客
04/14 13:50

Vue - Vue-CLI2 和 Vue-CLI3、Vue-CLI4的区别

周末在家新建了一个 Vue 测试项目,但不管怎么建,总会提示一些 有的没的,杂七杂八的信息,如:找不到 funding、存在多少漏洞(vulnerabilities) 什么的。如下所示: 寻思着,出现这些问题的原因,应该是一些 不太重要的依赖包 更新了版本 或 迁移了地址,导致之前的 Vue-CLI 找不到 对应的版本 或 依赖包地址了。 虽然暂...

0
0
05/07 17:32

vue开发之vue-cli2与vue-cli3的对比

项目目录结构  可以明显的看出来,vue-cli2.0与3.0在目录结构方面有明显的不同:  1. vue-cli3移除了配置文件目录:config 和 build 文件夹,增加了vue.config.js文件  2. vue-cli3移除了 static 静态文件夹 ...

0
0
发表了博客
2019/05/28 14:35

vue-bluJavascript - Vue - 插件(swiper、vue-preview)

swiper swiper是一个支持滑动效果的js插件,它也支持在vue中使用,主要用于移动端的触摸滑动操作。Swiper中文网。 安装和导入插件 npm i vue-awesome-swiper - S //在main.js中导入swiper import Vue from "vue" import VueAwesomeSwiper from 'vue-awesome-swiper' import "swiper/dist/css/swiper.min.css" Vue.use(Vu...

0
1
发表了博客
2018/08/03 11:44

vue.js 的插件 vue-resource

vue-resource Vue.js是数据驱动的,这使得我们并不需要直接操作DOM,如果我们不需要使用jQuery的DOM选择器,就没有必要引入jQuery。vue-resource是Vue.js的一款插件,它可以通过XMLHttpRequest或JSONP发起请求并处理响应。也就是说,$.ajax能做的事情,vue-resource插件一样也能做到,而且vue-resource的API更为简洁。另...

0
0
发表了博客
08/22 00:00

VUE|Vue实例

欢迎点击「算法与编程之美」↑关注我们! 本文首发于微信公众号:"算法与编程之美",欢迎关注,及时了解更多此系列文章。 欢迎加入团队圈子!与作者面对面!直接点击! 1.创建一个Vue实例 之前初步学习了Vue的安装...

0
0
没有更多内容
加载失败,请刷新页面
点击加载更多
加载中
下一页
暂无内容
0 评论
28 收藏
分享
返回顶部
顶部