将输入焦点扩展到图标，以便可点击答案

【问题标题】：Extending input focus to icon so will be clickable将输入焦点扩展到图标，以便可点击
【发布时间】：2019-07-11 01:23:36
【问题描述】：

我有一个日期选择器组件 (v-date-picker)，我无法获取图标，这是一个与日期选择器分开的 Font Awesome Icon，用于打开焦点（即点击）日历，我尝试了此处描述的解决方案： How to increase the clickable area of a <a> tag button? 如果运气不好，这应该很简单，但根本不起作用。

<template>
    <div class="v-date-picker">
      <v-date-picker
        mode="single"
        :value="date"
        @input="emit"
        :placeholder="placeholder"
        popoverVisibility="focus"
        v-bind="$attrs"
        :max-date="maxDate"
        :min-date="minDate"
      >
      </v-date-picker>

      <font-awesome-icon v-bind="$attrs" :icon="['far','calendar']" />
    </div>
</template>
//skip all my code here....
<style lang="scss">
.v-date-picker {
    position:relative;
  input {
    height: 36px;
    display: block;
    border: 1px solid #f3f3f3;
    padding: 8px 12px;
    font-size: 14px;
    background: #f3f3f3;
    box-shadow: 0 0 0 #EAEAEA;
    width: 100%;
    transition: all .3s ease-in-out;
    border-radius: 4px;

    &:hover {
      border-color: #ddd;
      box-shadow: none;
    }

    &:focus {
      border-color: #ea7d1c;
      box-shadow: none;
    }
    }
}

  input::-webkit-input-placeholder { color: #ccc;}
  input::-webkit-input-placeholder { color: #ccc;}
  input::-moz-placeholder { color: #ccc;}
    input:-ms-input-placeholder { color: #ccc;}

.fa-calendar {
  position: absolute;
  right: 10px;
  top: 10px;
    font-size: 16px;
    color: #666;
}
.date-picker .vdp-datepicker__calendar .cell.selected,
.date-picker .vdp-datepicker__calendar .cell.selected.highlighted,
.date-picker .vdp-datepicker__calendar .cell.selected:hover {
    background: #ea7d1c;
        color: white;
}
.date-picker .vdp-datepicker__calendar .cell:not(.blank):not(.disabled).day:hover,
.date-picker .vdp-datepicker__calendar .cell:not(.blank):not(.disabled).month:hover,
.date-picker .vdp-datepicker__calendar .cell:not(.blank):not(.disabled).year:hover {
    border-color: #ea7d1c;
}
</style>

【问题讨论】：

如何将图标与日期选择器绑定？据我所知，一个人打开另一个人没有绑定
@NikosM。它不受日期选择器的约束，其想法是将日期选择器扩展到图标上，以便在单击图标时实际上是在单击日期选择器。我无法直接访问日期选择器代码，因为它是一个预先打包的组件。
我认为更好的解决方案是将图标与触发 datepicker 打开的可调用绑定，datepuicker 应该提供一个 API 以编程方式打开/关闭。这是更好的海事组织
问题是我无法访问触发功能，因为这是一个预制组件，请参见此处：github.com/nathanreyes/v-calendar

标签： css html vue.js sass

【解决方案1】：

将点击事件转发到日期选择器（我的按钮在这里代表）：

new Vue({
  el: '#app',
  methods: {
    forward(event) {
      const b = this.$refs.dp;

      b.dispatchEvent(new MouseEvent(event.type, event));
    },
    action() {
      alert('Date picker!');
    }
  }
});

button {
  margin-top: 4rem;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js">
</script>
<div id="app">
  <div @click="forward">Click me</div>
  <button ref="dp" @click="action">Not me</button>
</div>

【讨论】：