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>
相关推荐
GIS之路10 分钟前
GeoTools 结合 OpenLayers 实现属性查询(二)
前端·信息可视化
烛阴18 分钟前
一文搞懂 Python 闭包:让你的代码瞬间“高级”起来!
前端·python
AA-代码批发V哥22 分钟前
HTML之表单结构全解析
前端·html
聪聪的学习笔记33 分钟前
【1】确认安装 Node.js 和 npm版本号
前端·npm·node.js
小磊哥er1 小时前
【前端工程化】你知道前端编码规范包含哪些内容吗
前端
菌菇汤1 小时前
uni-app实现单选,多选也能搜索,勾选,选择,回显
前端·javascript·vue.js·微信小程序·uni-app·app
Ramos丶1 小时前
【ABAP】 从无到有 新建一个Webdynpro程序
java·前端·javascript
qq_411671981 小时前
vue3 的模板引用ref和$parent
前端·javascript·vue.js
清幽竹客3 小时前
vue-37(模拟依赖项进行隔离测试)
前端·vue.js
vvilkim3 小时前
Nuxt.js 页面与布局系统深度解析:构建高效 Vue 应用的关键
前端·javascript·vue.js