更新记录

1.0.5（2024-10-18） 下载此版本

chore: 修改预览图

1.0.4（2024-10-18） 下载此版本

feat: 修改secondary和tertiary配色

1.0.2（2024-10-18） 下载此版本

放弃vue2了咯咯们，同时兼容vue2/3会导致一堆warning，比如v-on="$listener"写法

平台兼容性

uni-app

其他

ikun-button

给咯咯们做的一套坤式风格按钮

效果展示

自适应宽度

<view class="title">自适应宽度</view>
<ikun-button @click="handlePrimaryClick">Primary</ikun-button>
<ikun-button type="secondary">Secondary</ikun-button>
<ikun-button type="success">Success</ikun-button>
<ikun-button type="danger">Danger</ikun-button>
<ikun-button type="warning">Warning</ikun-button>
<ikun-button disabled>Disabled</ikun-button>

块级按钮

<ikun-button type="primary" block @click="handlePrimaryClick">Primary</ikun-button>
<ikun-button type="secondary" block>Secondary</ikun-button>
<ikun-button type="success" block>Success</ikun-button>
<ikun-button type="danger" block>Danger</ikun-button>
<ikun-button type="warning" block>Warning</ikun-button>
<ikun-button disabled block>Disabled</ikun-button>

加载中

<ikun-button loading>Loading</ikun-button>

去掉圆角

<ikun-button type="primary" square>Square</ikun-button>

纯文字按钮

<ikun-button type="text">纯文字按钮</ikun-button>

按钮大小 (default和mini)

<ikun-button type="primary">默认</ikun-button>
<ikun-button type="primary" size="mini">mini</ikun-button>

完整示例页面

<template>
  <view style="padding: 10px">
    <view class="title">块级按钮</view>
    <ikun-button block @click="handlePrimaryClick">Primary</ikun-button>
    <ikun-button type="secondary" block>Secondary</ikun-button>
    <ikun-button type="tertiary" block>Tertiary</ikun-button>
    <ikun-button type="success" block>Success</ikun-button>
    <ikun-button type="danger" block>Danger</ikun-button>
    <ikun-button type="warning" block>Warning</ikun-button>
    <ikun-button disabled block>Disabled</ikun-button>
    <view class="title">自适应宽度</view>
    <ikun-button @click="handlePrimaryClick">Primary</ikun-button>
    <ikun-button type="secondary">Secondary</ikun-button>
    <ikun-button type="tertiary">Tertiary</ikun-button>
    <ikun-button type="success">Success</ikun-button>
    <ikun-button type="danger">Danger</ikun-button>
    <ikun-button type="warning">Warning</ikun-button>
    <ikun-button disabled>Disabled</ikun-button>
    <view class="title">加载中...</view>
    <ikun-button loading>Secondary</ikun-button>
    <view class="title">无圆角</view>
    <ikun-button type="primary" square>Square</ikun-button>
    <view class="title">纯文字按钮</view>
    <ikun-button type="text">纯文字按钮</ikun-button>
    <view class="title">按钮大小</view>
    <ikun-button type="primary">默认</ikun-button>
    <ikun-button type="primary" size="mini">mini</ikun-button>
  </view>
</template>

<script>
export default {
  methods: {
    handlePrimaryClick() {
      uni.showToast({
        title: 'Primary Button Clicked',
        icon: 'none'
      });
    }
  }
}
</script>

<style scoped>
    .title {
        padding: 10rpx;
    }
</style>