【问题标题】: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>
    

    在你的&lt;script&gt;

    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>
        

        【讨论】:

          猜你喜欢
          • 1970-01-01
          • 1970-01-01
          • 2016-11-29
          • 1970-01-01
          • 2021-01-05
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          相关资源
          最近更新 更多