Javascript 日历事件中的按钮-Vue JS
我正在使用Vuetify的日历组件。我需要在一个日历事件中显示和隐藏一些信息，只需点击位于同一事件中的按钮。我可以显示或隐藏div，但它适用于所有日历事件，而不仅仅是单击按钮旁边的事件。有人能帮我吗 添加下面的代码-Javascript 日历事件中的按钮-Vue JS,javascript,vue.js,vuetify.js,Javascript,Vue.js,Vuetify.js,我正在使用Vuetify的日历组件。我需要在一个日历事件中显示和隐藏一些信息，只需点击位于同一事件中的按钮。我可以显示或隐藏div，但它适用于所有日历事件，而不仅仅是单击按钮旁边的事件。有人能帮我吗 添加下面的代码- <v-calendar ref="calendar" v-model="focus" color="primary"
<v-calendar
ref="calendar"
v-model="focus"
color="primary"
:events="events"
:event-color="getEventColor"
:type="type"
first-interval="6"
interval-height="72"
@click:more="viewDay"
@click:date="viewDay"
@change="updateRange"
>
<template v-slot:event="{ event }">
<div>
<div
class="ml-8 mr-12 mt-5 pb-2"
style="border-bottom: 1px solid #0063a7; display: flow-root"
>
<div style="float: left">
<div class="mr-4" style="float: left">
<v-btn
id="btn-open"
text
icon
color="#0063A7"
v-on:click="ShowDetails()"
><v-icon large>mdi-menu-down</v-icon></v-btn
>
<v-btn
id="btn-close"
text
icon
color="#0063A7"
style="display: none"
><v-icon large>mdi-menu-up</v-icon></v-btn
>
</div>
<div>
<p class="event-header-time">
{{ event.time }}
</p>
<p class="event-header-name" style="font-weight: bold">
{{ event.name }}
</p>
</div>
</div>
<div style="float: right">
<v-btn class="event-header-btn" text
>Begin Inventory<v-icon class="pl-5"
>mdi-arrow-right</v-icon
></v-btn
>
</div>
</div>
<div v-show="selectedOpen" id="div-event-data">
<p>test</p>
</div>
</div>
</template>
</v-calendar>
export default {
name: "calender",
data: () => ({
focus: "",
type: "day",
typeToLabel: {
month: "Month",
week: "Week",
day: "Day",
"4day": "4 Days",
},
selectedEvent: {},
selectedElement: null,
selectedOpen: false,
events: [
{
time: "10:00 - 11:30",
name: "Pharmacy B | SUNS008",
start: "2021-05-13 10:00:00",
end: "2021-05-13 11:30:00",
color: "cyan",
},
{
name: "test",
start: "2021-05-14 07:00:00",
end: "2021-05-14 07:25:00",
color: "green",
},
{
name: "test",
start: "2021-05-16 08:00:00",
end: "2021-05-16 08:15:00",
color: "red",
},
{
time: "8:00 AM - 9:00 AM",
name: "Pharmacy B | SUNS008",
start: "2021-05-23 08:00:00",
end: "2021-05-23 11:00:00",
color: "#E8F4FE",
selectedOpen: false,
},
{
name: "test",
start: "2021-05-23 13:00:00",
end: "2021-05-23 15:00:00",
color: "#E8F4FE",
},
{
name: "test",
start: "2021-05-23 18:00:00",
end: "2021-05-23 19:15:00",
color: "#E8F4FE",
},
],
colors: [
"blue",
"indigo",
"deep-purple",
"cyan",
"green",
"orange",
"grey darken-1",
],
names: [
"<h1>Meeting</h1>",
"Holiday",
"PTO",
"Travel",
"Event",
"Birthday",
"Conference",
"Party",
],
}),
mounted() {
this.$refs.calendar.checkChange();
},
methods: {
viewDay({ date }) {
this.focus = date;
this.type = "day";
},
getEventColor(event) {
return event.color;
},
setToday() {
this.focus = "";
},
prev() {
this.$refs.calendar.prev();
},
next() {
this.$refs.calendar.next();
},
ShowDetails(event) {
const open = () => {
this.selectedEvent = event;
this.selectedElement = event.target;
this.selectedOpen = true;
};
if (this.selectedOpen) {
this.selectedOpen = false;
} else {
open();
}
//nativeEvent.stopPropagation();
},
updateRange() {},
rnd(a, b) {
return Math.floor((b - a + 1) * Math.random()) + a;
},
},
};
mdi菜单关闭
mdi菜单打开
{{event.time}
{{event.name}
开始清单MDI向右箭头
试验
导出默认值{
名称：“日历”，
数据：（）=>({
焦点：“，
键入：“日”，
类型标签：{
月：“月”，
周：“周”，
日：“日”，
“4天”：“4天”，
},
已选择事件：{}，
selectedElement:null，
selectedOpen:false，
活动：[
{
时间：“10:00-11:30”，
名称：“药房B|SUNS008”，
开始：“2021-05-13 10:00:00”，
完：“2021-05-13 11:30:00”，
颜色：“青色”，
},
{
名称：“测试”，
开始：“2021-05-1407:00:00”，
完：“2021-05-1407:25:00”，
颜色：“绿色”，
},
{
名称：“测试”，
开始：“2021-05-16 08:00:00”，
完：“2021-05-16 08:15:00”，
颜色：“红色”，
},
{
时间：“上午8:00-9:00”，
名称：“药房B|SUNS008”，
开始：“2021-05-23 08:00:00”，
完：“2021-05-23 11:00:00”，
颜色：“E8F4FE”，
selectedOpen:false，
},
{
名称：“测试”，
开始：“2021-05-23 13:00:00”，
完：“2021-05-23 15:00:00”，
颜色：“E8F4FE”，
},
{
名称：“测试”，
开始：“2021-05-2318:00:00”，
完：“2021-05-2319:15:00”，
颜色：“E8F4FE”，
},
],
颜色：[
“蓝色”，
“靛蓝”，
“深紫色”，
“青色”，
“绿色”，
“橙色”，
“灰色变暗-1”，
],
姓名：[
“会议”，
“假日”，
“PTO”，
“旅行”，
“活动”，
“生日”，
“会议”，
“党”，
],
}),
安装的（）{
这是.$refs.calendar.checkChange（）；
},
方法：{
viewDay（{date}）{
this.focus=日期；
this.type=“day”；
},
getEventColor（事件）{
返回event.color；
},
setToday（）{
此参数为“focus=”；
},
prev（）{
这是。$refs.calendar.prev（）；
},
下一个（）{
此.$refs.calendar.next（）；
},
展览详情（活动）{
常量打开=（）=>{
this.selectedEvent=事件；
this.selectedElement=event.target；
this.selectedOpen=true；
};
如果（此。选择打开）{
this.selectedOpen=false；
}否则{
open（）；
}
//nativeEvent.stopPropagation（）；
},
updateRange（）{}，
rnd（a、b）{
返回Math.floor（（b-a+1）*Math.random（））+a；
},
},
};
扩展的新属性。然后使用@click=“showDetails（）”
而不是@click=“event.expanded=！event.expanded”
然后，将有条件呈现的DIV放入事件模板中，并使用…
请共享一些代码，否则我们将无能为力you@niccord-我已经添加了HTML和脚本。请查收