uni-app:实现右侧弹窗

效果:

代码:

html 复制代码
<template>
  <view class="container">
    <button @click="showModal = true">点击按钮</button>
    <view class="modal-overlay" v-if="showModal" @click="closeModal"></view>
    <view class="modal-container" :class="{ active: showModal }">
      <!-- 右侧弹窗的内容 -->
      <view class="modal-content">
        <!-- 内容区域 -->
        <text>这是右侧弹窗的内容</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      showModal: false, // 控制弹窗显示与隐藏
    };
  },
  methods: {
    closeModal() {
      this.showModal = false;
    },
  },
};
</script>

<style>
.container {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999;
}

.modal-container {
  position: fixed;
  top: 0;
  right: -100%; /* 初始时隐藏弹窗 */
  width: 300px;
  height: 100%;
  background-color: #fff;
  z-index: 1000;
  transition: right 0.3s ease;
}

.modal-container.active {
  right: 0; /* 显示弹窗 */
}

.modal-content {
  padding: 20px;
}
</style>
相关推荐
编程猪猪侠21 分钟前
Tailwind CSS 自定义工具类与主题配置指南
前端·css
qhd吴飞25 分钟前
mybatis 差异更新法
java·前端·mybatis
YGY Webgis糕手之路1 小时前
OpenLayers 快速入门(九)Extent 介绍
前端·经验分享·笔记·vue·web
患得患失9491 小时前
【前端】【vueDevTools】使用 vueDevTools 插件并修改默认打开编辑器
前端·编辑器
ReturnTrue8681 小时前
Vue路由状态持久化方案,优雅实现记住表单历史搜索记录!
前端·vue.js
UncleKyrie1 小时前
一个浏览器插件帮你查看Figma设计稿代码图片和转码
前端
遂心_1 小时前
深入解析前后端分离中的 /api 设计:从路由到代理的完整指南
前端·javascript·api
你听得到111 小时前
Flutter - 手搓一个日历组件,集成单日选择、日期范围选择、国际化、农历和节气显示
前端·flutter·架构
风清云淡_A1 小时前
【REACT18.x】CRA+TS+ANTD5.X封装自定义的hooks复用业务功能
前端·react.js
@大迁世界1 小时前
第7章 React性能优化核心
前端·javascript·react.js·性能优化·前端框架