uniapp uni-popup type属性警告且不生效问题

### 如何在Vue3中使用UniApp的uni-popup组件 #### 安装依赖项 为了能够在项目中使用 `uni-popup` 组件，首先需要安装 UniApp 的 CLI 工具以及初始化一个新的 UniApp 项目。如果已经拥有一个现成的 Vue3 和 UniApp 集成环境，则可以跳过这一步。 对于新项目的创建，可以通过命令行工具执行如下操作来快速搭建开发框架[^1]: ```bash vue create my-project-name cd my-project-name npm install @dcloudio/uni-app -S ``` #### 导入并注册uni-popup组件 为了让应用程序能够识别和渲染 `uni-popup`，需将其导入到页面或全局配置文件内，并完成必要的声明工作。通常情况下，在单页应用(SPA)模式下推荐局部引入的方式；而对于多页面(MPA)，则更适合采用全局方式加载该插件[^2]。 以下是通过脚本标签形式直接嵌套于目标.vue 文件中的实例代码片段： ```html <template> <!-- 使用弹窗 --> </template> <script setup lang="ts"> import { ref } from 'vue'; // 局部注册 uni-popup 组件 import Popup from '@/components/uni-popup/uni-popup.vue'; const showPopup = () => { popupRef.value.open(); }; const closePopup = () => { popupRef.value.close(); }; const popupRef = ref(null); </script> <template> <view class="content"> <button type="primary" @click="showPopup">显示popup</button> <Popup ref="popupRef"></Popup> </view> </template> ``` 上述例子展示了如何定义两个方法 (`showPopup`, `closePopup`) 来控制弹层的状态切换逻辑，同时也说明了怎样利用模板语法绑定事件处理器实现交互功能[^3]。 #### 自定义样式与属性设置 除了基本的功能外，还可以根据实际需求调整 `uni-popup` 外观特性及其行为参数。比如改变背景颜色、指定动画效果类型或是设定初始宽度高度等。这些自定义选项都可以作为 props 传递给子组件来进行个性化定制[^4]。 例如修改默认关闭按钮图标位置： ```html <Popup :mask-closeable="false" position="bottom" custom-style="border-radius: 8px;" title="提示信息" icon-position="left"> </Popup> ```