Javascript Vue动态添加详细内容行的方法

我正在制作一个Vue日历。单击某一天时，我希望在所选日期的下一周打开一个全宽框，其中显示当天的详细信息（想想Google Images layout）。我知道如何在Vue中传递数据，但如何将此详细信息（组件、视图？）添加到当前周的行下？（见我的

---

因为你没有行的概念（你只是自动换行），所以你不能真正插入一个占据一行的框。我在这里做的是插入一个div，它的位置是

绝对的
ly，这样我可以使它全宽，但它覆盖了下面的行，而不是将它们移开

如果将其返工为有周，则可以在周之间插入详细信息框

不过，最基本的工作是，在单击日期时为当前选定的日期设置一个数据项，然后清除该项以关闭“详细信息”框（此处单击“详细信息”框即可）。HTML由
v-if
控制


newvue({
el:'日历'，
数据：{
今天：时刻（），
dateContext:moment（），
天数：['S'，'M'，'T'，'W'，'T'，'F'，'S']，
selectedDate:空
},
方法：{
下个月：函数（）{
var t=这个；
t、 dateContext=时刻（t.dateContext）.add（1，'month'）；
},
上月：函数（）{
var t=这个；
t、 dateContext=时刻（t.dateContext）。减去（1，'月'）；
},
开放日（日期）{
this.selectedDate=日期；
},
解雇{
this.selectedDate=null；
}
},
计算：{
年份：职能（）{
var t=这个；
返回t.dateContext.format（'YYYY'）；
},
月份：函数（）{
var t=这个；
返回t.dateContext.format（'MMMM'）；
},
daysInMonth:function（）{
var t=这个；
返回t.dateContext.daysInMonth（）；
},
currentDate:函数（）{
var t=这个；
返回t.dateContext.get（'date'）；
},
每月第一天：函数（）{
var t=这个；
var firstDay=时刻（t.dateContext）。减去（（t.currentDate-1），“天”）；
返回第一天。工作日（）；
},
//上一代码
initialDate:function（）{
var t=这个；
返回t.today.get（'date'）；
},
initialMonth:function（）{
var t=这个；
返回t.today.format（'MMMM'）；
},
initialYear:function（）{
var t=这个；
返回t.today.format（'YYYY'）；
}
}
})
*，
*：之前，
*：之后{
-moz框大小：边框框；
-webkit框大小：边框框；
框大小：边框框；
}
身体{
字号：1.5em；
字号：100；
颜色：rgba（255，255，255，1）；
背景：#22222；
}
.日历{
变换：translate3d（0,0,0）；
宽度：100vw；
}
.标题{
显示器：flex；
填充：0.1em；
证明内容：之间的空间；
对齐项目：居中；
宽度：100%；
背景色：#333；
}
.淡入{
/*溢出：隐藏*/
不透明度：0；
}
。淡入激活状态{
动画：fadeIn 1s放松；
不透明度：1；
}
.下个月{
动画：从顶部移动FadeMonth.4s放松；
不透明度：1；
}
.下个月{
动画：moveToTopFadeMonth.4s轻松进入；
不透明度：1；
}
上个月{
动画：moveFromBottomFadeMonth.4s放松；
不透明度：1；
}
.month.out.prev{
动画：moveToBottomFadeMonth.4s轻松进入；
不透明度：1；
}
.日期{
显示器：flex；
柔性包装：包装；
}
.天{
宽度：14%；
填充：1em；
文本对齐：居中；
光标：指针；
}
陶氏{
宽度：14%；
文本对齐：居中；
填充：1em；
颜色：青绿色；
字体大小：粗体；
}
.细节小组{
宽度：100vw；
背景色：暗色；
颜色：白色；
高度：10雷姆；
位置：绝对位置；
左：0；
}
.今天{
颜色：青绿色；
字体大小：粗体；
}
.日名{
字号：1em；
文本转换：大写；
边缘底部：5px；
颜色：rgba（255、255、255、.5）；
字母间距：.7px；
}
.日数{
字体大小：24px；
字母间距：1.5px；
}

雪佛龙上个月离开了
{{月}{{年}

雪佛龙右下个月

{{dow}


{{date}}
你好，我看到你选择了{{date}


我接受了您的建议，现在正在为
周添加功能，因为我认为这将允许最佳显示。谢谢！您有推荐的选择周的方法吗？在纯JS中，我可能会做一些事情，例如获取第一个选择器
周
。是否有更多的Vue方法可以做到这一点？您的数据应该按周组织，因此，您应该能够执行类似于
v-if=“week.includes（selectedDate）”
<div class="calendar">
        <div class="header z-depth-2">
            <a @click="lastMonth" class="waves-effect waves-light btn"><i class="material-icons left">chevron_left</i>Last Month</a>
            <p>{{month}} {{year}}</p>
            <a @click="nextMonth" class="waves-effect waves-light btn"><i class="material-icons right">chevron_right</i>Next Month</a>
        </div>
        <ul class="dates month">
                    <li class="dow" v-for="dow in days">{{dow}}</li>
            <li v-for="blank in firstDayOfMonth" class="day"></li>
            <li v-for="date in daysInMonth" @click="openday(date)"
                class="day" :class="{'today': date == initialDate && month == initialMonth && year == initialYear}">
                <span>{{date}}</span>
            </li>
        </ul>
    </div>

new Vue({
    el: '.calendar',
    data: {
        today: moment(),
    dateContext: moment(),
    days: ['S', 'M', 'T', 'W', 'T', 'F', 'S']
    },
    methods:{
        nextMonth: function () {
        var t = this;
        t.dateContext = moment(t.dateContext).add(1, 'month');
    },
    lastMonth: function () {
        var t = this;
        t.dateContext = moment(t.dateContext).subtract(1, 'month');
    }
    },
    computed: {
        year: function () {
        var t = this;
        return t.dateContext.format('YYYY');
    },
    month: function () {
        var t = this;
        return t.dateContext.format('MMMM');
    },
        daysInMonth: function () {
        var t = this;
        return t.dateContext.daysInMonth();
    },
    currentDate: function () {
        var t = this;
        return t.dateContext.get('date');
    },
    firstDayOfMonth: function () {
        var t = this;
        var firstDay = moment(t.dateContext).subtract((t.currentDate - 1), 'days');
        return firstDay.weekday();
    },
    //Previous Code Above
   initialDate: function () {
        var t = this;
        return t.today.get('date');
    },
    initialMonth: function () {
        var t = this;
        return t.today.format('MMMM');
    },
    initialYear: function () {
        var t = this;
        return t.today.format('YYYY');
    }
}
})