81 行
2.4 KiB
JavaScript
可执行文件
81 行
2.4 KiB
JavaScript
可执行文件
Vue.component("retail-drawer", {
|
|
template: `<div v-if="show" class="drawer-mask" :style="[modelZIndex]">
|
|
<div class="drawer-model" v-if="showModel" @click="closeDrawer"></div>
|
|
<div class="drawer-box" :class="show?'drawer-in':'drawer-on'" :style="[modelStyle]">
|
|
<p class="drawer-title">
|
|
<slot name="title">
|
|
<span>{{title}}</span>
|
|
<i class="el-icon-close drawer-close drawer-close-right" v-if="showClose&&closeType=='right'" @click="closeDrawer"></i>
|
|
<i class="el-icon-arrow-left drawer-close drawer-close-left" v-if="showClose&&closeType=='left'" @click="closeDrawer"></i>
|
|
</slot>
|
|
</p>
|
|
<div class="drawer-container-box">
|
|
<slot name="body"></slot>
|
|
</div>
|
|
</div>
|
|
</div>`,
|
|
props: {
|
|
'title': {
|
|
type: String,
|
|
default: '详情'
|
|
},
|
|
'show': {
|
|
type: Boolean,
|
|
},
|
|
'showModel': {
|
|
type: Boolean,
|
|
default: true,
|
|
},//是否显示遮罩层
|
|
'showClose': {
|
|
type: Boolean,
|
|
default: true,
|
|
},//是否显示关闭按钮
|
|
'width': {
|
|
type: String,
|
|
default: '40%',
|
|
},
|
|
'height': {
|
|
type: String,
|
|
default: 'calc(100vh - 65px)',
|
|
},
|
|
'minWidth': {
|
|
type: String,
|
|
default: '400px',
|
|
},
|
|
'minHeight': {
|
|
type: String,
|
|
default: '300px',
|
|
},
|
|
"zIndex": {
|
|
type: Number,
|
|
default: 10000000000,
|
|
},
|
|
'closeType':{
|
|
type: String,
|
|
default: 'right',
|
|
}
|
|
|
|
},
|
|
computed: {
|
|
modelStyle() {
|
|
return {
|
|
'width': this.width,
|
|
'height': this.height,
|
|
'min-width': this.minWidth,
|
|
'min-height': this.minHeight,
|
|
}
|
|
},
|
|
modelZIndex() {
|
|
return {
|
|
'z-index': this.zIndex
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
//关闭
|
|
closeDrawer() {
|
|
this.$emit('update:show', false);
|
|
this.$emit('close');
|
|
},
|
|
}
|
|
}); |