{{ title }}
x
vue抽屉_VUE组件中的 Drawer 抽屉实现代码
刘瑞
因为项目中用的是 element-ui 框架，而这个框架并没有抽屉组件，所以自己实现一个，具体代码如下：
drawer.vue
export default {
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)
}
}
}
.drawer {
/* 遮罩 */
.mask-show {
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: all 0.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: 0 15px;
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;
}
}
组件具体使用如下：
打开抽屉
1. hello, world!
2. do you like it?
import drawer from '@/components/drawer/drawer'
export default {
components: { drawer },
data () {
return {
display: false,
drawerwidth: '500px'
}
}
}
总结
以上所述是小编给大家介绍的vue组件中的 drawer 抽屉实现代码,希望对大家有所帮助
如您对本文有疑问或者有任何想说的，请点击进行留言回复，万千网友为您解惑！
类似资料：