#### 子组件
<template>
<div>
<el-form :label-position="'left'">
<el-row :gutter="gutter">
<el-col :span="col">
<el-form-item>
<el-input v-model="time.day" placeholder="天" :min="0" type="number" class="custom-input" @change="sum">
<template slot="append">天</template>
</el-input>
</el-form-item>
</el-col>
<el-col :span="col">
<el-form-item>
<el-input v-model="time.hour" placeholder="时" :min="0" type="number" class="custom-input" @change="sum">
<template slot="append">时</template>
</el-input>
</el-form-item>
</el-col>
<el-col :span="col">
<el-form-item>
<el-input v-model="time.minute" placeholder="分" :min="0" type="number" class="custom-input" @change="sum">
<template slot="append">分</template>
</el-input>
</el-form-item>
</el-col>
<el-col :span="col">
<el-form-item>
<el-input v-model="time.second" placeholder="秒" :min="0" type="number" class="custom-input" @change="sum">
<template slot="append">秒</template>
</el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
</div>
</template>
<script>
export default {
model: {
prop: 'time',
event: 'time_result'
},
props: {
time: {
type: Object,
default: { day: 0, hour: 0, minute: 0, second: 0 }
},
gutter: {
type: Number,
default: 0
},
col: {
type: Number,
default: 12
}
},
created() {
this.sum();
},
methods: {
sum() {
let { day, hour, minute, second } = this.time;
let c_day = 60 * 60 * 24 * parseInt(day);
let c_hour = 60 * 60 * parseInt(hour);
let c_minute = 60 * parseInt(minute);
let c_second = parseInt(second);
let sum = c_day + c_hour + c_minute + c_second;
console.log('[ sum ] >', sum);
this.$emit('sum_result', sum);
this.$emit('time_result', { day, hour, minute, second });
}
}
};
</script>
<style scoped>
/* .custom-input {
width: 100px;
} */
.custom-input /deep/ .el-input__inner {
padding-right: 0px;
}
</style>
#### 父组件
<jx-day-convert
v-model="time"
:col="5"
:gutter="10"
@sum_result="
data => {
formRecharge.add_expire_time = data;
}
"
></jx-day-convert>
data() {
return {
formRecharge:{ add_expire_time: 0}
time: { day: 0, hour: 0, minute: 0, second: 0 }
};
},
methods: {
}
标签:Vue,hour,sum,绑定,second,time,组件,day,minute
From: https://www.cnblogs.com/lbx6935/p/16628248.html