阅读 401

ElementUI 为 DatePicker 日期选择器组件添加前缀说明文字

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

例如以下场景:

企业微信截图_20210812231004.png

Input 组件提供了 prefixsuffixprependappend 四种 Slot,这里我们可通过 slot 来指定在 input 中前置文字内容。

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

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

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

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

<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>
复制代码

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

企业微信截图_20210812233238.png

首先我们在外层 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 组件增加前置说明文字。我们也可以将它封装成一个组件,供后面使用。

文章分类
前端
文章标签