uni-app的灰朦层取消滑动以及官方弹出框设计代码

最新推荐文章于 2025-01-07 10:40:27 发布

原创最新推荐文章于 2025-01-07 10:40:27 发布 · 875 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #css #html #vue.js #前端

本文介绍了如何在uni-app中创建灰朦层并阻止其下页面的滑动，同时详细讲解了使用官方弹出框组件的代码实现过程，涉及HTML、JavaScript和CSS技术。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html代码

<button type="primary" @click="discount">点击事件</button>
		<view class="discount" :class="showt?'':'discount_dh'">
		</view>
		<view class="tui-actionsheet-mask" @touchmove.stop.prevent="" :class="[showt?'':'tui-mask-showt']" @tap="handleClickMask"></view>

js代码

export default {
		data() {
			return {
				//点击遮罩 是否可关闭
				maskClosable: {
					type: Boolean,
					default: true
				},
				//文本内容是否展示
				showt: {
					type: Boolean,
					default: false
				}
			}
		},
		methods: {
			//点击事件
			discount(){	
				console.log(123);
				this.showt=false
			},
			//点击灰朦层是否关闭
			handleClickMask() {
				this.showt=true
			}
		}
	}

css代码

.discount{
	position: fixed;
	bottom: 0;
	width: 100%;
	/* height: 299rpx; */
	z-index: 9999;
	background-color: #FFFFFF;
	transform: translate3d(0, 100%, 0);
	transform-origin: center;
	transition: all 0.3s ease-in-out;
	visibility: hidden;
}
.discount_dh{
	transform: translate3d(0, 0, 0);
	visibility: visible;
}
.tui-actionsheet-mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.6);
		z-index: 9996;
		transition: all 0.3s ease-in-out;
		opacity: 0;
		visibility: hidden;
	}
.tui-mask-showt {
		opacity: 1;
		visibility: visible;
	}