位置: IT常识 - 正文

【小程序开发】—— 封装自定义弹窗组件(小程序开发定制)

编辑:rootadmin
【小程序开发】—— 封装自定义弹窗组件 文章目录🍋前言:🍍正文1、探讨需求封装popup自定义弹窗组件2、实战开发弹窗组件2.1 子组件内容 popup.vue文件2.2 父组件引用子组件3、效果图预览3.1 不使用具名插槽的原有样式效果3.2 使用具名插槽之后样式效果🎃专栏分享:🍋前言:

推荐整理分享【小程序开发】—— 封装自定义弹窗组件(小程序开发定制),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:小程序开发费用明细,小程序开发平台,小程序开发一个多少钱啊,小程序开发费用明细,小程序开发平台,小程序开发费用明细,小程序开发商城,小程序开发一个多少钱啊,内容如对您有帮助,希望把文章链接给更多的朋友!

大家好我是不苒,本人男,头像是女朋友照片,很多大佬都以为我是女的,浅浅的解释一下哈哈。很高兴书写博客与大家分享知识。 本片文章主要讲的是,使用uniapp开发背景下,使用Vue的具名插槽封装一个自定义的弹窗组件popup,感兴趣的小伙伴可以学习一下,如果发现本人编写有问题的话,欢迎大家随时来评论区探讨支出问题,我也会及时更正的。

话不多说直接上正文一起来学习一下封装自定义弹窗组件吧!

🍍正文1、探讨需求封装popup自定义弹窗组件

首先我们需要探讨一下,封装自定义的组件都需要什么功能

