wap网站 手机网站网站登录界面设计

分不同版本，如果你是elementplus，也就是vue3版本，你就直接可用方案1；如果你是vue2版本（扒拉了一下源码，组间不支持），方案2、3都行，具体看自己需求。

1、‌使用:disable-minute和:disable-second属性‌

在el-date-picker组件中，可以通过:disable-minute和:disable-second属性来禁止选择分钟和秒。例如：

<el-date-picker v-model="value" type="datetime" :disable-minute="true" :disable-second="true"></el-date-picker>

这样设置后，用户将无法选择分钟和秒，只能选择小时‌。

2、通过CSS禁用下拉框展示‌

如果需要进一步隐藏分钟和秒的下拉框，可以通过CSS来实现。例如，可以设置popper-class的样式来禁用鼠标响应：

<style>
.el_date_picker .el-input--small {pointer-events: none; // 设置禁用响应鼠标事件
}
</style>

这种方法通过禁用鼠标事件来阻止用户与分钟和秒的下拉框交互‌

3、‌使用:picker-options属性限制时间范围‌

可以通过:picker-options属性来限制可选的时间范围，虽然这种方法主要用于限制时间范围，但也可以间接达到禁止选择分钟和秒的效果。例如：

<el-date-picker v-model="value" type="datetime" :picker-options="{ start: '00:00', end: '23:59' }"></el-date-picker>

这样设置后，用户只能选择小时，无法选择分钟和秒‌。

这些方法各有优缺点，可以根据具体需求选择合适的方法‌：

使用:disable-minute和:disable-second属性是最直接的方法，简单易用。
通过CSS禁用下拉框展示可以提供更细致的控制，但需要编写额外的CSS代码。
使用:picker-options属性限制时间范围则是一种灵活的方法，适用于需要限制时间范围的场景。