Question

我想进行自适应v-date-picker，即电话页面宽度然后在v-dialog中打开日期选择器，而台式机然后在v-menu中打开数据选择器。

这是我的尝试

<template>
  <div>
    <template v-if="$vuetify.breakpoint.xsOnly">
      <v-dialog
        ref="dialog"
        v-model="modal"
        persistent
        width="290px"
      >
        <template v-slot:activator="{ on }">
          <slot name="input" ref="input" v-on="on"/>
        </template>
        <slot name="picker" ref="picker"/>
      </v-dialog>
    </template>
    <template v-else>
      <v-menu
        ref="menu"
        v-model="menu"
        :close-on-content-click="false"
        transition="scale-transition"
        offset-y
        min-width="290px"
      >
        <template v-slot:activator="{ on }">
          <slot name="input" ref="input" v-on="on"/>
        </template>
        <slot name="picker" ref="picker"/>
      </v-menu>
    </template>
  </div>
</template>

<script>
    export default {
        name: "v-date",
        data() {
            return {
                menu: false,
                modal: false,
            }
        },
        methods: {
            close() {
                this.menu = false;
                this.modal = false;
            }
        }
    }
</script>

但是v-on不起作用。我尝试:listeners="on"，它也行不通...

例如使用组件：

<v-date>
  <template v-slot:input>
    <v-text-field
      label="Дедлайн"
      v-model="data.deadline"
      readonly
    />
  </template>
  <template v-slot:picker>
    <v-date-picker v-model="data.deadline" no-title scrollable>
      <v-spacer></v-spacer>
      <v-btn text color="primary" @click="$refs.deadline.close()">ОК</v-btn>
    </v-date-picker>
  </template>
</v-date>

Answer 1

感谢KrasnokutskiyEA的想法。

工作版本：

<template>
  <div>
    <template v-if="$vuetify.breakpoint.xsOnly">
      <v-dialog
        ref="dialog"
        v-model="modal"
        persistent
        width="290px"
      >
        <template v-slot:activator="{ on }">
          <slot name="input" ref="input" :on="on"/>
        </template>
        <slot name="picker" ref="picker"/>
      </v-dialog>
    </template>
    <template v-else>
      <v-menu
        ref="menu"
        v-model="menu"
        :close-on-content-click="false"
        transition="scale-transition"
        offset-y
        min-width="290px"
      >
        <template v-slot:activator="{ on }">
          <slot name="input" ref="input" :on="on"/>
        </template>
        <slot name="picker" ref="picker"/>
      </v-menu>
    </template>
  </div>
</template>

<script>
    export default {
        name: "v-date",
        data() {
            return {
                menu: false,
                modal: false,
            }
        },
        methods: {
            close() {
                this.menu = false;
                this.modal = false;
            }
        }
    }
</script>

使用：

<v-date>
  <template v-slot:input="{ on }">
    <v-text-field
      label="Дедлайн"
      v-model="data.deadline"
      readonly
      v-on="on"
    />
  </template>
  <template v-slot:picker>
    <v-date-picker v-model="data.deadline" no-title scrollable>
      <v-spacer></v-spacer>
      <v-btn text color="primary" @click="$refs.deadline.close()">ОК</v-btn>
    </v-date-picker>
  </template>
</v-date>

Vuetify：自适应v-日期选择器宽度v-对话框和v-菜单

1 个答案: