场景:在el-drawer打开后,里面的日期选择器el-date-picker自动弹出;
解决办法:
1、第一步:
el-date-picker 中 :disabled="drawerShow"
data(){
return { drawerShow:false }
}
2、第二步:
在el-drawer中@open=“handleOpenDrawer” @close=“handleCloseDrawer”
methods:{
handleOpenDrawer:{},
handleCloseDrawer:{}
}
关键代码:
<el-drawer
:visible.sync="drawer"
direction="rtl"
:with-header="false"
size="60%"
@open="handleOpenDrawer"
@close="handleCloseDrawer"
>
<el-form ref="form" :model="form" label-width="80px">
<el-form-item
label="日期:"
:label-width="formLabelWidth"
>
<el-date-picker
value-format="yyyy-MM-dd"
type="date"
placeholder="选择日期"
v-model="form.date"
style="width: 100%;"
:disabled="drawerShow"
></el-date-picker>
</el-form-item>
</el-form>
</el-drawer>
data(){
return {
form:{
date:""
},
drawerShow:false
}
},
methods:{
// 解决el-drawer打开,日期选择器随之打开的问题
handleOpenDrawer() {
this.$nextTick(() => {
this.drawerShow = false;
});
},
handleCloseDrawer() {
this.drawerShow = true;
},
}