Button按钮

✨简单用法

默认按钮 下载 右侧图标

使用icon属性设置图标，icon-position属性设置图标环绕文字位置。

<wb-button>默认按钮</wb-button>
<wb-button icon="download">下载</wb-button>
<wb-button icon="settings" icon-position="right">右侧图标</wb-button>

显示代码 复制代码 复制代码

✨加载中

默认加载 点击加载

要设置为 loading 状态，只要设置loading属性为true即可。

<template>
  <div>
      <wb-button loading>默认加载</wb-button>
      <wb-button icon="settings" :loading="loading" 
      @click="loading=!loading">点击加载</wb-button>
  </div>
</template>
<script>
export default {
  data() {
    return {
        loading: false
    }
  }
}
</script>

显示代码 复制代码 复制代码

✨按钮组

上一页 下一页

使用<wb-button-group>标签来嵌套你的按钮。

<wb-button-group>
    <wb-button icon="left">上一页</wb-button>
    <wb-button icon="right" icon-position="right">下一页</wb-button>
</wb-button-group>
<wb-button-group>
    <wb-button icon="thumbs-up"></wb-button>
    <wb-button icon="info"></wb-button>
    <wb-button icon="settings"></wb-button>
</wb-button-group>
    

显示代码 复制代码 复制代码

📌 Attributes

参数	说明	类型	可选值	默认值
icon	图标类名	string	—	—
iconPosition	图标位置	string	left / right	left
loading	是否加载中效果	boolean	—	false