更新记录

1.0.0.4（2025-12-25） 下载此版本

点击修改

1.0.0.3（2025-12-25） 下载此版本

master

1.0.0.2（2025-12-25） 下载此版本

master

平台兼容性

uni-app(4.13)

安装

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

组件关联说明

• 关联辅助样式 xf-scss辅助样式; xf-ts辅助样式;
• 关联组件 xf-icon图标库;

代码演示

插件使用

• 位于 uni_modules/xf-button/components/xf-button
• 导入插件后直接使用

<xf-button />

基本用法

• 使用组件代码如下：

  <template>
  <view class="xf-full-width" style="background-color: #FFF; padding: 20px;">
      <xf-button type="primary" size="min" text="按钮-测试宽度自适应" @click="clicked" />
      <view class="xf-col b-mt20" style="width: 50%;">
          <text>图标按钮</text>
          <view class="xf-row xf-full-width b-mt20 xf-flex-space-between">
              <xf-button type="image" iconName="rotate" :iconSize='30' @click="clicked" />
              <xf-button type="image" iconName="rotate" :iconSize='30' disabled/>
          </view>
      </view>
  
      <view class="xf-col b-mt20" style="width: 50%;">
          <text>主按钮</text>
          <view class="xf-row xf-full-width b-mt20 xf-flex-space-between">
              <xf-button type="primary" size="min" text="按钮" @click="clicked" />
              <xf-button type="primary" size="min" text="按钮" disabled />
          </view>
      </view>
  
      <view class="xf-col b-mt20" style="width: 50%;">
          <text>中型主按钮</text>
          <view class="xf-row xf-full-width b-mt20 xf-flex-space-between">
              <xf-button type="primary" size="middle" text="按钮" @click="clicked" />
              <xf-button type="primary" size="middle" text="按钮" disabled />
          </view>
      </view>
  
      <view class="xf-col b-mt20">
          <text>次按钮</text>
          <view class="xf-row xf-full-width b-mt20 xf-flex-space-between" style="width: 50%;">
              <xf-button type="secondary" size="min" text="按钮" />
              <xf-button type="secondary" size="min" text="按钮" disabled />
          </view>
      </view>
  
      <view class="xf-col b-mt20">
          <text>中型次按钮</text>
          <view class="xf-row xf-full-width b-mt20 xf-flex-space-between" style="width: 50%;">
              <xf-button type="secondary" size="middle" text="按钮" />
              <xf-button type="secondary" size="middle" text="按钮" disabled />
          </view>
  
      </view>
  
      <view class="xf-col b-mt20">
          <text>普通按钮</text>
          <view class="xf-row xf-full-width b-mt20 xf-flex-space-between" style="width: 50%;">
              <xf-button type="normal" size="min" text="按钮1" />
              <xf-button type="normal" size="min" text="按钮" disabled />
          </view>
      </view>
      <view class="xf-col b-mt20">
          <text>文字按钮</text>
          <view class="xf-row xf-full-width b-mt20 xf-flex-space-between" style="width: 50%;">
              <xf-button type="text" size="min" text="按钮" />
              <xf-button type="text" size="min" text="按钮" disabled />
          </view>
      </view>
  
      <view class="xf-col b-mt20 xf-full-width">
          <text>底部按钮</text>
          <xf-button isFull text="底部按钮" />
      </view> 
  
      <view class="xf-col b-mt20 xf-full-width">
          <text>底部按钮</text>
          <view class="xf-row xf-full-width b-mt20">
              <xf-button class="xf-full-flex" isFull type="normal" text="底部按钮1" />
              <xf-button class="xf-full-flex" isFull style="margin-left: 10px !important;" type="primary" text="底部按钮2" />
          </view>
      </view>
  
      <view class="xf-col b-mt20">
          <text>加载按钮</text>
          <view class="xf-row xf-full-width b-mt20">
              <xf-button type="primary" size="min" text="按钮1" loading />
              <xf-button color='#000' :fontSize='14' :height="40" style="margin-left: 20px;" type="primary" size="min"
                  loading canCustom text="按钮2" />
          </view>
      </view>
  
  </view>
  </template>

API

Props

事件 Emits