隐藏 el-date-picker input 并通过按钮调用显示选择面板

日期选择器隐藏输入框与显示逻辑

在Vue组件中使用了Element UI的日期选择器组件(<el-date-picker>)，并隐藏了其输入框,通过点击事件展示日期选择面板，具体的代码如下：

<el-date-picker
  v-model="issueDate"
  type="date"
  :picker-options="pickerOptions"
  ref="tiemPick"
  class="time-pick"
/>
<span class="selected-time" title="选择时间" @click="selectedTime">{{` ${dayjs(isEditIssueDate? issueDate : new Date()).format('YYYY年MM月DD日')}印发`}}</span>

在按钮的点击事件selectedTime()中，通过ref属性获取日期选择器实例，并使用focus()方法显示选择日期框。

selectedTime() {
  if (this.$refs.tiemPick) this.$refs.tiemPick.focus()
}

样式调整

此外，进行了一些样式的调整，将日期选择框的位置设置为绝对定位，并通过z-index进行层级调整。具体的样式代码如下：

.send-box {
  position: relative;
  margin: 0 auto;
  width: 715px;
  border-bottom: 2px solid black;

  .time-pick {
    position: absolute;
    right: 170px;
    bottom: 90px;
    z-index: -1;
  }
}