在el-date-picker组件添加如下插槽,为日期选择器的每个日期下方添加小蓝点 .el-picker-panel__content div span{ width: 6px; height: 6px; border-radius: 50%; background-color: #409eff; position: absolute; top: 50%; } 但实际显示的效果,小蓝点影响到了整体的布局,并且显示在了日期的上方,现在想修改成我需要的样式,请给出代码示例
时间: 2024-02-16 15:04:42 浏览: 82
如果使用了插槽的方式来添加小蓝点,需要注意一些细节,比如插槽的位置和样式的设置。下面给出一种实现方式,可以参考一下:
```html
<template>
<el-date-picker v-model="date">
<template #default="{ date }">
<span class="date">{{ date }}</span>
<span class="dot"></span>
</template>
</el-date-picker>
</template>
<style>
.el-picker-panel__content div {
position: relative;
}
.dot {
width: 6px;
height: 6px;
border-radius: 50%;
background-color: #409eff;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, 50%);
}
</style>
```
在这个例子中,我们使用了插槽的方式来添加小蓝点。在模板中,我们将日期和小蓝点放在了一起,使用了 `position: relative` 的样式,以便让小蓝点相对于日期进行定位。在样式中,我们给每个日期单元格添加了 `position: relative` 的样式,以便让小蓝点相对于它进行定位。我们设置了小蓝点的样式,包括宽度、高度、圆角、背景颜色、定位等。其中,`top: 50%` 和 `left: 50%` 表示将小蓝点放在日期单元格的中心位置。`transform: translate(-50%, 50%)` 表示将小蓝点向上移动一半高度,以便让它显示在日期单元格的下方。
这样就可以在日期选择器的每个日期下方添加一个小蓝点了,且不影响组件原有布局格式。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)