Bootstrap 5 input group如何实现日期选择器整个输入组可点击

实现方案 #

你可以通过绑定外层容器点击事件+样式调整两步实现需求：

1. 拓展点击触发范围

给整个input-group外层容器绑定点击事件，直接调用vue-datetime组件暴露的open()实例方法即可，无需单独给每个按钮/输入框绑定事件：

<template>
  <div class="input-group" @click="$refs.myDatetime.open()">
    <!-- 左侧按钮 -->
    <button class="btn btn-outline-secondary" type="button">
      日历
    </button>
    <!-- 日期选择组件，绑定ref方便调用实例方法 -->
    <datetime 
      ref="myDatetime" 
      v-model="selectedDate"
      class="form-control p-0"
    ></datetime>
    <!-- 右侧按钮，若有独立功能比如清除，加.stop阻止冒泡即可 -->
    <button 
      class="btn btn-outline-secondary" 
      type="button"
      @click.stop="selectedDate = null"
    >
      清除
    </button>
  </div>
</template>

2. 隐藏输入框内部边框

添加以下全局/组件样式即可，同时可以给整个输入组加手型光标提升交互体验：

/* 隐藏datetime组件内置输入框的默认边框和选中高亮 */
.vdatetime-input {
  border: none !important;
  box-shadow: none !important;
  height: 100%;
  padding: 0.375rem 0.75rem;
  width: 100%;
}
/* 移除input-group内按钮和输入框衔接处的重复边框 */
.input-group .btn {
  border-left: 0;
  border-right: 0;
}
/* 整个输入组 hover 显示手型光标 */
.input-group {
  cursor: pointer;
}

如果发现点击事件有重复触发的问题，可以给外层点击事件加.self修饰符，仅点击input-group本身时触发：

<div class="input-group" @click.self="$refs.myDatetime.open()">

内容的提问来源于stack exchange，提问作者redshift