在Uniapp开发移动应用时,弹出窗是一种常见交互组件可以用于展示额外信息提示消息用户操作。Uniapp中提供了popup组件实现弹出功能本文详细介绍popup组件相关属性用法

基本用法


在开始使用popup组件之前,请确保已经在pages.json文件导入了该组件然后,在页面模板添加如下代码

<template>
  <view&gt;
    <!-- 触发弹出窗的按钮 --&gt;
    <button type="primary" @click="showPopup"&gt;显示弹出窗</button&gt;

    <!-- 弹出窗组件 --&gt;
    <popup :show="isPopupShown" @close="closePopup">
      <!-- 弹出窗内容 -->
      <view class="popup-content">
        <text>这是弹出窗的内容</text>
        <button type="primary" @click="closePopup">关闭弹出窗</button>
      </view>
    </popup>
  </view>
</template>

上述代码中,我们定义一个按钮触发弹出窗口的显示,通过:show属性控制弹出窗口的显示与隐藏,当弹出窗口被关闭时,我们使用@close事件调用closePopup方法

script部分我们需要定义showPopupclosePopup方法

<script>
  export default {
    data() {
      return {
        isPopupShown: false
      }
    },
    methods: {
      showPopup() {
        this.isPopupShown = true;
      },
      closePopup() {
        this.isPopupShown = false;
      }
    }
  }
</script>

Props

下面是popup组件的常用属性

show

控制弹出窗口的显示与隐藏。当为 true 时,弹出窗口将显示;当为 false 时,弹出窗口将隐藏。

position

设置弹出窗口的位置可选值包括:

duration

设置弹出动画执行时间单位毫秒

closeOnClickMask

设置是否允许点击遮罩关闭弹出窗口。

maskOpacity

设置遮罩层的透明度取值范围为 0~1。

Slots

popup组件支持以下插槽

default

弹出窗口的内容。

Events

下面是popup组件的事件

close

当弹出窗口被关闭时触发

样式定制

由于popup组件只提供了基本样式,您可能需要根据自己需求进行样式定制。以下是一些常见的样式设置

弹出窗口的样式设置

.popup-content {
  width: 80%;
  max-width: 300rpx;
  background-color: #fff;
  padding: 20rpx;
  border-radius: 10rpx;
  box-shadow: 0 2rpx 5rpx rgba(0, 0, 0, 0.1);
  text-align: center;
}

遮罩层的样式设置

.popup-mask {
  background-color: rgba(0, 0, 0, 0.5);
}

总结

popup组件是Uni-app常用交互组件之一,可以用于实现弹出窗口功能。在使用该组件时,我们可以通过控制:show属性实现弹出窗口的显示与隐藏,也可以通过设置position属性来调整弹出窗口的位置。同时,我们也可以根据自己需求对弹出窗口和遮罩层进行样式定制,以实现更好的视觉效果

原文地址:https://blog.csdn.net/zzx262625/article/details/134685051

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任

如若转载,请注明出处:http://www.7code.cn/show_39266.html

如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱suwngjj01@126.com进行投诉反馈,一经查实,立即删除

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注