一、效果
二、描述
点击加号增加下面的盒子,点击×号删除盒子
三、思路
添加
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完成啦嘿嘿