更新记录

1.0.1（2023-05-30）

1. 按钮文字颜色、背景色可自定义
2. 支持暗黑模式

1.0.0（2023-05-23）

• 高仿 iOS ActivityView 二级弹窗页面
• 通用组件，多平台兼容
• 适配小程序胶囊按钮
• 有动画效果
• 窗口头部高斯模糊

平台兼容性

activity-view-page

介绍

时常觉得 iOS 这个二级弹窗页面非常实用，所以尝试做了一下，希望大家喜欢。个人觉得比较适用于比较多内容的弹窗场景。

• 高仿 iOS ActivityView 二级弹窗页面
• 通用组件，多平台兼容
• 适配微信小程序、字节跳动小程序胶囊按钮
• 支持暗黑模式
• 窗口顶部高斯模糊
• 缩放动画效果

预览

兼容

使用

1. 引用

// 更多可查看 src/pages/index 页面
import ActivityViewPage from "../../components/activity-view-page/index.vue";

2. 在页面中即可使用组件

<!-- 更多可查看 src/pages/index 页面 -->
<ActivityViewPage
  :visible="visible"
  title="弹窗"
  @cancel="cancel"
  @confirm="confirm"
>
  <view style="padding-top: 60px">
    <view>这里是页面内容</view>
    <button @click="toggle">打开弹窗</button>
  </view>
  <template #activity-view>
    <view> 这里是弹窗内容 </view>
  </template>
</ActivityViewPage>

注意点

1. 使用此插件的页面最好设置自定义导航栏 "navigationStyle": "custom"

开发

1. 安装依赖 npm install
2. 构建命令 npm run dev

属性

事件