QinUi

# Button 按钮

按钮组件

# 基础用法

<template>
  <qinui-button content="基础用法" />
</template>

# 不同类型

<template>
  <div>
    <qinui-button content="默认" />
    <qinui-button content="主题" type="primary" />
    <qinui-button content="边框" type="border" />
    <qinui-button content="白色" type="white" />
  </div>
</template>

# 幽灵

设置 :ghost="true"

<template>
  <div style="background: green">
    <qinui-button content="默认" :ghost="true" />
    <qinui-button content="主题" type="primary" :ghost="true" />
    <qinui-button content="主题" type="white" :ghost="true" />
  </div>
</template>

# 不同大小

<template>
  <qinui-space placement="col" style="gap: 32rpx">
    <div>
      <qinui-button size="large" content="大号默认" />
      <qinui-button size="large" content="大号主题" type="primary" />
      <qinui-button size="large" content="大号白色" type="white" />
      <qinui-button size="large" content="大号边框" type="border" />
    </div>
    <div>
      <qinui-button size="small" content="小号默认" />
      <qinui-button size="small" content="小号主题" type="primary" />
      <qinui-button size="small" content="小号白色" type="white" />
      <qinui-button size="small" content="小号边框" type="border" />
    </div>
    <div>
      <qinui-button size="mini" content="迷你默认" />
      <qinui-button size="mini" content="迷你主题" type="primary" />
      <qinui-button size="mini" content="迷你白色" type="white" />
      <qinui-button size="mini" content="迷你边框" type="border" />
    </div>
  </qinui-space>
</template>

# icon

<template>
  <div>
    <qinui-button
      iconfontIconName="icon-yuyue"
      iconfontClassFont="iconfont"
      content="按钮"
    />
    <qinui-button
      iconfontIconName="icon-yuyue"
      iconfontClassFont="iconfont"
      type="primary"
      content="按钮"
    />
    <qinui-button
      iconfontIconName="icon-yuyue"
      iconfontClassFont="iconfont"
      type="white"
      content="按钮"
    />
    <qinui-button
      iconfontIconName="icon-yuyue"
      iconfontClassFont="iconfont"
      type="border"
      content="按钮"
    />
    <qinui-button
      iconfontIconName="icon-yuyue"
      iconfontClassFont="iconfont"
      ghost
      type="primary"
      content="幽灵按钮"
    />
    <qinui-button
      iconfontIconName="icon-yuyue"
      iconfontClassFont="iconfont"
      ghost
      type="white"
      content="幽灵按钮"
    />
    <qinui-button
      iconfontIconName="icon-yuyue"
      iconfontClassFont="iconfont"
      ghost
      content="幽灵按钮"
    />
  </div>
</template>

# 字体加粗

设置 :bold="true"

<template>
  <div>
    <qinui-button content="默认" :bold="true" />
    <qinui-button content="主题" type="primary" :bold="true" />
    <qinui-button content="白色" type="white" :bold="true" />
  </div>
</template>

# 禁用

设置 :disabled="true"

<template>
  <div>
    <qinui-button :disabled="true" content="按钮" />
    <qinui-button :disabled="true" type="primary" content="按钮" />
    <qinui-button disabled type="white" content="按钮" />
    <qinui-button :disabled="true" type="border" content="按钮" />
  </div>
</template>

# icon 在右边

<template>
  <div>
    <qinui-button
      iconfontIconName="icon-yuyue"
      iconPlacement="right"
      iconfontClassFont="iconfont"
      content="大按钮"
    />
    <qinui-button
      iconfontIconName="icon-yuyue"
      iconPlacement="right"
      iconfontClassFont="iconfont"
      type="primary"
      content="大按钮"
    />
    <qinui-button
      iconfontIconName="icon-yuyue"
      iconPlacement="right"
      iconfontClassFont="iconfont"
      type="white"
      content="大按钮"
    />
    <qinui-button
      iconfontIconName="icon-yuyue"
      iconPlacement="right"
      iconfontClassFont="iconfont"
      type="border"
      content="大按钮"
    />
  </div>
</template>

# 块级

设置 :block="true"

<template>
  <div>
    <qinui-button block content="按钮"></qinui-button>
    <qinui-button block type="primary" content="按钮"></qinui-button>
    <qinui-button block type="white" content="按钮"></qinui-button>
    <qinui-button block type="border" content="按钮"></qinui-button>
  </div>
</template>

# 圆形

<template>
  <div>
    <qinui-button
      shape="round"
      @click="onClickBtn"
      content="按钮"
    ></qinui-button>
    <qinui-button
      shape="round"
      type="primary"
      content="按钮"
    ></qinui-button>
    <qinui-button
      shape="round"
      type="white"
      content="按钮"
    ></qinui-button>
    <qinui-button shape="round" type="border" content="按钮"></qinui-button>
  </div>
</template>

# 没有圆角

设置 :radius="false"

<template>
  <div>
    <qinui-button :radius="false" content="按钮"></qinui-button>
    <qinui-button
      :radius="false"
      content="按钮"
      type="primary"
    ></qinui-button>
    <qinui-button
      :radius="false"
      content="按钮"
      type="white"
    ></qinui-button>
    <qinui-button
      :radius="false"
      content="按钮"
      type="border"
    ></qinui-button>
  </div>
</template>

# 加载中

设置 :loading="true"

<template>
  <div>
    <qinui-button :loading="true" content="按钮"></qinui-button>
    <qinui-button
      :loading="true"
      content="按钮"
      type="primary"
    ></qinui-button>
    <qinui-button
      :loading="true"
      content="按钮"
      type="white"
    ></qinui-button>
    <qinui-button
      :loading="true"
      content="按钮"
      type="border"
    ></qinui-button>
  </div>
</template>

# 按钮颜色

设置 :loading="true"

<template>
  <div>
    <qinui-button
      iconfontIconName="icon-yuyue"
      iconfontClassFont="iconfont"
      size="large"
      color="green"
      content="有颜色"
    />
    <qinui-button
      iconfontIconName="icon-yuyue"
      iconfontClassFont="iconfont"
      color="green"
      type="primary"
      content="有颜色"
    />
    <qinui-button
      iconfontIconName="icon-yuyue"
      iconfontClassFont="iconfont"
      color="green"
      type="white"
      content="有颜色"
    />
    <qinui-button
      iconfontIconName="icon-yuyue"
      iconfontClassFont="iconfont"
      color="green"
      type="border"
      content="有颜色"
    />
  </div>
</template>

# API

# Props

参数 说明 类型 默认值 可选值
content 按钮内容 String -
type 按钮类型 String default default | border | primary | white
size 大小 String default default | large | small | mini
disabled 是否禁用 Boolean false -
block 是否块级 Boolean false -
bold 是否文字加粗 Boolean false -
ghost 是否幽灵按钮 Boolean false -
radius 是否圆角 Boolean true -
loading 是否加载中 Boolean false -
shape 按钮形状 String - square | round
color 颜色 String -
disabledColor 禁用颜色 String -
iconPlacement icon 方向 String left left | right
iconfontClassFont iconfont 的字体名字 String -
iconfontIconName icon 名字 String -
diy-style 自定义外部样式 string - -

# Events

事件名 说明 回调参数
@click 点击事件 -

← Image 图片 →