组件-选项卡

最新推荐文章于 2024-11-14 10:46:07 发布

樊小烦

最新推荐文章于 2024-11-14 10:46:07 发布

阅读量260

点赞数

文章标签： vue.js uni-app

本文链接：https://blog.youkuaiyun.com/qq_42644893/article/details/111611573

版权

这篇博客介绍了基于Vue CLI构建的Uni-App项目中，如何实现点击显示隐藏下拉列表及箭头旋转效果，并通过事件监听实现子组件向父组件传递值的功能。示例代码展示了选项卡切换时，点击‘全部明细’触发下拉列表显示和内容替换的过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

基于vue/cli的uni-app

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

选项卡切换

<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>