drawer文件管理php,VUE组件中的 Drawer 抽屉实现代码

因为项目中用的是 element-ui 框架，而这个框架并没有抽屉组件，所以自己实现一个，具体代码如下：

drawer.vue

{{ title }}

X

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 抽屉实现代码,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！