vue抽屉_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 抽屜實現代碼,希望對大家有所幫助
如您對本文有疑問或者有任何想說的，請點擊進行留言回復，萬千網友為您解惑！
總結
以上是生活随笔為你收集整理的vue抽屉_VUE组件中的 Drawer 抽屉实现代码的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 订单生产计划表范本_生产计划管理与物料控
- 下一篇： vue导入excel进度条_Vue 前端