Button

这是一个按钮

基础用法

通过 theme 定义按钮主题颜色

<template>
  <v-space wrap>
    <v-button>Default</v-button>
    <v-button theme="primary">
      Primary
    </v-button>
    <v-button theme="success">
      Success
    </v-button>
    <v-button theme="error">
      Error
    </v-button>
    <v-button theme="warning">
      Warning
    </v-button>
  </v-space>
</template>

文字按钮

使用 text 定义文本按钮（低强调）。文本按钮通常用于不太重要的操作

<template>
  <v-space wrap>
    <v-button text>
      Default
    </v-button>
    <v-button text theme="primary">
      Primary
    </v-button>
    <v-button text theme="success">
      Success
    </v-button>
    <v-button text theme="error">
      Error
    </v-button>
    <v-button text theme="warning">
      Warning
    </v-button>
  </v-space>
</template>

边框按钮

使用 outlined 定义轮廓按钮（中强调）。由于轮廓的缘故，比文本按钮更强调。

<template>
  <v-space wrap>
    <v-button outlined>
      Default
    </v-button>
    <v-button outlined theme="primary">
      Primary
    </v-button>
    <v-button outlined theme="success">
      Success
    </v-button>
    <v-button outlined theme="error">
      Error
    </v-button>
    <v-button outlined theme="warning">
      Warning
    </v-button>
  </v-space>
</template>

调整尺寸

使用 size 调整按钮尺寸, 可使用small,medium,large三种值

<template>
  <v-space wrap>
    <v-button size="small" theme="primary">
      Small
    </v-button>
    <v-button size="medium" theme="primary">
      Medium
    </v-button>
    <v-button size="large" theme="primary">
      Large
    </v-button>
  </v-space>
</template>

圆形按钮

使用 round 定义圆形按钮。

<template>
  <v-space wrap>
    <v-button round>
      Default
    </v-button>
    <v-button round theme="primary">
      Primary
    </v-button>
    <v-button round theme="success">
      Success
    </v-button>
    <v-button round theme="error">
      Error
    </v-button>
    <v-button round theme="warning">
      Warning
    </v-button>
  </v-space>
</template>

凸起按钮

使用 raised 定义凸起按钮。

<template>
  <v-space wrap>
    <v-button raised>
      Default
    </v-button>
    <v-button raised theme="primary">
      Primary
    </v-button>
    <v-button raised theme="success">
      Success
    </v-button>
    <v-button raised theme="error">
      Error
    </v-button>
    <v-button raised theme="warning">
      Warning
    </v-button>
  </v-space>
</template>

禁用状态

使用 disabled 禁用按钮。

<template>
  <v-space direction="column">
    <v-space wrap>
      <v-button disabled>
        Default
      </v-button>
      <v-button disabled theme="primary">
        Primary
      </v-button>
      <v-button disabled theme="success">
        Success
      </v-button>
      <v-button disabled theme="error">
        Error
      </v-button>
      <v-button disabled theme="warning">
        Warning
      </v-button>
    </v-space>
  </v-space>
</template>

API

button 属性

属性名	说明	类型	默认值
theme	主题色	enum	default
size	按钮大小	enum	medium
round	是否为圆形按钮	boolean	false
disabled	是否为禁用状态	boolean	false
text	是否为文本按钮	boolean	false
outlined	是否为边框按钮	boolean	false
raised	是否为凸起按钮	boolean	false

button 插槽

插槽名	描述
default	默认插槽