<template>
<view class="page-menu">
<view class="wrap acea-row">
<view class="item acea-row row-center-wrapper" v-for="(item, index) in menuLst" :key="index">
<view>{{item}}</view>
<view class="iconfont icon-guanbi1" @click="del(index)"></view>
</view>
</view>
<view class="footer">
<view class="reset" @click="reset">重置</view>
<view class="input">
<input class="input" type="text" maxlength="10" v-model="input" placeholder="请输入内容">
</view>
<view class="add" @click="add">确定</view>
</view>
</view>
</template>
<script>
export default{
data(){
return {
input: '',
menuLst: [],
}
},
onLoad() {
const menu = this.$cache.get('FOOD_MENU');
if(menu){
this.menuLst = JSON.parse(menu);
}else{
this.menuLst = getApp().globalData.food_menu;
}
},
methods: {
add(){
let input = this.input.trim();
if(input == '') return false;
var menu = this.menuLst;
const index = menu.findIndex(item=>item === input);
if(index > -1){
menu.splice(index, 1)
}
menu.push(input);
this.input = '';
this.menuLst = menu;
this.$cache.set('FOOD_MENU', menu);
},
del(index){
var menu = this.menuLst;
menu.splice(index, 1);
this.menuLst = menu;
this.$cache.set('FOOD_MENU', menu);
},
reset(){
var list = getApp().globalData.food_menu;
this.menuLst = list;
this.$cache.set('FOOD_MENU', list);
}
}
}
</script>
<style scoped lang="scss">
.wrap{
padding: 30rpx;
.item{
position: relative;
min-width: 60rpx;
height: 80rpx;
padding: 0 30rpx;
margin: 0 24rpx 24rpx 0;
background-color: #ecf5ff;
font-size: 26rpx;
color: #409eff;
border-radius: 16rpx;
border: 1px solid #d9ecff;
.iconfont{
margin: 0 -20rpx 0 10rpx;
}
}
}
.footer{
display: inline-table;
padding: 30rpx;
view{
padding: 0 20px;
color: #909399;
vertical-align: middle;
display: table-cell;
border: 1px solid #dcdfe6;
border-radius: 8rpx;
white-space: nowrap;
background-color: #f5f7fa;
&.reset{
background-color: #ffffff;
border-right: 0;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
&.input{
width: 100%;
height: 40px;
line-height: 40px;
padding: 0 15px;
border: 1px solid #dcdfe6;
border-radius: 0;
background-color: #fff;
color: #606266;
input{
width: 100%;
height: 100%;
font-size: 30rpx;
}
}
&.add{
border-left: 0;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
}
}
</style>
1***@qq.com
- 发布:2022-11-05 22:18
- 更新:2022-11-07 10:08
- 阅读:290
1***@qq.com (作者)
解决了,非常感谢你!就是深浅拷贝的问题!!!
2022-11-07 21:55