Time时间
... 2022-3-9 About 1 min
# Time时间
# 基础用法
<avue-form :option="option"></avue-form>
<script>
export default {
data() {
return {
option:{
column: [{
label: "时间",
prop: "time",
type: "time",
}]
},
};
}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
Expand Copy Copy
# 下拉框样式
.popperClass .el-time-spinner__item{
background-color: rgba(0,0,0,.2);
}
1
2
3
2
3
popperClass属性配置样式的class名字
<avue-form :option="option"></avue-form>
<script>
export default {
data() {
return {
option:{
column: [{
label: "时间",
prop: "time",
popperClass:'popperClass',
type: "time",
}]
},
};
}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
Expand Copy Copy
# 固定时间点
，可设置pickerOptions中分别通过start、end和step指定可选的起始时间、结束时间和步长
<avue-form :option="option"></avue-form>
<script>
export default {
data() {
return {
option:{
column: [{
label: "时间",
prop: "time",
type: "time",
pickerOptions:{
start: '08:30',
step: '00:15',
end: '18:30'
}
}]
},
};
}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
Expand Copy Copy
# 格式化
使用format指定输入框的格式；使用valueFormat指定绑定值的格式。
<avue-form :option="option"></avue-form>
<script>
export default {
data() {
return {
option:{
column: [{
label: "时间",
prop: "time",
type: "time",
format:'HH时mm分ss秒',
valueFormat:'HH:mm:ss'
}]
},
};
}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
Expand Copy Copy
# 时间范围
<avue-form :option="option"></avue-form>
<script>
export default {
data() {
return {
option:{
column: [{
label: "时间范围",
prop:'timerange',
type: 'timerange',
format:'HH:mm:ss',
valueFormat:'HH:mm:ss',
startPlaceholder: '时间开始范围自定义',
endPlaceholder: '时间结束范围自定义',
}]
},
};
}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
Expand Copy Copy
# 固定时间范围
若先选择开始时间，则结束时间内备选项的状态会随之改变
<avue-form v-model="form" :option="option"></avue-form>
<script>
export default {
data() {
return {
form:{}
};
},
computed:{
option(){
return {
column: [{
label: "开始时间",
prop:'start',
type: 'time',
format:'HH:mm:ss',
pickerOptions:{
start: '08:30',
step: '00:15',
end: '18:30'
}
},{
label: "结束时间",
prop:'end',
type: 'time',
format:'HH:mm:ss',
pickerOptions:{
start: '08:30',
step: '00:15',
end: '18:30',
minTime: this.form.start
}
}]
}
}
}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
Expand Copy Copy