<template>
    <div class="ht-base-spin-situation-demo">
        <ht-base-button type="primary" @click="handleSpinShow">整页显示，3秒后关闭</ht-base-button>
        <ht-base-button type="primary" @click="handleSpinCustom">自定义显示内容</ht-base-button>
    </div>
</template>

<script>
    export default {
        name: 'HtBaseSpinSituationDemo',
        methods: {
            handleSpinShow() {
                this.$Spin.show();
                setTimeout(() => {
                    this.$Spin.hide();
                }, 3000);
            },
            handleSpinCustom() {
                this.$Spin.show({
                    render: (h) => {
                        return h('div', [
                            h('ht-base-icon', {
                                'class': 'demo-spin-icon-load',
                                props: {
                                    type: 'LiRa_loading',
                                    size: 18
                                }
                            }),
                            h('div', 'Loading')
                        ])
                    }
                });
                setTimeout(() => {
                    this.$Spin.hide();
                }, 3000);
            }
        }
    }
</script>
<style lang="less">
    .demo-spin-icon-load {
        animation: ani-demo-spin 1s linear infinite;
    }
    @keyframes ani-demo-spin {
        from {
            transform: rotate(0deg);
        }
        50% {
            transform: rotate(180deg);
        }
        to {
            transform: rotate(360deg);
        }
    }
</style>

