uniapp实战 —— 弹出层 uni-popup (含vue3子组件调父组件的方法)

效果预览

在这里插入图片描述

弹出的内容

src\pages\goods\components\ServicePanel.vue

<script setup lang="ts">
// 子组件调父组件的方法
const emit = defineEmits<{
  (event: 'close'): void
}>()
</script>

<template>
  <view class="service-panel">
    <!-- 关闭按钮 -->
    <text class="close icon-close" @tap="emit('close')"></text>
    <!-- 标题 -->
    <view class="title">服务说明</view>
    <!-- 内容 -->
    <view class="content">
      <view class="item">
        <view class="dt">无忧退货</view>
        <view class="dd">
          自收到商品之日起30天内,可在线申请无忧退货服务(食品等特殊商品除外)
        </view>
      </view>
      <view class="item">
        <view class="dt">快速退款</view>
        <view class="dd">
          收到退货包裹并确认无误后,将在48小时内办理退款,
          退款将原路返回,不同银行处理时间不同,预计1-5个工作日到账
        </view>
      </view>
      <view class="item">
        <view class="dt">满88元免邮费</view>
        <view class="dd">
          单笔订单金额(不含运费)满88元可免邮费,不满88元, 单笔订单收取10元邮费
        </view>
      </view>
    </view>
  </view>
</template>

<style lang="scss">
.service-panel {
  padding: 0 30rpx;
  border-radius: 10rpx 10rpx 0 0;
  position: relative;
  background-color: #fff;
}

.title {
  line-height: 1;
  padding: 40rpx 0;
  text-align: center;
  font-size: 32rpx;
  font-weight: normal;
  border-bottom: 1rpx solid #ddd;
  color: #444;
}

.close {
  position: absolute;
  right: 24rpx;
  top: 24rpx;
}

.content {
  padding: 20rpx 20rpx 100rpx 20rpx;

  .item {
    margin-top: 20rpx;
  }

  .dt {
    margin-bottom: 10rpx;
    font-size: 28rpx;
    color: #333;
    font-weight: 500;
    position: relative;

    &::before {
      content: '';
      width: 10rpx;
      height: 10rpx;
      border-radius: 50%;
      background-color: #eaeaea;
      transform: translateY(-50%);
      position: absolute;
      top: 50%;
      left: -20rpx;
    }
  }

  .dd {
    line-height: 1.6;
    font-size: 26rpx;
    color: #999;
  }
}
</style>

页面导入并使用

import ServicePanel from './components/ServicePanel.vue'

// uni-ui 弹出层组件 ref
const popup = ref<{
  open: (type?: UniHelper.UniPopupType) => void
  close: () => void
}>()

const openPopup = () => {
  // 打开弹出层
  popup.value?.open()
}
<view @tap="openPopup('service')" class="item arrow">
  <text class="label">服务</text>
  <text class="text ellipsis"> 无忧退 快速退款 免费包邮 </text>
</view>
<!-- uni-ui 弹出层 -->
<uni-popup ref="popup" type="bottom" background-color="#fff">
  <ServicePanel  @close="popup?.close()" />
</uni-popup>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/229608.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

X86汇编语言:从实模式到保护模式(代码+注释)--c6

X86汇编语言&#xff1a;从实模式到保护模式&#xff08;代码注释&#xff09;–c6 标志寄存器FLAGS&#xff1a; 6th&#xff1a;ZF位&#xff08;Zero Flag&#xff09;&#xff1a;零标志&#xff0c;执行算数或者逻辑运算之后&#xff0c;会将该位置位。10th&#xff1a;D…

学会用bash在linux写脚本 (一)

本章主要介绍如何使用bash写脚本。 了解通配符 了解变量 了解返回值和数值运算 grep的用法是“grep 关键字 file”&#xff0c;意思是从file中过滤出含有关键字的行。 例如&#xff0c;grep root /var/log/messages&#xff0c;意思是从/var/log/messages 中过滤出含有root …

智慧能源:数字孪生压缩空气储能管控平台

压缩空气储能在解决可再生能源不稳定性和提供可靠能源供应方面具有重要的优势。压缩空气储能&#xff0c;是指在电网负荷低谷期将电能用于压缩空气&#xff0c;在电网负荷高峰期释放压缩空气推动汽轮机发电的储能方式。通过提高能量转换效率、增加储能密度、快速启动和调节能力…

因小失大,一个普通的postman多接口顺序执行,让项目瘫痪了一天

Runner的使用 postman不仅可以单独运行某个接口&#xff0c;postman的 Runner模块可以运行多个接口&#xff0c;可以实现真正意义上的自动化接口测试 Runner的主要功能如下 按顺序调用接口&#xff0c;执行用例&#xff1b; 批量发送请求&#xff1b; 对接口数据进行参数化…

Spring Cloud Alibaba实践 --Sentinel

sentinel简介 Sentinel的官方标题是&#xff1a;分布式系统的流量防卫兵。从名字上来看&#xff0c;很容易就能猜到它是用来作服务稳定性保障的。对于服务稳定性保障组件&#xff0c;如果熟悉Spring Cloud的用户&#xff0c;第一反应应该就是Hystrix。但是比较可惜的是Netflix…

一文讲解关于MCU启动原理的几个关键问题

MCU最开始一启动后去哪里读代码&#xff1f; CPU上电启动后被设计为去地址0x00000000位置处读取代码&#xff1b;首先会连续读取两个字&#xff0c;分别是栈指针初始值和复位异常处理函数的地址&#xff1b;然后跳去执行复位异常处理函数。 当然在一些早期的ARM处理器设计中&a…

