ElementUI 为 DatePicker 日期选择器组件添加

当我们使用 ElementUI 构建表单页面的时候，经常需要使用到复合型输入框，可前置或后置元素，一般为标签或按钮，作为该输入框的说明性文字。

例如以下场景：

Input 组件提供了 prefix 、suffix、 prepend、 append 四种 Slot，这里我们可通过 slot 来指定在 input 中前置文字内容。

<el-input placeholder="" v-model="formData.deviceInfo"> 
  <template slot="prepend">设备名称</template>
</el-input>

但是 DatePicker 日期选择器组件并没有提供 Slot 来让我们添加同样的解释性文字，如果只是用 placeholder 说明，当选择日期后我们并不知道该区域是干什么的。

想达到 Input 组件同样的 UI 效果，好像只能自己想办法了。（有点疑惑，为什么日期组件官方没有提供前置和后置 Slot 插入内容的功能，这个场景还是很常见的）

从 UI 实现效果上可以看出，有点类似使用 button 和 datepicker 组件组合而成，我们不妨先写出页面标签代码看看效果

<div class="timepick-width-prepend">
  <el-button type="default" class="prepend-text">预估量产时间</el-button>
  <el-date-picker v-model="formData.planProductTime" type="date" placeholder="选择日期" value-format="yyyy-MM-dd"></el-date-picker>
</div>

在没有添加额外的样式是下面这样，好像离我们想要的最终的效果还是很远。

首先我们在外层 DIV 上使用 flex 布局让他们横向排列，垂直居中。让后给 button 添加上背景色。移除button 的 hover 效果。

至此大体上已经很接近我们想要的效果了，最后在细节上优化下，将他们重合处的圆角处理下，button 组件的右侧上下圆角值重置为0，datepicker 的左侧上下圆角值重置为0。

.timepick-width-prepend {
  display: flex;
  align-items: center;
  .prepend-text {
    background: #F5F7FA;
    color: #909399;
    border-right: none;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    cursor: default;

    :focus, :hover {
      border-color: #DCDFE6!important;
    }
  }
  .prepend-text:focus, .prepend-text:hover {
    border-color: #DCDFE6!important;
  }
  .el-input__inner {
    border-top-left-radius: 0!important;
    border-bottom-left-radius: 0!important;
  }
}

到此就实现了给 datepicker 组件增加前置说明文字。我们也可以将它封装成一个组件，供后面使用。