移动端可拖动向下弹窗组件

最新推荐文章于 2024-10-02 10:11:21 发布

爱练肩的小码农

最新推荐文章于 2024-10-02 10:11:21 发布

阅读量627

点赞数

分类专栏： vue学习过程记录文章标签：前端 javascript css3 小程序

本文链接：https://blog.csdn.net/huagg24/article/details/127750481

版权

本文介绍了一种移动端的可拖动向下弹窗组件的实现方法。为了解决form表单在弹窗内的需求，作者进行了组件的魔改。组件利用translate进行弹窗位置动态调整，通过改变touched属性控制收起高度。实现过程中，点击可打开或关闭幕布，具有良好的交互体验。

摘要由CSDN通过智能技术生成

今天有一個這樣的需求，把一个form表单全部放在向下的彈出框内，填完需要的信息就收上去，但不完全收起来，留一部分在外面。要让人一看就知道这是可以收缩的，但是都没有好用的组件，于是把别人的组件魔改了一下。下面上代码（效果图我放在最下面）

<template>
	<view class="popup-box" :class="{ show: openPopup }" :style="{'zIndex':zIndex}" hover-stop-propagation
		@touchmove.stop.prevent>

		<view class="mask" @touchmove.stop.prevent @tap.stop="close" :class="{success:isSuccess,error:!isSuccess}">
		</view>
		<view class="popup-cont" style="background-color: azure;" :style="[{
				height:height
			}, customStyle,movestyle]" @touchmove.stop.prevent>

			<view style="flex:1;" @touchmove.stop.prevent>
				<slot />
			</view>
			<view class="closehead" :style="customHeadStyle" @touchstart.stop&#