简化版:实现模块添加/删除功能(uni-app-demo）

最新推荐文章于 2024-09-14 16:14:40 发布

原创最新推荐文章于 2024-09-14 16:14:40 发布 · 1k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app #前端 #vue.js

本文介绍了一种在前端页面中实现动态添加和删除组件的方法。通过点击加号按钮可以增加新的组件显示，并且每个新增的组件都具备独立的删除功能。具体实现包括使用Vue.js的v-for指令遍历组件列表，结合点击事件来更新数据状态。

一、效果
在这里插入图片描述

二、描述
点击加号增加下面的盒子，点击×号删除盒子
三、思路
添加
1、给一个全局数组，保存上面添加的内容(即盒子)
2、点击加号，展示下面三个盒子的角标(小加号),并添加点击事件
3、通过下标获取点击的盒子，然后用push保存盒子在一个数组里面
删除
1、点击上面盒子的×号，获取该下标，用splice删除该下标，从而删除数据

四、代码
在这里插入图片描述

附上代码

<template>
	<view class="content">
		<!--更多 -->
		<view class="more">
			<view class="mtext">常用模块</view>
			<!-- 保存更多 -->
			<view class="cybox">
				<view class="wbox" v-for="(i,index2) in imgsrcs">
					<view v-on:click="addbox(item)" class="savebox" :src="imgsrcs">
						{{i.text}}
					</view>
					<view @click="del(index2)">
						<image class="xx" src="../../static/image/cha.png"></image>
					</view>
				</view>
				<view class="morebox" @click="seeopen()">
					<image class="moreimg" src="../../static/image/add.png"></image>
				</view>
			</view>
		</view>

		<!-- 添加模块 -->
		<view class="moudle">
			<view v-for='(m,index) in sysList' class="add">
				<view v-show="see" class="badge" @click="addbox(m)">
					<image class="Sbox" src="../../static/image/add.png"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "originality",
		components: {},
		data() {
			return {
				see: false,
				imgsrcs: [],
				sysList: [{
						text: '活动日',
						img: '../../',
					}, {

						text: '分析会',
						img: '../../../../../static/image/ph/gcjdk.png',
					},
					{
						text: '活动文件',
						img: '../../../../../static/image/ph/gcjdk.png',
					}
				]
			}
		},
		methods: {
			seeopen() {
				this.see = true
			},
			addbox(m) {
				console.log(m)
				this.imgsrcs.push(m)
			},
			del(item) {
				console.log(item)
				this.imgsrcs.splice(item, 1)
			}

		}
	}
</script>

<style scoped>
	.badge {
		width: 25rpx;
		height: 25rpx;
		position: absolute;
		border-radius: 50%;
		margin-left: 90rpx;
		margin-top: -10rpx;
	}


	.morebox {
		width: 100rpx;
		height: 100rpx;
		margin-left: 5%;
		display: flex;
		justify-content: center;
		align-items: center;
		border: 1rpx solid #F7B2B2;
	}

	.moreimg {
		width: 50rpx;
		height: 50rpx;

	}

	.more {
		width: 100%;
		height: 300rpx;
		border: 1rpx solid #000000;
	}

	.moudle {
		width: 100%;
		height: 600rpx;
		border: 1rpx solid #000066;
		display: flex;
		flex-wrap: wrap;
	}

	.add {
		width: 100rpx;
		height: 100rpx;
		border: 1rpx solid #000000;
		margin-top: 2%;
		margin-left: 5%;
	}

	.mtext {
		margin: 3%;
	}

	.Sbox {
		width: 25rpx;
		height: 25rpx;
		position: absolute;
		border-radius: 50%;
	}

	.savebox {
		width: 100rpx;
		height: 100rpx;
		margin-left: 5%;
		border: 1rpx solid #000000;
	}

	.cybox {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
	}

	.xx {
		width: 25rpx;
		height: 25rpx;
		position: absolute;
		border-radius: 50%;
		margin-left: 12%;
		margin-top: -15%;
	}

	.wbox {
		margin-left: 5%;
	}
</style>

一个小小的demo完成啦嘿嘿