咋们先看运行结果
原理通过获取input中value的值赋值给对象newItem，newItem中设置了name和imgs的图片地址，通过push方法将newItem放入box数组中
源码：
<template>
<view class="content">
<view @click="consoles()" class="samsung">
<image src="/static/Tall-Book-Images/exitright.png" mode="aspectFit" style="width: 50rpx; height: 50rpx; ">
</image>
</view>
<view class="tilte">
<view class="title-top">分类管理</view>
<view class="title-bottom">长按拖动分类可排序，轻触你添加的分类可编辑。</view>
</view>
<view class="Classify">
<view :class="[showCode ? 'Expenditurelv':'Expenditure']" @click="expendituer()">支出</view>
<view :class="[showCodeR ? 'ExpenditureH':'Expenditure']" @click="ExpenditureH()">入账</view>
<view :class="[showCodeL ? 'ExpenditureL': 'Expenditure']" @click="ExpenditureL()">不计入收支</view>
</view>
<view class="box">
<view v-for="(item,index) in box" :key="index" class="box-mini" >
<view class="img-box">
<image :src="item.imgs" mode="aspectFit" style="width: 50rpx; height: 50rpx;">
</image>
</view>
<!-- <view v-else class="img-boxone">
<image :src="item.imgs" mode="aspectFit" style="width: 80rpx; height: 80rpx;">
</image>
</view> -->
<view style="font-size: 28rpx;">{{item.name}}</view>
</view>
<view class="box-mini" :style="styleactive" @click="last()"> <!-- 添加-->
<view class="img-boxone">
<image src="/static/Tall-Book-Images/tianjia.png" mode="aspectFit" style="width: 80rpx; height: 80rpx;">
</image>
</view>
<view style="font-size: 28rpx;">添加</view>
</view>
</view>
<u-popup :show="showtype" mode="bottom" @close="close" @open="openss" round="10">
<view style="width: 100%; height: 650rpx; ">
<view class="top">
<view class="window" @click="close()">
<image src="/static/Tall-Book-Images/exitright.png" mode="aspectFit"
style="width: 40rpx; height: 40rpx;"></image>
</view>
<view
style=" font-size: 20px; text-align: center; line-height: 80rpx; width: 220rpx; height: 80rpx; position: absolute;top: 0; left: 0; right: 0; bottom: 0; margin: auto;">
添加分类
</view>
</view>
<view class="center">
<uni-easyinputs v-model="value" maxlength="4" @input="input"
placeholder="不能与已有类型名重复"></uni-easyinputs>
</view>
<view class="bottom">
<button class="comfors" :style="active" @click="comfors()">确定</button>
</view>
</view>
</u-popup>
</view>
</template>
<script>
export default {
data() {
return {
styleactive: { //添加
background: '',
},
active: {
background: ' #f2f2f2',
color: '#d4d4d4'
},
value: '',
activeindex: -1,
showtype: false, //点开编辑
showCode: true, //支出分类
showCodeR: false, //入账分类
showCodeL: false, //不计入收支
box: [{
name: '餐饮',
imgs: '/static/Tall-Book-Images/cy1.png'
},
{
name: '交通',
imgs: '/static/Tall-Book-Images/jt1.png'
},
{
name: '服饰',
imgs: '/static/Tall-Book-Images/yf1.png'
},
{
name: '购物',
imgs: '/static/Tall-Book-Images/gw1.png'
},
{
name: '服务',
imgs: '/static/Tall-Book-Images/sd1.png'
},
{
name: '教育',
imgs: '/static/Tall-Book-Images/jy1.png'
},
{
name: '娱乐',
imgs: '/static/Tall-Book-Images/ht1.png'
},
{
name: '运动',
imgs: '/static/Tall-Book-Images/lq1.png'
},
{
name: '生活缴费',
imgs: '/static/Tall-Book-Images/fz1.png'
},
{
name: '旅行',
imgs: '/static/Tall-Book-Images/lx1.png'
},
{
name: '宠物',
imgs: '/static/Tall-Book-Images/cw1.png'
},
{
name: '医疗',
imgs: '/static/Tall-Book-Images/yl1.png'
},
{
name: '保险',
imgs: '/static/Tall-Book-Images/bx1s.png'
},
{
name: '公益',
imgs: '/static/Tall-Book-Images/xin1.png'
},
{
name: '发红包',
imgs: '/static/Tall-Book-Images/hb1.png'
},
{
name: '转账',
imgs: '/static/Tall-Book-Images/zz1.png'
},
{
name: '亲属卡',
imgs: '/static/Tall-Book-Images/yhk1.png'
},
{
name: '其他人情',
imgs: '/static/Tall-Book-Images/qtrq1.png'
},
{
name: '其他',
imgs: '/static/Tall-Book-Images/qt1.png'
},
{
name: '退还',
imgs: '/static/Tall-Book-Images/thsh1.png'
}
]
}
},
methods: {
input(e) {
console.log('输入内容：', e);
this.value = e
if (this.value) {
this.active.background = '#3eb575'
this.active.color = '#ffffff'
} else {
this.active.background = '#f2f2f2'
this.active.color = '#d4d4d4'
}
},
consoles() {
// this.show = false
this.$emit('updateList', {
show: true
})
},
expendituer() { //点击支出
// this.value = 0,
// console.log(this.value);
this.showCode = true;
this.showCodeL = false;
this.showCodeR = false;
},
ExpenditureH() { //点击入账
// this.value = 1,
// console.log(this.value);
this.showCode = false;
this.showCodeR = true;
this.showCodeL = false;
},
ExpenditureL() { //点击不计入收支
// this.value = 2,
// console.log(this.value);
this.showCode = false;
this.showCodeR = false;
this.showCodeL = true;
},
close() {
this.showtype = false //关闭弹窗
},
openss() {
//弹出层退出
},
last(index) {
this.styleactive.background="#dfdfdf"
this.showtype = true //打开弹窗
setTimeout(() => {
this.styleactive.background="#ffffff"//样式改变后立马还原
}, 150)
},
comfors() {
if (this.value) {
this.active.background = "#33955f"
setTimeout(() => {
this.active.background = "#3eb575"
}, 150)
const newItem = {
name: this.value,
imgs: '/static/Tall-Book-Images/hb1.png'
}
this.showtype = false
this.box.push(newItem)
// this.box[length-2] = this.value
// console.log('this.box[length-2]' ,JSON.parse(this.box[length-2]))
}
}
}
}
</script>
<style lang="scss" scoped>
.Classify {
width: 100%;
display: flex;
height: 120rpx;
margin-top: 10rpx;
padding-left: 30rpx;
padding-right: 30rpx;
align-items: center;
margin-bottom: -12rpx;
justify-content: flex-start;
}
.content {
position: relative;
width: 750rpx;
height: 100%;
}
.samsung {
position: absolute;
width: auto;
height: auto;
top: 40rpx;
left: 30rpx;
}
.tilte {
display: flex;
flex-flow: column wrap;
justify-content: center;
align-items: center;
white-space: pre-wrap; //换行保留空格
width: 90%;
height: 350rpx;
margin: 100rpx auto 0;
// background-color: #c9c9c9;
}
.title-top {
font-size: 42rpx;
font-weight: bold;
margin-bottom: 40rpx;
}
.title-bottom {
font-size: 34rpx;
text-align: center;
letter-spacing: 0.1em;
line-height: 1.5em;
}
.Expenditurelv {
width: auto;
height: 60rpx;
color: #3eb575;
font-size: 32rpx;
text-align: center;
line-height: 60rpx;
margin-left: 20rpx;
border-radius: 10rpx;
background-color: #ebf7f1;
padding: 0rpx 20rpx 0rpx 20rpx;
}
.ExpenditureH {
width: auto;
height: 60rpx;
color: #f5c53a;
font-size: 32rpx;
text-align: center;
line-height: 60rpx;
margin-left: 20rpx;
border-radius: 10rpx;
background-color: #fdf8eb;
padding: 0rpx 20rpx 0rpx 20rpx;
}
.ExpenditureL {
width: auto;
height: 60rpx;
color: #8c8bc3;
font-size: 32rpx;
text-align: center;
line-height: 60rpx;
margin-left: 20rpx;
border-radius: 10rpx;
background-color: #f1f3f6;
padding: 0rpx 20rpx 0rpx 20rpx;
}
.Expenditure {
width: auto;
height: 60rpx;
color: #7d7d7d;
font-size: 32rpx;
text-align: center;
line-height: 60rpx;
margin-left: 20rpx;
border-radius: 10rpx;
background-color: #fafafa;
padding: 0rpx 20rpx 0rpx 20rpx;
}
.box {
width: 100%;
height: 500px;
margin-top: 50rpx;
display: flex;
flex-wrap: wrap;
overflow-y: auto;
}
.box-mini {
display: flex;
width: 120rpx;
height: 160rpx;
align-items: center;
flex-flow: column wrap;
justify-content: space-evenly;
margin: 0 0rpx 40rpx 52rpx;
}
.activebox {
background-color: #d4d4d4;
}
.img-box {
width: 80rpx;
height: 80rpx;
display: flex;
background: #3eb575;
border-radius: 50%;
justify-content: center;
align-items: center;
}
.img-boxone {
width: 80rpx;
height: 80rpx;
display: flex;
border-radius: 50%;
justify-content: center;
align-items: center;
}
.top {
position: relative;
width: 100%;
height: 30%;
}
.center {
width: 100%;
height: 30%;
display: flex;
padding: 0 30rpx 0 30rpx;
justify-content: center;
align-items: center;
}
.bottom {
width: 100%;
height: 40%;
position: relative;
}
.window {
width: 100rpx;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
}
.comfors {
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
position: absolute;
width: 380rpx;
height: 100rpx;
border-radius: 10rpx;
background-color: #f2f2f2;
display: flex;
justify-content: center;
align-items: center;
color: #d4d4d4;
}
</style>关键代码：
弹窗部分：
showtype是判断是否打开弹窗
methods：
注意：里面的图片是我目录的路径，如果复制的话需要自己写图片的路径，把代码中图片的路径更换成自己的就行了，还有弹窗的组件是uview的组件需要下载uview插件才行。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
