<template>
  <span class="input-group-addon">
    <i :class="dropSuffixIcon"></i>
  </span>
</template>

<script>
    export default {
        name: "go-drop-icon",
        data() {
            return {
                dropSuffixIcon: this.icon
            };
        },
        props: {
            showFlag: {
                type: Boolean,
                default: false
            },
            icon: {
                type: String,
                default: "ivu-icon ivu-icon-ios-arrow-down"
            }
        },
        methods: {
            //根据下拉显示的状态来切换图标显示方式
            toggleSuffixIcon(newVal) {
                if (newVal) {
                    this.dropSuffixIcon = 'ivu-icon ivu-icon-ios-arrow-up';
                } else {
                    this.dropSuffixIcon = 'ivu-icon ivu-icon-ios-arrow-down';
                }
            },
        },
        mounted() {
        },
        watch: {
            showFlag(newVal) {
                //切换图标的显示
                this.toggleSuffixIcon(newVal);
            }
        },
        components: {}
    };
</script>
