Button 按钮

常用的操作按钮。

基础用法

使用type、plain、round来定义按钮的样式。

展开代码

vue

<script lang="ts" setup>
import { Button } from 'wviewui'
</script>

<template>
  <div class="box">
    <div class="btn">
      <Button type="default">默认</Button>
      <Button type="primary">主要</Button>
      <Button type="success">成功</Button>
      <Button type="info">信息</Button>
      <Button type="warning">警告</Button>
      <Button type="danger">危险</Button>
    </div>

    <div class="btn">
      <Button type="default" plain>默认</Button>
      <Button type="primary" plain>主要</Button>
      <Button type="success" plain>成功</Button>
      <Button type="info" plain>信息</Button>
      <Button type="warning" plain>警告</Button>
      <Button type="danger" plain>危险</Button>
    </div>

    <div class="btn">
      <Button type="default" round>默认</Button>
      <Button type="primary" round>主要</Button>
      <Button type="success" round>成功</Button>
      <Button type="info" round>信息</Button>
      <Button type="warning" round>警告</Button>
      <Button type="danger" round>危险</Button>
    </div>
  </div>
</template>

<style lang="scss" scoped>
@import 'styles/index.scss';
</style>

禁用状态

你可以使用 disabled 属性来定义按钮是否被禁用

使用 disabled 属性来控制按钮是否为禁用状态。该属性同时接受一个 Boolean 类型的值

展开代码

vue

<script lang="ts" setup>
import { Button } from 'wviewui'
</script>

<template>
  <div class="box">
    <div class="btn">
      <Button type="default" disabled>默认</Button>
      <Button type="primary" disabled>主要</Button>
      <Button type="success" disabled>成功</Button>
      <Button type="info" disabled>信息</Button>
      <Button type="warning" disabled>警告</Button>
      <Button type="danger" disabled>危险</Button>
    </div>

    <div class="btn">
      <Button type="default" plain disabled>默认</Button>
      <Button type="primary" plain disabled>主要</Button>
      <Button type="success" plain disabled>成功</Button>
      <Button type="info" plain disabled>信息</Button>
      <Button type="warning" plain disabled>警告</Button>
      <Button type="danger" plain disabled>危险</Button>
    </div>

    <div class="btn">
      <Button type="default" round disabled>默认</Button>
      <Button type="primary" round disabled>主要</Button>
      <Button type="success" round disabled>成功</Button>
      <Button type="info" round disabled>信息</Button>
      <Button type="warning" round disabled>警告</Button>
      <Button type="danger" round disabled>危险</Button>
    </div>
  </div>
</template>

<style lang="scss" scoped>
@import 'styles/index.scss';
</style>

图标按钮

带图标的按钮可增强按钮的可玩性和欣赏性（有无文字均可）

展开代码

vue

<script setup lang="ts">
import { Button } from 'wviewui'
</script>

<template>
  <div class="box">
    <div class="btn">
      <Button icon="jiahao" type="primary">加号</Button>
      <Button icon="jianhao" type="success" plain>减号</Button>
      <Button icon="loading" type="warning"></Button>
      <Button icon="xiaoxi-zhihui" icon-position="right" type="danger" round>小米</Button>
      <Button icon="jurassic_info" icon-position="left">通知</Button>
    </div>
  </div>
</template>

<style lang="scss" scoped>
@import 'styles/index.scss';
</style>

加载中

点击按钮后进行数据加载操作，在按钮上显示加载状态。

展开代码

vue

<script setup lang="ts">
import { Button } from 'wviewui'
</script>

<template>
  <div class="box">
    <div class="btn">
      <Button type="primary" icon="loading" loading>载入中</Button>
    </div>
  </div>
</template>

<style lang="scss" scoped>
@import 'styles/index.scss';
</style>

调整尺寸

出了默认的大小，按钮组件还提供了额外的尺寸可供选择，以便适配不同的场景。

使用 size 属性额外配置尺寸，可使用 large 、small 和 mini 三种值。

展开代码

vue

<script lang="ts" setup>
import { Button } from 'wviewui'
</script>

<template>
  <div class="box">
    <div class="btn">
      <Button type="default" size="large">默认</Button>
      <Button type="primary" size="large">主要</Button>
      <Button type="success" size="large">成功</Button>
      <Button type="info" size="large">信息</Button>
      <Button type="warning" size="large">警告</Button>
      <Button type="danger" size="large">危险</Button>
    </div>

    <div class="btn">
      <Button type="default" plain size="small">默认</Button>
      <Button type="primary" plain size="small">主要</Button>
      <Button type="success" plain size="small">成功</Button>
      <Button type="info" plain size="small">信息</Button>
      <Button type="warning" plain size="small">警告</Button>
      <Button type="danger" plain size="small">危险</Button>
    </div>

    <div class="btn">
      <Button type="default" round size="mini">默认</Button>
      <Button type="primary" round size="mini">主要</Button>
      <Button type="success" round size="mini">成功</Button>
      <Button type="info" round size="mini">信息</Button>
      <Button type="warning" round size="mini">警告</Button>
      <Button type="danger" round size="mini">危险</Button>
    </div>
  </div>
</template>

<style lang="scss" scoped>
@import 'styles/index.scss';
</style>

Attributes

参数	说明	类型	可选值	默认值
size	尺寸	string	large / small / mini	—
type	类型	string	primary / success / warning / danger / info / default	—
plain	是否朴素按钮	boolean	—	false
round	是否圆角按钮	boolean	—	false
circle	是否圆形按钮	boolean	—	false
loading	是否加载中状态	boolean	—	false
disabled	是否禁用状态	boolean	—	false
icon	图标类名	string	—	—
autofocus	是否默认聚焦	boolean	—	false
native-type	原生 type 属性	string	button / submit / reset	button

Button 按钮 #

基础用法 #

禁用状态 #

图标按钮 #

加载中 #

调整尺寸 #

Attributes #

Button 按钮

基础用法

禁用状态

图标按钮

加载中

调整尺寸

Attributes