组件-选项卡

基于vue/cli的uni-app

1. 点击全部明细，下拉列表显示隐藏，同时箭头上下旋转（用同一状态控制）
2. 点击下拉列表中的每一项，将内容替换（子组件向父组件传值）

选项卡切换

<template>
<view class="drop-hidden" :class="{'none': !dropShow}">
            <view class="drop-hidden_container">
                <view v-for="(item, index) in list" :key="index" 
		              @click="clickEvent(index, item)" 
		              :class="curIndex === index ? 'drop-item-active' : ''">
                    {{item.text}}
                </view>
            </view>
</view>
</template>

<script>
		data () {
		            return {
		                dropShow: this.isShow,
		                curIndex: 0
		            };
		        },
        methods: {
            /**
             * @description 点击tag事件
             * @param item 点击项的值
             */
            clickEvent(index, item) {
                //改变当前选中索引
                this.curIndex = index;
                //派发change事件
                this.$emit('change', item);
                //隐藏选项
                this.dropShow = false;
            }
        }
</script>

子组件的值传给父元素

<template>
	<dropshow :title="dropTitle" :list="list" @change="dropChangeEvent"></dropshow>
</template>

<script>
		data () {
            return {
                dropTitle: '全部明细',
            }
        },
        methods: {
            /**
             * @description 下拉选中触发事件
             * @param e 返回当前点击的值
             */
            dropChangeEvent (e) {
                if (e.text === '全部') {
                    this.dropTitle = '全部明细';
                } else {
                    this.dropTitle = e.text;
                }
            }
        }
</script>