uni-app modal 弹出浮层的使用方法

发布于 1周前 作者 yibo5220 来自 Uni-App

uni-app modal 弹出浮层的使用方法

代码示例

.mui-modal {top:300px !important;}      
.mui-content{overflow-y:auto;}

.mui-modal {top:300px !important;} 用来控制距离顶部高度
.mui-content{overflow-y:auto;} 用来控制内容溢出后的自动上下滚动

就是浮层的背景遮罩效果暂时还不知道怎么弄

mui是好东西，但是文档真的太弱了，这个modal 都是藏在例子中的。。。。

再提供下这个例子的路径 ：examples/modals.html


Harmonyos Next教程
1 回复

在uni-app中，modal 组件用于弹出浮层显示内容，常用于提示信息、确认操作等场景。以下是一个简单的示例，展示了如何在uni-app中使用modal组件。

1. 在页面的模板文件中使用 modal 组件

首先，在你的页面的模板文件（如 .vue 文件中的 <template> 部分）中，添加 modal 组件。

<template>
  <view>
    <button @click="showModal">显示模态框</button>
    
    <modal
      v-if="modalVisible"
      :title="modalTitle"
      :content="modalContent"
      @confirm="handleConfirm"
      @cancel="handleCancel"
    >
    </modal>
  </view>
</template>

2. 在页面的脚本文件中定义数据和方法

然后，在页面的脚本文件（如 .vue 文件中的 <script> 部分）中，定义控制 modal 显示与隐藏的数据以及对应的方法。

<script>
export default {
  data() {
    return {
      modalVisible: false, // 控制模态框的显示与隐藏
      modalTitle: '提示', // 模态框的标题
      modalContent: '您确定要继续吗？', // 模态框的内容
    };
  },
  methods: {
    // 显示模态框
    showModal() {
      this.modalVisible = true;
    },
    // 处理确认按钮点击事件
    handleConfirm() {
      console.log('用户点击了确认');
      this.modalVisible = false; // 关闭模态框
      // 可以在这里添加确认后的逻辑
    },
    // 处理取消按钮点击事件
    handleCancel() {
      console.log('用户点击了取消');
      this.modalVisible = false; // 关闭模态框
      // 可以在这里添加取消后的逻辑
    },
  },
};
</script>

3. 在页面的样式文件中添加样式（可选）

如果需要对模态框进行样式定制，可以在页面的样式文件（如 .vue 文件中的 <style> 部分）中添加相应的样式。

<style scoped>
/* 示例：自定义模态框的样式 */
modal {
  background-color: rgba(0, 0, 0, 0.6);
}
modal-content {
  color: #fff;
}
</style>

总结

以上示例展示了如何在uni-app中使用modal组件弹出浮层，并处理用户点击确认或取消按钮后的逻辑。通过v-if指令控制模态框的显示与隐藏，通过@confirm和@cancel事件处理用户交互。你可以根据实际需求调整模态框的标题、内容以及相应的处理逻辑。

回到顶部