# Time时间
# 基础用法
<template>
<avue-form :option="option"></avue-form>
</template>
<script>
export default {
data () {
return {
option: {
column: [{
label: "时间",
prop: "time",
type: "time",
}]
},
};
}
}
</script>
显示代码复制代码复制代码
# 下拉框样式
.popperClass .el-time-spinner__item{
background-color: rgba(0,0,0,.2);
}
popperClass
属性配置样式的class
名字
<template>
<avue-form :option="option"></avue-form>
</template>
<script>
export default {
data () {
return {
option: {
column: [{
label: "时间",
prop: "time",
popperClass: 'popperClass',
type: "time",
}]
},
};
}
}
</script>
显示代码复制代码复制代码
# 固定时间点
,可设置pickerOptions
中分别通过start
、end
和step
指定可选的起始时间、结束时间和步长
<template>
<avue-form :option="option"></avue-form>
</template>
<script>
export default {
data () {
return {
option: {
column: [{
label: "时间",
prop: "time",
type: "time",
pickerOptions: {
start: '08:30',
step: '00:15',
end: '18:30'
}
}]
},
};
}
}
</script>
显示代码复制代码复制代码
# 格式化
使用format
指定输入框的格式;使用valueFormat
指定绑定值的格式。
<template>
<avue-form :option="option"></avue-form>
</template>
<script>
export default {
data () {
return {
option: {
column: [{
label: "时间",
prop: "time",
type: "time",
format: 'HH时mm分ss秒',
valueFormat: 'HH:mm:ss'
}]
},
};
}
}
</script>
显示代码复制代码复制代码
# 时间范围
<template>
<avue-form :option="option"></avue-form>
</template>
<script>
export default {
data () {
return {
option: {
column: [{
label: "时间范围",
prop: 'timerange',
type: 'timerange',
format: 'HH:mm:ss',
valueFormat: 'HH:mm:ss',
startPlaceholder: '时间开始范围自定义',
endPlaceholder: '时间结束范围自定义',
}]
},
};
}
}
</script>
显示代码复制代码复制代码
# 固定时间范围
若先选择开始时间,则结束时间内备选项的状态会随之改变
<template>
<avue-form v-model="form"
:option="option"></avue-form>
</template>
<script>
export default {
data () {
return {
form: {}
};
},
computed: {
option () {
return {
column: [{
label: "开始时间",
prop: 'start',
type: 'time',
format: 'HH:mm:ss',
start: '08:30',
step: '00:15',
end: '18:30'
}, {
label: "结束时间",
prop: 'end',
type: 'time',
format: 'HH:mm:ss',
start: '08:30',
step: '00:15',
end: '18:30',
minTime: this.form.start
}]
}
}
}
}
</script>
显示代码复制代码复制代码