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;

}

}