关于element-ui:elemenntUI-eldrawer组件中使用时间选择器自动弹出选择器下拉框的问题

51次阅读

共计 799 个字符,预计需要花费 2 分钟才能阅读完成。

问题:点击关上抽屉组件时,工夫选择器(或选择器类)下拉框会自动弹出,如图所示:

自己摸索了两个办法,先只上最简略暴力的方法!
解决办法:
1. 在选择器上加上 disabled 属性。

<el-drawer
   size="25%"
   class="car-drawer"
   :wrapperClosable="false"
   :visible="drawerVisible"
   :destroy-on-close="true"
   :append-to-body="true"
   :with-header="false"
   @open="handleOpenDrawer"
   @close="handleCloseDrawer"
 >
    <el-date-picker
       style="margin-right: 10px;"
       size="small"
       class="control-date-picker2"
       v-model="time"
       clearable
       :disabled="drawerShow"
       :editable="false"
       type="datetimerange"
       range-separator="至"
       start-placeholder="开始日期"
       end-placeholder="完结日期"
       value-format="yyyy-MM-dd HH:mm:ss"
       :default-time="['00:00:00','23:59:59']"
    ></el-date-picker>
</el-drawer>
data() {
  return {drawerShow: true};
},

2. 利用 open 事件解除禁用性能。

handleOpenDrawer() {this.$nextTick(() => {this.drawerShow = false;});
}

3. 敞开时应用 close 事件再重置禁用状态。

handleCloseDrawer() {this.drawerShow = true;},

正文完
 0