在vue2中使用el-date-picker组件,在日期选择器的每个日期下方添加一个小蓝点,要求不影响组件原有布局格式,请给出代码实例
时间: 2024-02-16 17:04:35 浏览: 72
一个Vue2的datetimepicker组件
可以使用伪元素 `::after` 来实现在日期选择器下方添加小蓝点。具体实现代码如下:
```css
.el-date-picker__editor-wrap td.available::after {
content: '';
display: block;
width: 6px;
height: 6px;
border-radius: 50%;
background-color: blue;
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%) translateY(100%);
}
```
其中 `.el-date-picker__editor-wrap td.available` 选择器表示日期选择器中可选的日期单元格,`::after` 伪元素用于添加小蓝点,`content` 属性为空,表示伪元素不需要添加任何内容。`display` 属性设置为 `block`,表示伪元素为块级元素,可以设置宽高。`width` 和 `height` 属性设置宽高为 6px,`border-radius` 属性设置为 50%,表示将伪元素设置为圆形。`background-color` 属性设置为蓝色。`position` 属性设置为绝对定位,`bottom` 属性设置为 0,表示伪元素在单元格底部,`left` 属性设置为 50%,表示伪元素在单元格水平居中,`transform` 属性用于微调伪元素位置,将其向下移动到单元格下方。
这样就可以在日期选择器的每个日期下方添加一个小蓝点了,且不影响组件原有布局格式。
阅读全文