Vuetify-向触发日期选择器的按钮添加工具提示

Question

我想在用于触发制图应用程序的日期选择器的v-btn中添加一个v-tooltip。在尝试集成工具提示之前，下面的代码可以正常工作。

    <v-menu ref="menu" v-model="menu"
      :close-on-content-click="true"
      :return-value.sync="date"
      transition="scale-transition"
      offset-y
      min-width="290px"
    >
      <template v-slot:activator="{ on }">
        <v-btn v-on="on"
          :style="{left: '50%', transform:'translateX(-50%)'}"
          light
          icon
        >
          <v-icon>mdi-pencil</v-icon>
        </v-btn>
      </template>
      <v-date-picker 
        v-model="date" 
        no-title 
        scrollable
        >
      </v-date-picker>
    </v-menu>

通过以上操作，我单击按钮，得到日期选择器，一切都很好。我尝试了多种不同的方法来添加v-tooltip，例如包装整个块，仅包装模板，仅包装按钮。无论我将工具提示代码放在何处，都会破坏整个设置，因为按钮不会显示或按钮的单击未得到处理。

按钮是工具提示的理想选择，无需单击即可显示其功能，这似乎是一件合理的事情。使用v-btn触发列表很容易，但是我发现很少有人使用按钮显示日期选择器的示例，尽管很多人都在网上询问有关它的问题。我希望有一种工具提示技术可以与从中启动的各种选择器一起使用。

有什么想法吗？

Answer 1

为您修复了该问题，请立即尝试：

演示：https://codepen.io/aQW5z9fe/pen/vYNdJwO?editors=1010

{1: ['', 1], 2: ['', 2], 3: ['', 2], 4: ['', 3], 5: ['', 4], 6: ['', 8], 7: ['', 20]}