使用elementUI的Slider 滑块写日期时间选择器
时间: 2024-02-09 12:12:18 浏览: 39
可以使用ElementUI的Slider组件结合JavaScript代码实现日期时间选择器。具体步骤如下:
1. 在Vue组件中引入ElementUI的Slider组件:
```
<template>
<div>
<el-slider :min="0" :max="maxValue" v-model="value" :show-tooltip="false" />
</div>
</template>
<script>
import { Slider } from 'element-ui';
export default {
components: {
'el-slider': Slider,
},
data() {
return {
value: 0,
maxValue: 23,
};
},
};
</script>
```
2. 根据Slider的value值计算出日期时间:
```
computed: {
// 计算小时数
hour() {
return this.value;
},
// 计算分钟数
minute() {
return Math.round((this.value - Math.floor(this.value)) * 60);
},
// 计算日期时间
datetime() {
const date = new Date();
date.setHours(this.hour);
date.setMinutes(this.minute);
return date;
},
},
```
3. 在模板中显示日期时间:
```
<template>
<div>
<el-slider :min="0" :max="maxValue" v-model="value" :show-tooltip="false" />
<div>选择的时间是:{{ datetime }}</div>
</div>
</template>
```
这样就可以使用ElementUI的Slider组件实现日期时间选择器了。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.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)