TextField v-on 动作在附加图标上激活答案

【问题标题】：TextField v-on action activate on append-iconTextField v-on 动作在附加图标上激活
【发布时间】：2020-09-08 04:26:26
【问题描述】：

我想通过按图标按钮（附加图标）来显示日历。下面的代码缺少什么？

                  <v-menu
                    v-model="menu"
                    :close-on-content-click="false"
                    transition="slide-y-transition"
                    offset-y
                  >
                    <template v-slot:activator="{ on }">
                      <v-text-field
                        v-on="on"
                        v-model="test.data"
                        @click.append="on" <!--I want like this-->
                        :append-icon="'mdi-map-marker-off'">
                      </v-text-field>
                    </template>
                    <v-date-picker
                      v-on:dateChanged="getDate"
                      v-model="calendar">
                    </v-date-picker>
                  </v-menu>

【问题讨论】：

我想你正在寻找@click:append
@David 感谢您的回复。我知道@click:append，但我真的不知道@click:append 操作如何显示或隐藏v-data-picker？

标签： javascript vue.js vuetify.js

【解决方案1】：

使用您要调用的方法添加@click.append。

                 <template v-slot:activator="{ on }">
                  <v-text-field
                    v-on="on"
                    v-model="test.data"
                    @click.append="method"
                    :append-icon="'mdi-map-marker-off'">
                  </v-text-field>
                </template>

【讨论】：

【解决方案2】：

您可能正在寻找类似的东西。

在你的 Vue 组件中：

<template>
 <div id="app">
  <v-app id="inspire">
    <v-row>
      <v-col cols="12" sm="6" md="4">
        <v-menu
          ref="menu"
          v-model="menu"
          :close-on-content-click="false"
          :return-value.sync="date"
          transition="scale-transition"
          offset-y
          min-width="290px"
        >
          <template v-slot:activator="{ on }">
            <v-text-field
              v-model="date"
              label="Picker in menu"
              prepend-icon="event"
              readonly
              v-on="on"
            ></v-text-field>
          </template>
          <v-date-picker v-model="date" no-title scrollable>
            <v-spacer></v-spacer>
            <v-btn text color="primary" @click="menu = false">Cancel</v-btn>
            <v-btn text color="primary" @click="$refs.menu.save(date)">OK</v-btn>
          </v-date-picker>
        </v-menu>
      </v-col>

    </v-row>
  </v-app>
 </div>
</template>

在你的<script>

data: () => ({
    date: new Date().toISOString().substr(0, 10),
    menu: false
  }),

【讨论】：

【解决方案3】：

此代码正在运行：

<v-menu
                
                v-model="expStart"
                :close-on-content-click="false"
                offset-y
                outlined
                dense
                min-width="290px"
              >
                <template v-slot:activator="{ on, attrs }">
                  <v-text-field
                    :label="dialogFormField.label"
                    prepend-icon="mdi-calendar"
                    **v-on:click:prepend="expStart=true"**
                    readonly
                    v-bind="attrs"
                    v-on="on"
                    outlined
                    dense
                    
                  ></v-text-field>
                </template>

【讨论】：

【解决方案4】：

对于仍在寻找答案的任何人，您可以使用 @click:append="on.click" on v-text-field 在单击附加图标时打开日期选择器。

例如：

<v-menu>
  <template #activator="{ on }">
    <v-text-field
      @click:append="on.click" 
      append-icon="mdi-calendar-month" 
      label="Date" 
      readonly 
      v-model="formattedDate"
      v-on="on"
    ></v-text-field>
  </template>
  <v-date-picker 
    v-model="date"
  ></v-date-picker>
</v-menu>

【讨论】：