bab-icon/resources/js/components/Ui-Start-End-Time.vue

<template>
    <el-row class="form-group">
        <el-col :span="3" style="min-height:50px;padding-top:10px;">
            <label style="margin-left:10px;vertical-align: middle;" class="control-label">{{label ? label : 'start-end-time'}}</label>
        </el-col>
        <el-col :span="14">
            <el-time-select
                    :placeholder="params.start.placeholder ? params.start.placeholder : 'start time ...'"
                    :name="params.start.name"
                    v-model="value_start"
                    :editable="params.start.editable ? 'false' : 'true'"
                    :clearable="clearable"
                    :picker-options="params.start.options">
            </el-time-select>
            <el-time-select
                    :placeholder="params.end.placeholder ? params.end.placeholder : 'end time ...'"
                    :name="params.end.name"
                    v-model="value_end"
                    :editable="params.end.editable ? 'false' : 'true'"
                    :clearable="clearable"
                    :picker-options="params.end.options">
            </el-time-select>
        </el-col>
        <el-col :span="7">
            <div class="classJs">
                <div v-if="tips">
                    <span class="red">*</span>&ensp;{{tips}}
                </div>
            </div>
        </el-col>
    </el-row>
</template>

<script>
    export default {
        props: ['label' , 'params', 'tips'],
        data() {
            return {
                value_start : this.params.start.value,
                value_end: this.params.end.value,
                clearable: false
            };
        },
        mounted() {},
        methods: {}
    }
</script>

<style scoped>
    .classJs {
        margin-left: 10px;
        vertical-align: middle;
        height:42px;
        line-height:42px;
    }
    .red{
        color: red;
    }
</style>