当我们使用 ElementUI 构建表单页面的时候，经常需要使用到复合型输入框，可前置或后置元素，一般为标签或按钮，作为该输入框的说明性文字。
例如以下场景：
![G1{Q4[WW04~CB7$ZKY]9OCL.png](https://ucc.alicdn.com/pic/developer-ecology/fa508d89780f41de87912db85e08e28a.png?x-oss-process=image/resize,w_1400/format,webp "G1{Q4[WW04~CB7$ZKY]9OCL.png")
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 组件增加前置说明文字。我们也可以将它封装成一个组件，供后面使用。
