前端大白 -- 小程序之多选弹窗组件

最新推荐文章于 2024-10-16 13:31:03 发布

Bonnie(大宝)

最新推荐文章于 2024-10-16 13:31:03 发布

阅读量2.1k

点赞数 1

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/weixin_40199449/article/details/98053762

本文介绍了如何在小程序中创建一个多选弹窗组件，包括组件的案例展示、子组件的HTML、JS和CSS代码，以及父组件的HTML和JS调用方法。适合前端开发者参考使用。

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

多选弹窗组件

案例展示:

图1:
在这里插入图片描述
图2:

图3:

子组件HTML代码:

<template>
	<view class="popupShow">
		<!-- 显示外面的插入的元素 -->
		<view class="popupClick" @click="onPopupShow()">
			<slot></slot>
		</view>
		<!-- 遮罩层 -->
		<view class="mask" v-if="showPop" @click="onClose"></view>
		<!-- 数据层 -->
		<view class="info_box" v-if="showPop">
			<view class="btn_group">
				<button @click="onClose()">取消</button>
				<view class="line"></view>
				<button @click="onConfirm()">确定</button>
			&