更新记录
1.0.0(2025-12-26)
下载此版本
master
平台兼容性
uni-app(4.13)
| Vue2 |
Vue3 |
Chrome |
Safari |
app-vue |
app-nvue |
Android |
iOS |
鸿蒙 |
| √ |
√ |
√ |
√ |
√ |
- |
√ |
√ |
√ |
| 微信小程序 |
支付宝小程序 |
抖音小程序 |
百度小程序 |
快手小程序 |
京东小程序 |
鸿蒙元服务 |
QQ小程序 |
飞书小程序 |
快应用-华为 |
快应用-联盟 |
| √ |
- |
- |
- |
- |
- |
- |
- |
- |
- |
- |
其他
安装
在市场导入xf-po-right-modaluni_modules版本的即可,无需import
组件关联说明
代码演示
插件使用
- 位于 uni_modules/xf-popup/components/xf-popup
- 导入插件后通过插槽自定义引入内容
<xf-po-right-modal v-model:show="showRightModal">
<text>自定义内容</text>
</xf-po-right-modal>
基本用法
- 使用组件代码如下:
<template>
<view class="xf-col">
<xf-button style="margin-top: 20px;" round type="primary" text="xfRightModal" @click="showRightModal = true" />
</view>
<xf-po-right-modal v-model:show="showRightModal">
<text v-for="(item,index) in 10" :key="index">这是弹窗的内容区域,可以放置任何内容</text>
</xf-po-right-modal>
</template>
import { ref } from 'vue';
let showRightModal = ref(false)
## API
### Props
| 属性名 | 说明 | 类型 | 默认值 |
| --------------------------| ------------------------ | ---------------- | ------------ |
| v-model:show | 是否展示弹窗 | <em>boolean</em> | `false` |
| title | 弹出层标题 | <em>string</em> | `标题` |
| width | 占横屏的百分比 | <em>`number|string`</em> | `90` |
| showFooter | 是否显示底部按钮 | <em>boolean</em> | `true` |
| leftBtnText | 左边按钮name | <em>string</em> | `重置` |
| rightBtnText | 右边按钮name | <em>string</em> | `确定` |
### 事件 Emits
| 事件名 | 说明 | 返回值 |
| -------- | --------------------------------------------------------------| ------|
| reset | 点击左边按钮事件 | |
| confirm | 点击右边确认按钮事件 | |
### 插槽 slot
| 名称 | 说明 |
| ---------------- | --------------------------------------------------------------|
| | 中间自定义内容 |