【uni-app】点击显示和隐藏操作按钮

最新推荐文章于 2025-02-11 12:48:51 发布

cdgogo

最新推荐文章于 2025-02-11 12:48:51 发布

阅读量1w

点赞数 1

分类专栏： uni-app

本文链接：https://blog.youkuaiyun.com/cdgogo/article/details/119717590

版权

uni-app 专栏收录该内容

17 篇文章

订阅专栏

本文介绍如何在uni-app中通过点击事件控制操作按钮的显示与隐藏。当点击某一项目时，该项目的操作列表显示，同时隐藏其他项的操作。再次点击其他项或者点击最外层时，所有操作都会隐藏。

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

效果说明：点击当前项显示操作列表，点击其他项先隐藏其他操作在显示当前的操作。点击最外层隐藏所有操作。
在这里插入图片描述

<template>
	<view class="wrap" @click="hideIsShow">
		<view class="list">
			<view class="item flex justify-between" v-for="(item, index) in list" :key="index">
				<view class="left">
					<view class="top flex">
						<view class="name">{{ item.name }}</view>
						<view class="state">
							<text :class="[item.state == 1 ? 'stateTrue' : 'stateFlase']">{{item.state == 0 ? '未绑定微信' :'已绑定'}}</text>
						</view>
					</view>
					<view class="desc">
						<text class="text">联系电话</text>
						{{ item.tell }}
					</view>
					<view class="desc">
						<text class="text">微信名称</text>
						{{ item.nickName }}
					</view>
				</view>
				<view class="right flex flex-column justify-between">
					<view class="operation">
						<image class="img" src="../../../../static/image/dots.png" mode="aspectFill" @click.stop="operations(index)"></image>
						
						<view class="btns" :class="[isShow == index ? 'show' : 'hide']">
							<view class="flex justify-between align-items-center">
								<text class="text" @click="del(index)">删除</text>
								<text class="text" @click="change(index)">换绑</text>
								<text class="text" @click="edit(index)">编辑</text>
							</view>
						</view>
					</view>
					
					<view class="bweixin" @click="bweixin(e)" :class="[item.state == 1 ? 'hide' : 'show']">绑定微信</view>
				</view>
			</view>
		</view>
		
		<view class="addBtn">
			<image src="../../../../static/image/addComment.png" mode="aspectFill" class="img"></image> 添加店长
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			isShow:-1,
			list: [
				{
					name: '张三',
					state: 1, //0未绑定微信 1已绑定
					tell: '15089980356',
					nickName: 'KK'
				},
				{
					name: '李强',
					state: 0, //0未绑定微信 1已绑定
					tell: '15089980356',
					nickName: 'KK'
				},
				{
					name: '刘武',
					state: 0, //0未绑定微信 1已绑定
					tell: '15089980356',
					nickName: 'KK'
				}
			]
		};
	},
	methods: {
		// 绑定微信
		bweixin:function(e){
			console.log(e)
			console.log("点击里绑定微信")
		},
		// 操作
		operations:function(index){
			let that = this;
			if(index === that.isShow){
				that.isShow = -1;
				return false;
			}
			that.isShow = index;
		},
		// 隐藏
		hideIsShow: function(){
			this.isShow = -1;
		},
		// 删除
		del:function(index){
			let that = this;
			let name = that.list[index].name;
			console.log(name)
			uni.showModal({
			    title: `确认删除${name}`,
			    content: '删除后无法恢复，请谨慎操作',
			    success: function (res) {
			        if (res.confirm) {
			            // console.log('用户点击确定');
						that.list.splice(index,1)
			        } else if (res.cancel) {
			            console.log('用户点击取消');
			        }
			    }
			});
		},
		// 换绑
		change:function(index){
			console.log("换绑")
		},
		// 编辑
		edit:function(index){
			console.log("删除")
		}
	}
};
</script>