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 抽屉的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： java求两点坐标间的距离
- 下一篇： html5倒计时秒杀怎么做,vue 设