vue抽屉_VUE组件 之 Drawer 抽屉
{{ title }}
X
props: {//是否打开
display: {
type: Boolean
},//标题
title: {
type: String,default: '标题'},//是否显示关闭按钮
closable: {
type: Boolean,default: true},//是否显示遮罩
mask: {
type: Boolean,default: true},//是否点击遮罩关闭
maskClosable: {
type: Boolean,default: true},//宽度
width: {
type: String,default: '400px'},//是否在父级元素中打开
inner: {
type: Boolean,default: false}
},
computed: {
maskClass:function() {return{'mask-show': (this.mask && this.display),'mask-hide': !(this.mask && this.display),'inner': this.inner
}
},
mainClass:function() {return{'main-show': this.display,'main-hide': !this.display,'inner': this.inner
}
},
mainStyle:function() {return{
width:this.width,
right:this.display ? '0' : `-${this.width}`,
borderLeft:this.mask ? 'none' : '1px solid #eee'}
}
},
mounted () {if (this.inner) {
let box= this.$el.parentNode
box.style.position= 'relative'}
},
methods: {
closeByMask () {this.maskClosable && this.$emit('update:display', false)
},
closeByButton () {this.$emit('update:display', false)
}
}
}
position: fixed;
top:0;
left:0;
width:100%;
height:100%;
z-index: 10;
background-color: rgba(0,0,0,.5);
opacity:1;
transition: opacity .5s;
}
.mask-hide {
opacity:0;
transition: opacity .5s;
}/*滑块*/.main {
position: fixed;
z-index: 10;
top:0;
height:100%;
background: #fff;
transition: all0.5s;
}
.main-show {
opacity:1;
}
.main-hide {
opacity:0;
}/*某个元素内部显示*/.inner {
position: absolute;
}/*其他样式*/.drawer-head {
display: flex;
justify-content: space-between;
height: 45px;
line-height: 45px;
padding:015px;
font-size: 14px;
font-weight: bold;
border-bottom: 1px solid #eee;
.close-btn {
display: inline-block;
cursor: pointer;
height:100%;
padding-left: 20px;
}
}
.drawer-body {
font-size: 14px;
padding: 15px;
}
}
vue抽屉_VUE组件 之 Drawer 抽屉相关推荐
- vue抽屉_VUE组件中的 Drawer 抽屉实现代码
因为项目中用的是 element-ui 框架,而这个框架并没有抽屉组件,所以自己实现一个,具体代码如下: drawer.vue {{ title }} x export default { props ...
- VUE组件 之 Drawer 抽屉
一.源码地址 https://github.com/imxiaoer/DrawerForVue 二.效果图 三.具体代码 drawer.vue <template><div clas ...
- 引用element-ui的Drawer抽屉组件报错问题
引用element-ui的Drawer抽屉组件报错问题 **前提:**vue项目采取按需引入的方式引入element,并且使用其他组件都正常,没有发生异常 问题表现: 在vue项目中引用了Drawer ...
- Flutter学习笔记(18)--Drawer抽屉组件
如需转载,请注明出处:Flutter学习笔记(18)--Drawer抽屉组件 Drawer(抽屉组件)可以实现类似抽屉拉出和推入的效果,可以从侧边栏拉出导航面板.通常Drawer是和ListView组 ...
- elementUI Drawer 抽屉打开时表单自动聚焦问题解决
问题:打开drawer弹窗后时间选择器自动聚焦. 解决:在时间选择器上添加disabled属性,打开drawer抽屉时先让选择器禁用disabled = true, 在页面渲染完成后再打开选择器的禁止 ...
- android抽屉风格,Android Navigation Drawer样式抽屉的使用
NavigationDrawer(导航抽屉)是一个从屏幕的左边缘过渡并且显示app的主要导航操作的面板. 显示Navigation Drawer 用户能够从屏幕左边缘滑动滑块或者点击app的Actio ...
- vue 实例化几种方式_Vue组件的三种调用方式
最近在写fj-service-system的时候,遇到了一些问题.那就是我有些组件,比如Dialog.Message这样的组件,是引入三方组件库,比如element-ui这样的,还是自己实现一个?虽然 ...
- vue设置标签自定义属性_Vue组件化开发之插槽
插槽为组件提供了强大的扩展能力.我们可以把电脑的主板理解为一个已经封装好的组件,主板上都会预留各种插槽,我们可以往插槽中插入内存条.显卡.声卡等设备.基于同样的思想,Vue在封装组件时,也可以预留插槽 ...
- vue 修改div宽度_Vue 组件通信方式及其应用场景总结(1.5W字)
前言 相信实际项目中用过vue的同学,一定对vue中父子组件之间的通信并不陌生,vue中采用良好的数据通讯方式,避免组件通信带来的困扰.今天笔者和大家一起分享vue父子组件之间的通信方式,优缺点,及其 ...
最新文章
- 白盒测试之语句分支条件覆盖
- [BZOJ]1503: [NOI2004]郁闷的出纳员
- Cpp 对象模型探索 / 虚基类表作用
- 12c闪回 oracle_Oracle12.1闪回功能
- javascript学习系列(20):数组中的bind,apply,call
- 用html设计一个logo页面_如何设计一个Logo?——Bobu Africa旅行品牌Logo设计
- Oracle/PLSQL AFTER DELETE Trigger
- Go 源码学习之--net/http
- [RK3399][Android7.1] DRM中的Component System
- atitit 课程表终生学习专业进修表从幼儿园到养老院 v2 r818.xlsx
- postgresql 修改字段长度
- Excel 函数基本应用
- 树莓派链接USB摄像头
- 为“烦人的“QuickTime播放器设置快进,快退以及加速播放快捷键!!!
- 怎样快速将方形图片剪裁成椭圆形?分享大家一个小妙招
- fanuc机器人负载设定
- 1024,一封写给CSDN家园Python初学者的信 | Python初级、中级、高级学习路线
- 如何看待程序员的薪资倒挂现象
- muduo源码剖析——Singleton单例模式之懒汉模式与DCL双重检查
- html去掉button的默认样式