更新记录

1.0.0.1（2025-12-26） 下载此版本

更新uview-plus

1.0.0（2025-12-26） 下载此版本

master

平台兼容性

uni-app(4.13)

其他

安装

在市场导入xf-popupuni_modules版本的即可，无需import

组件关联说明

• xf-scss辅助样式;
• xf-ts辅助样式;
• xf-icon;
• xf-button;
• uview-plus组件库;

代码演示

插件使用

• 位于 uni_modules/xf-popup/components/xf-popup
• 导入插件后需通过插槽自定义内容

<xf-popup>
    <view class="xf-col" style="height: 300px;">
        <text>自定义选项内容</text>
    </view>
</xf-popup>

基本用法

• 使用组件代码如下：

  <template>
  <view class="xf-col" >
      <xf-button style="margin-top: 20px;" round type="primary" text="打开基础弹窗" @click="showPopup('none')" />
      <xf-button style="margin-top: 20px;"  round type="primary" text="打开单按钮弹窗" @click="showPopup('single')" />
      <xf-button style="margin-top: 20px;" round type="primary" text="打开双按钮弹窗" @click="showPopup('both')" />
  </view>
  
  <xf-popup v-model:show="showBasicModal" :type="popupType" tip="副标题">
      <view class="xf-col" style="height: 300px;">
          <text>这是弹窗的内容区域，可以放置任何内容。</text>
      </view>
      <template #footerBtn>
          <view style="margin-right: 20px;">
              <xf-button type="image" iconName="edit" :iconSize='26'/>    
          </view>
      </template>
  </xf-popup>
  </template>

• 基础用法说明：属性type可选值none/single/both对应表示底部按钮数量，插槽footerBtn,必须single/both生效,自定义底部按钮右边选项内容;

  <script setup lang="ts">
  import { ref } from 'vue';
  let showBasicModal = ref(false)
  let popupType = ref<String>("none")
  
  function showPopup(type : String) {
      popupType.value = type
      showBasicModal.value = true
  }
  </script>

API

Props

事件 Emits

插槽 slot