vue.js - h5 mint-ui 手机页面 用了 Datetime picker组件，怎么在头部中间位置加上‘选择日期’文案？？

Question

<mt-datetime-picker    ref="datetimePicker"    v-model="date"    type="date"    @confirm="dateConfirmed"    @cancel="dateCancel"></mt-datetime-picker>

Answer 1

使用伪元素加下就行了

.picker-toolbar:before {    content: '选择日期';    position: absolute;    left: 50%;    top: 10px;    transform: translate(-50%);    color: red;}

Answer 2

要实现在 Mint-UI 的 Datetime Picker 组件的头部中间位置添加“选择日期”文案，你可以通过 CSS 来控制组件的样式。

首先，你需要找到 Datetime Picker 组件的类名。然后，你可以使用 CSS 的定位属性将它设置在中间位置。以下是一种可能的方法：

1. 使用定位属性（Positioning）：

你可以使用 CSS 的 position 属性以及 top 和 left 属性来将文案居中。首先，你需要找到 Datetime Picker 组件的类名。一般来说，你可以通过审查元素或者在浏览器的开发者工具中查看元素的类名。然后，你可以在 CSS 中添加以下样式：

/* 假设你的 Datetime Picker 的类名是 `.mt-datetime-picker` */.mt-datetime-picker .date-picker-header {    position: absolute;    top: 50%;    left: 50%;    transform: translate(-50%, -50%);    text-align: center;    font-size: 24px;    font-weight: bold;}

然后，你需要在 HTML 中添加文案元素：

<mt-datetime-picker    ref="datetimePicker"    v-model="date"    type="date"    @confirm="dateConfirmed"    @cancel="dateCancel">    <div class="date-picker-header">选择日期</div></mt-datetime-picker>

注意：这个解决方案假设 Datetime Picker 组件有一个 .date-picker-header 的类来包含文案。实际情况可能会有所不同，所以你可能需要调整 CSS 选择器或者样式来适应你的具体情况。