Question

我有一个日期选择器组件（v-date-picker），但是我无法获得图标，这是一个与日期选择器分开的“真棒字体”图标，无法打开日历（即单击）。尝试了此处描述的解决方案： 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>

Answer 1

将click事件转发到日期选择器（此处是我的按钮所代表的位置）：

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>

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

1 个答案: