<template>
    <div class="ht-base-time-picker-text-demo">
        <ht-base-time-picker
                :open="open"
                :value="value3"
                confirm
                @on-change="handleChange"
                @on-clear="handleClear"
                @on-ok="handleOk">
            <span @click="handleClick" style="font-size: 14px;">
                <ht-base-icon type='LiRa_time' style="font-size: 16px;" />
                <template v-if="value3 === ''">选择时间</template>
                <template v-else>{{ value3 }}</template>
            </span>
        </ht-base-time-picker>
    </div>
</template>

<script>
    export default {
        name: 'HtBaseTimePickerTextDemo',
        data() {
            return {
                open: false,
                value3: ''
            }
        },
        methods: {
            handleClick() {
                this.open = !this.open;
            },
            handleChange(time) {
                this.value3 = time;
            },
            handleClear() {
                this.open = false;
            },
            handleOk() {
                this.open = false;
            }
        }
    }
</script>
<style>
    .ht-base-time-picker-text-demo {

    }
</style>