需要一个半透明灰色的背景,用于区分与非弹窗内容,点击灰色区域也可以关闭弹窗。需要一个关闭按钮和两个操作按钮,一个确定,一个取消。弹窗内容:标题,内容区域,因为是自定义所以都使用了具名插槽,也可以设置默认的显示内容。弹窗的显示位置,本次封装只考虑了居中与页面底部两个常用显示位置。2、实战开发弹窗组件2.1 子组件内容 popup.vue文件<template><view class="mark" v-if="isShow" @click="close"><view :class="bottom?'bottom':'center'" class="content" ><view @click="close"><image class="close" src="../static/close.png" ></image></view><slot name="title"><view class="title">子组件默认标题</view></slot><slot name="body"><text style="font-size: 14px;">确定要取消订单吗?取消之后购物车也将清空。</text></slot><slot name="bottom"><view class="btns"><view class="confirm btn" @click="confirm">确定</view><view class="cancel btn" @click="cancel">取消</view></view></slot></view></view></template><script>export default {props: {isShow: {type: Boolean,default: false},// 子组件接收一个布尔类型的bottom,如果为true则弹窗则在页面的底部,false为默认居中显示bottom: {type: Boolean,default: false}},data() {return{}},methods: {close(){this.$emit('close')},cancel(){this.$emit('cancel')},confirm(){this.$emit('confirm')},}}</script><style lang="scss">.mark {position: fixed;width: 100vw;height: 100vh;background-color: rgba(0, 0, 0, 0.3);left: 0;bottom: 0;top: 0;right: 0;display: flex;justify-content: center;align-items: center;}.bottom{position: absolute;bottom: 0 ;width: 100vw;}.center{width: 80vw;position: relative;}.content{background-color: #fff;border-radius: 20rpx;height: 400rpx;padding: 40rpx;box-sizing: border-box;.close{position:absolute;right:30rpx;top: 20rpx;width: 40rpx;height: 40rpx;}.title{text-align: center;font-weight: 600;height: 50rpx;line-height: 50rpx;margin-bottom: 20rpx;}.btns{bottom: 20px;position: absolute;display: flex;justify-content: space-between;width: 88%;.btn{width: 160rpx;height: 80rpx;text-align: center;line-height: 80rpx;border-radius: 20rpx;}.confirm{background: bisque;}.cancel{background: #ccc;}}}</style>

注意:

本文CSS内容使用了scss语法,不使用的话可以将嵌套的样式拿出即可。

解释说明:

isShow 用于控制弹出层的显示与隐藏,在点击灰色空白区域和右上角关闭按钮,还有确定按钮与取消按钮之后都会关闭弹出层。bottom 用于控制弹出层的显示位置,默认为居中显示methods中向父组件传递了三个方法,分别是关闭弹窗,点击确定按钮,点击取消按钮使用具名插槽,在父组件中可以自定义插槽中的内容,方便不同位置的弹窗显示样式2.2 父组件引用子组件<template><view class="container"><view class="btn" @click="open">显示弹出层</view><popup :isShow='visible' :bottom='true' @close="closeMadle" @cancel="cancel" @confirm="confirm"><template v-slot:title><view class="title">父组件自定义标题</view></template><template v-slot:body><view class="body" >这里是父组件引用子组件,使用具名插槽编写的自定义内容和样式。</view></template></popup></view></template><script>import popup from '../../components/popup.vue'export default {components: {popup},data() {return {visible:false,}},methods: {open(){this.visible = trueuni.hideTabBar()},closeMadle(){this.visible = falseuni.showTabBar()},confirm(){// 这里调用接口执行点击确定后的操作并关闭弹窗console.log('点击了确认按钮')this.visible = false},cancel(){// 点击了取消按钮直接关闭弹窗console.log('点击了取消按钮')this.visible = false},}}</script><style lang="scss>.title{text-align: center;font-weight: 600;height: 50rpx;line-height: 50rpx;margin-bottom: 20rpx;}.body{font-size: 14px;font-weight: 600;color: darkorchid;}</style>

注意:

本文CSS内容使用了scss语法,不使用的话可以将嵌套的样式拿出即可。【小程序开发】—— 封装自定义弹窗组件(小程序开发定制)

解释说明:

引用子组件,并在conponents中注册。bottom 为true用于控制弹出层的弹窗在底部显示,不传默认为居中显示。@语法接收子组件中向父组件传递的三个方法,在父组件methods中定义三个方法做相应的操作。使用具名插槽,自定义插槽中的内容。uni.showTabBar() 和 uni.hideTabBar()两个方法用于控制原生tabbar的显示与隐藏。3、效果图预览3.1 不使用具名插槽的原有样式效果

3.2 使用具名插槽之后样式效果

这里是演示的那个显示在页面底部的弹窗,如果不需要直接将代码片段里的:bottom="true"删掉即可

🎃专栏分享:

小程序项目实战专栏:《uniapp小程序开发》 前端面试专栏地址:《面试必看》

⏳ 名言警句:说能做的,做说过的\textcolor{red} {名言警句:说能做的,做说过的}名言警句:说能做的,做说过的

✨ 原创不易,还希望各位大佬支持一下\textcolor{blue}{原创不易,还希望各位大佬支持一下}原创不易,还希望各位大佬支持一下

👍 点赞,你的认可是我创作的动力!\textcolor{green}{点赞,你的认可是我创作的动力!}点赞,你的认可是我创作的动力!

⭐️ 收藏,你的青睐是我努力的方向!\textcolor{green}{收藏,你的青睐是我努力的方向!}收藏,你的青睐是我努力的方向!

✏️ 评论,你的意见是我进步的财富!\textcolor{green}{评论,你的意见是我进步的财富!}评论,你的意见是我进步的财富!

本文链接地址:https://www.jiuchutong.com/zhishi/300403.html 转载请保留说明!

上一篇:人工智能、机器学习和深度学习有哪些区别?(人工智能机器人的好处)

下一篇:堆和栈详解js(js栈堆的区别)

  • ppt图片怎么虚化透明(ppt图片怎么虚化背景)

    ppt图片怎么虚化透明(ppt图片怎么虚化背景)

  • 美团怎么给骑手差评(美团怎么给骑手打电话)

    美团怎么给骑手差评(美团怎么给骑手打电话)

  • 苹果a1534笔记本是哪一年(苹果a1534笔记本是什么型号)

    苹果a1534笔记本是哪一年(苹果a1534笔记本是什么型号)

  • 小米9突然不能快充了(小米9突然不能快充了怎么办)

    小米9突然不能快充了(小米9突然不能快充了怎么办)

  • 哪种屏幕对眼睛伤害小(哪种屏幕对眼睛伤害最小)

    哪种屏幕对眼睛伤害小(哪种屏幕对眼睛伤害最小)

  • thunderbolt接口用途(thunderbolt4.0接口)

    thunderbolt接口用途(thunderbolt4.0接口)

  • 外文数据库有哪些(外文数据库哪个有全文)

    外文数据库有哪些(外文数据库哪个有全文)

  • 微信付款码截图能用吗(微信付款码截图发给别人了怎么办)

    微信付款码截图能用吗(微信付款码截图发给别人了怎么办)

  • 平板air3上市时间(apple ipad air3上市时间)

    平板air3上市时间(apple ipad air3上市时间)

  • up直播可以自己提现吗(up直播自己播好还是签约)

    up直播可以自己提现吗(up直播自己播好还是签约)

  • 计算机系统中必不可少的软件是(计算机系统必不可少的输出设备)

    计算机系统中必不可少的软件是(计算机系统必不可少的输出设备)

  • 手机抢单慢的原因(手机抢单原理)

    手机抢单慢的原因(手机抢单原理)

  • fx是什么(fx是什么函数)

    fx是什么(fx是什么函数)

  • 小爱触屏音箱怎么打电话(小爱触屏音箱怎么设置密码锁)

    小爱触屏音箱怎么打电话(小爱触屏音箱怎么设置密码锁)

  • qq扩列消息怎么看不到(qq扩列消息怎么撤回)

    qq扩列消息怎么看不到(qq扩列消息怎么撤回)

  • 苹果手机编辑文件用什么软件(苹果手机编辑文字换行怎么操作)

    苹果手机编辑文件用什么软件(苹果手机编辑文字换行怎么操作)

  • 如何将爱奇艺视频保存到手机相册(如何将爱奇艺视频转为本地视频)

    如何将爱奇艺视频保存到手机相册(如何将爱奇艺视频转为本地视频)

  • 拼多多关联店铺代码在哪里(拼多多关联店铺恶意发布违禁品开不了店)

    拼多多关联店铺代码在哪里(拼多多关联店铺恶意发布违禁品开不了店)

  • 苹果x怎么插耳机(iphonex怎样插耳机)

    苹果x怎么插耳机(iphonex怎样插耳机)

  • 如何创建一个受限用户(如何创建一个受控文件夹)

    如何创建一个受限用户(如何创建一个受控文件夹)

  • word2019如何创建目录(docx怎么创建)

    word2019如何创建目录(docx怎么创建)

  • 苹果nfc功能在哪里设置(苹果nfc功能在哪里感应)

    苹果nfc功能在哪里设置(苹果nfc功能在哪里感应)

  • 苹果手机怎么应用分身(苹果手机怎么应用分身QQ)

    苹果手机怎么应用分身(苹果手机怎么应用分身QQ)

  • 怎么永久删除抖音官方消息(怎么永久删除抖音里的人)

    怎么永久删除抖音官方消息(怎么永久删除抖音里的人)

  • 为什么领不了免费医疗金(为什么领不了免检标志)

    为什么领不了免费医疗金(为什么领不了免检标志)

  • 手机便签在哪(手机便签在哪里找)

    手机便签在哪(手机便签在哪里找)

  • 会计上已资本化处理的工资企业所得税前应如何扣除?
  • 进项税和销项税税率一样吗
  • 公司合同是公司员工个人名义签订如何入账?
  • 小规模纳税人为什么没有进项
  • 其他应付款贷方负数怎么调整
  • 即征即退如何申报增值税
  • 严格财务报销程序
  • 个体户核定双定户是否可以年度汇算清缴
  • 计算消费税时运费计入计税依据么
  • 人员新增申报表
  • 小规模纳税人开票税率
  • 行政单位资产核算
  • 应付账款多计怎么处理
  • 借别人钱收据怎么写
  • 向一般纳税人销售劳保专用物品
  • 金蝶标准版结转损益发生错误
  • 开个人普发票需要什么资料?
  • 农产品收购发票使用范围
  • 个体户季度超30万要交多少税
  • 所得税申报表中的营业成本包括费用吗
  • 营业外支出汇算清缴调增填哪
  • 出差补贴怎么算
  • 税金当月计提当月缴纳
  • 会计科目与账户的关系
  • 软件产品即征即退申请表
  • 公司从一个帐户里扣税吗
  • 汇算清缴是哪个报表
  • 弃置费用的会计核算
  • 企业应纳所得税计算公式
  • 流转税的计税依据有哪些
  • 集团内部资金拆借利息增值税
  • 怎么安装vue2.0
  • 计提消费税的会计科目
  • 增值税加计抵减申报表怎么填
  • 以前年度损益调整账务处理分录
  • javaweb简单项目案例
  • 后端返回图片
  • 微信小程序下拉菜单怎么做
  • vue事件bus
  • wordpress neve
  • 利润表用处
  • vuepress plugin
  • 电子承兑汇票到期怎么收款
  • 个体户餐饮服务包括哪些经营范围
  • 外商投资企业 外资企业
  • sqlserver高版本数据库文件转低版本
  • 金税四期是什么意思
  • 企业注销后账目需要保留多少年
  • 债券到期收益率被定义为使债券的()
  • 纳税申报相关操作有哪些
  • 注册资本认缴制度
  • 建筑施工企业会计第三版单旭课后题答案
  • 行政单位往来款规定
  • 印花税 不足
  • 商品预计退回会扣钱吗
  • 如何填写会计凭证内容
  • 电子银行回单可以作为凭证吗
  • 购买新发票的时候要带旧发票去吗?
  • 会计账簿按用途分类分为
  • FreeBSD 6.2用freebsd-update升级过程
  • 电脑主板bios设置图解
  • centos怎么查看文件
  • rteng7.exe - rteng7是什么进程 有什么用
  • npfmntor.exe - npfmntor是什么进程 有什么用
  • win8怎么进去安全系统
  • win10系统窗口贴靠操作的快捷键
  • 深入理解rcu
  • CCAssert(sm_pSharedApplication, "")导致程序闪退的原因以及解决方案
  • OpenGL ES2.0-iPhone开发-part1
  • JavaScript中对象方法的创建
  • js获取浏览器类型和版本信息
  • <2> unity3d 分包与上google play 之具体实战
  • js 返回上一页面并刷新
  • Android 4.4 Dialog 被状态栏遮挡的解决方法
  • android回调函数
  • python画足球
  • python函数详解
  • 中国税务徽标
  • 广东省广州市税务局分数线
  • 甘肃方正税务师事务所王小云
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设