【工作小tip】遮罩层遮不住底部组件

遮罩层遮不住底部按钮

uview自带的modal弹窗，绑定了一个遮罩层，但是弹出来遮盖不住页面下面的按钮

分析原因：

1.可能因为是遮罩层的优先级没有底部按钮高：uview遮罩层的优先级默认999，于是设置按钮的优先级为5

2.因为是子组件的遮罩层，并且代码上子组件的代码在按钮的代码上面，可能跟代码逻辑和生命周期有关，代码逻辑比较复杂，不好随便拼凑，想过可以多加一层自定义的遮罩或者选择性隐藏样式，但是怕两层遮罩出问题，隐藏的方法又不太漂亮，思考了半天，决定采用：

秘技-伪遮罩

设置子组件modal被触发时返回一个没有用的数据，父组件接受到数据就设置底部透明度和颜色为被遮罩的样式，弹窗结束后恢复为原来的样式

代码如下：

父组件

<template>
		<CommunicationRecordList :dataSource="communicationList" :isCheck="false" @onDelete="handleDelete" @set-hide="setHide" @set-			show="setShow"></CommunicationRecordList>
</template>
<script>
        methods: {
                    // 点击删除时伪遮罩按钮
                    setHide(id) {
                        var footer = document.getElementsByClassName('footer')
                        footer[footer.length-1].style.opacity = 0.5
                        footer[footer.length-1].style.backgroundColor = "rgb(255, 255, 255, 0.5)"
                    },
                    // 确定删除后移除遮罩
                    setShow(id) {
                        var footer = document.getElementsByClassName('footer')
                        footer[footer.length-1].style.opacity = 1
                        footer[footer.length-1].style.backgroundColor = "rgb(255, 255, 255, 1)"
                    },
        }
</script>

子组件

<template>
	<view class="communication_record_list">
		<u-time-line>
			<u-time-line-item :key="index" nodeTop="85" v-for="(item,index) in dataSource">
				<template v-slot:content>
					<view class="card">
						<view class="type">{{ item.type_label || '微信' }}沟通</view>
						<view class="content">{{ item.content }}</view>
						<view class="footer">
							<view class="create_time">{{ formatDateTime(item.createTime,'time') }}</view>
							<view v-if="!isCheck" class="delete_btn" @click="handleDelete(item.id)">
								删除
							</view>
						</view>
					</view>
				</template>
			</u-time-line-item>
		</u-time-line>
		<u-modal v-model="showModel" :show-cancel-button="true" confirm-color="#E6002D" @confirm="handleConfirm" @cancel="cancelConfirm">
			<view class="slot-content">
				<view class="modelTip">确定删除该沟通记录？</view>
			</view>
		</u-modal>
	</view>
</template>


<script>
	export default {
		name: 'CommunicationRecordList',
		data() {
			return {
				id: '',
				showModel: false
			}
		},
		methods: {
			handleDelete(id) {
				this.showModel = true
				this.id = id
				this.$emit('set-hide',id)
			},
			handleConfirm() {
				this.$emit('set-show',this.id)
				this.$emit('onDelete', this.id)
			},
			cancelConfirm() {
				this.$emit('set-show',this.id)
			}
		}
	}
</script>

大概率是解决了，和达那边客户又给需求了，明天还得继续看和达