<div class="search-list" v-show="searches.length">

      <transition-group name="list" tag="ul">

            <li @click="selectItem(item)" class="search-item" :key="item" v-for="item in searches">

                <span class="text">{{item}}</span>

                <span class="icon" @click.stop="deleteOne(item)">

                    <i class="icon-delete"></i>

                </span>

            </li>

      </transition-group>

</div>

<script type="text/ecmascript-6">

export default {

    props: {

        searches: {

            type: Array,

            default: []

        }

    },

    methods: {

        selectItem(item) {

            this.$emit('select', item)

        },

        deleteOne(item) {

            this.$emit('delete', item)

        }

    }

}

</script>

<style lang="stylus" scoped>

.search-list

    .search-item

        display flex

        align-items center

        height 40px

        overflow hidden

        &.list-enter-active, &.list-leave-active

            transition all 0.1s

        &.list-enter, &.list-leave-to

            height 0

        .text

            flex

            color #

        .icon

            extend-click()

            .icon-delete

                font-size 11px

                color #fff

</style>