Vuetify:自适应v-日期-包装宽度v-对话框和v-菜单

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>