<template>
    <al-button type="text" @click="clickHandler" style="display: inline-block"><slot></slot><i class="iconfont" style="font-size: 12px;" :class="{'icon-arrow-up':isShow,'icon-arrow-down':!isShow}"></i></al-button>
</template>

<script>
    export default {
        name: "index",
        data(){
            return{
                isShow:false,
            }
        },
        props:{
            value:{
                type:Boolean,
                default:false
            }
        },
        methods:{
            clickHandler(){
                this.isShow=!this.isShow;
                this.$emit('input',this.isShow);
            }
        },
        watch:{
            value:{
                handler(){
                    this.isShow=this.value;
                }
            }
        }
    }
</script>

<style scoped>

</style>