对数据处理

例子&#xff1a; <Select v-model"type" placeholder"请选择..."> <Option v-for"item in list" :value"item.id__item.name">{{item.name}}</Option> </Select>

一个简单的postman设置断言,为何会难住一个工作5年的测试?

postman设置断言 作为一款接口测试工 具&#xff0c;postman需要对发送请求后返回的结果是否正确做验证&#xff0c;在postman中通过 tests页签做请求的验证&#xff0c;也称为断言。 postman设置断言的流程 1、在tests页签截取要对比的实际响应信息&#xff08;响应头、响应…

船舶机电设备智能故障诊断系统

1 船舶电气设备故障诊断专家系统 体系结构 整个系统的体系结构采用浏览器&#xff0f; 服务器 &#xff08;B&#xff0f; S&#xff09; 三层体系结构 &#xff08; 如图 1 所示 &#xff09;。B&#xff0f;S 模式是一种 以 Web 技术为基础的系统平台模式 。 把传统…

基于SuperMap iObjects Java生成地图瓦片

作者&#xff1a;dongyx 前言 在GIS领域&#xff0c;地图瓦片技术作为GIS领域的关键技术&#xff0c;是提高地图服务性能的关键手段之一。通过预先生成地图的瓦片数据&#xff0c;可以显著提升用户访问地图时的响应速度和体验。SuperMap iObjects for Java作为一款强大的GIS开…

xxl-job详解

目录 1、xxl-job介绍1.1 xxl-job的原理1.1.1 执行器的注册和发现1.1.2 调度中心调用执行器 1.2 quartz和xxl-job对比 2、快速入门2.1 下载并启动2.2 在调度中心新增定时任务2.3 任务运行模式(BEAN、GLUE)2.4 xxl-job的总结 3、后端专属技术群 1、xxl-job介绍 ​ xxl-job是一个…

LeetCode-478. 在圆内随机生成点【几何 数学 拒绝采样 随机化】

LeetCode-478. 在圆内随机生成点【几何 数学 拒绝采样 随机化】 题目描述&#xff1a;解题思路一&#xff1a;一个最简单的方法就是在一个正方形内生成随机采样的点&#xff0c;然后拒绝不在内切圆中的采样点。解题思路二&#xff1a;具体思想是先生成一个0到r的随机数len&…

进制 + 原码,反码,补码

进制转换 整数部分 小数部分 原码 反码 补码 原码转补码&#xff1a; 左边和右边第一个1不变&#xff0c;中间取反。-0 除外。 计算机系统中数值一律用补码来存储的原因 其他 术语 进制表 进制数的表示 详细教程可转 爱编程的大丙

服务器数据恢复—ocfs2文件系统被格式化为其他文件系统如何恢复数据?

服务器故障&#xff1a; 由于工作人员的误操作&#xff0c;将Ext4文件系统误装入到存储中Ocfs2文件系统数据卷上&#xff0c;导致原Ocfs2文件系统被格式化为Ext4文件系统。 由于Ext4文件系统每隔几百兆就会写入文件系统的原始信息&#xff0c;原Ocfs2文件系统数据会遭受一定程度…

Spring基于注解开发

Component的使用 基本Bean注解&#xff0c;主要是使用注解的方式替代原有的xml的<bean>标签及其标签属性的配置&#xff0c;使用Component注解替代<bean>标签中的id以及class属性&#xff0c;而对于是否延迟加载或是Bean的作用域&#xff0c;则是其他注解 xml配置…

系列八、SpringBoot中自定义SpringMVC配置

一、概述 作为Spring家族的明星产品&#xff0c;SpringBoot极大地简化了程序员的日常开发&#xff0c;提高了开发效率。我们很容易得借助于SpringBoot就可以快速开发业务代码。一般情况下&#xff0c;公司的日常开发都是基于web服务的&#xff0c;我们在使用idea等工具初始化一…

c语言-动态内存管理

文章目录 一、为什么会有动态内存管理二、申请内存函数1、malloc2、free3、calloc4、realloc 三、常见的动态内存的错误四、练习 一、为什么会有动态内存管理 1.我们一般的开辟空间方式&#xff1a; int a 0;//申请4个字节空间 int arr[10] { 0 };//申请40个字节空间2.这样…

kafka高吞吐、低延时、高性能的实现原理

作者&#xff1a;源码时代-Raymon老师 Kafka的高吞吐、低延时、高性能的实现原理 Kafka是大数据领域无处不在的消息中间件&#xff0c;目前广泛使用在企业内部的实时数据管道&#xff0c;并帮助企业构建自己的流计算应用程序。Kafka虽然是基于磁盘做的数据存储&#xff0c;但…

大华DSS S2-045 OGNL表达式注入漏洞复现

0x01 产品简介 大华DSS安防监控系统平台是一款集视频、报警、存储、管理于一体的综合安防解决方案。该平台支持多种接入方式,包括网络视频、模拟视频、数字视频、IP电话、对讲机等。此外,该平台还支持多种报警方式,包括移动侦测、区域入侵、越线报警、人员聚集等。 0x02 漏…

【Vulnhub 靶场】【BuffEMR: 1.0.1】【简单 - 中等】【20210831】

1、环境介绍 靶场介绍&#xff1a;https://www.vulnhub.com/entry/buffemr-101,717/ 靶场下载&#xff1a;https://download.vulnhub.com/buffemr/BuffEMR-v1.0.1.ova 靶场难度&#xff1a;简单 - 中等 发布日期&#xff1a;2021年08月31日 文件大小&#xff1a;4.6 GB 靶场作…