Vue 切换页面编辑状态

雨点打透心脏的1/2处 2021-09-07 06:15 538阅读 0赞

思路：  
1.编辑和退出是两个状态，首先要根据\{ \{ action \}\}判断状态 （if）  
2.展示\{ \{ action \}\}对应的状态（v-show）

效果图  
![未编辑状态][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hb3hpYW9oZWlf_size_16_color_FFFFFF_t_70]

![进入编辑状态][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hb3hpYW9oZWlf_size_16_color_FFFFFF_t_70 1]

源码：

<template>
    		<view>
    			
    			<u-navbar title-color="#fff" back-icon-color="#fff" :is-fixed="isFixed" :is-back="true" :background="background" :title="title" :back-icon-name="backIconName" :back-text="backText">
    				<view class="navbar-right" slot="right" v-if="slotRight">
    					<view class="message-box right-item">
    						<view class="city-img">
    							
    							<view class="nav_admin" @tap="changeAction">{
       {action}}</view>
    						</view>
    					</view>
    				</view>
    			</u-navbar>
    
    			
    			<view v-show="action=='编辑'">
    
    
    			</view>
    			
    			<view v-show="action=='退出'">
    
    
    			</view>
    		</view>
    <template>

export default { 
    		data() { 
    			return { 
    				
    				action: '编辑', // 切换编辑还是退出
    
    				// 自定义导航栏
    				title: '通讯状态',
    				slotRight: true,
    				backText: '',
    				backIconName: 'nav-back',
    				right: false,
    				showAction: false,
    				rightSlot: false,
    				useSlot: false,
    				background: { 
    					background: '#2E95FF'
    				},
    				isBack: true,
    				search: false,
    				custom: false,
    				isFixed: true,
    				keyword: '',
    				// #ifdef MP
    				slotRight: false,
    				// #endif
    				// #ifndef MP
    				slotRight: true,
    				// #endif
    				//自定义导航栏结束
    			}
    		},
    		methods: { 
    			// 切换编辑还是退出
    			changeAction() { 
    				if (this.action == "编辑") { 
    					this.action = "退出"
    				} else { 
    					this.action = "编辑"
    				}
    			},
    		}
    	}

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hb3hpYW9oZWlf_size_16_color_FFFFFF_t_70]: /images/20210827/96ea7d6ea3194a8c9df8961c9549d397.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hb3hpYW9oZWlf_size_16_color_FFFFFF_t_70 1]: /images/20210827/62e9450d31e149748cfd1808380466e7.png