Button 按钮

常用的操作按钮

基础用法

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

显示代码

vue

<template>
  <div class="button-basic-defalut">
    <ued-button>默认按钮</ued-button>
    <ued-button type="primary">主要按钮</ued-button>
    <ued-button type="success">成功按钮</ued-button>
    <ued-button type="warning">警告按钮</ued-button>
    <ued-button type="danger">危险按钮</ued-button>
    <ued-button type="info">信息按钮</ued-button>
  </div>

  <div class="button-basic-plain">
    <ued-button plain>默认按钮</ued-button>
    <ued-button type="primary" plain>主要按钮</ued-button>
    <ued-button type="success" plain>成功按钮</ued-button>
    <ued-button type="warning" plain>警告按钮</ued-button>
    <ued-button type="danger" plain>危险按钮</ued-button>
    <ued-button type="info" plain>信息按钮</ued-button>
  <div>

  <div class="button-basic-round">
    <ued-button round>默认按钮</ued-button>
    <ued-button type="primary" round>主要按钮</ued-button>
    <ued-button type="success" round>成功按钮</ued-button>
    <ued-button type="warning" round>警告按钮</ued-button>
    <ued-button type="danger" round>危险按钮</ued-button>
    <ued-button type="info" round>信息按钮</ued-button>
  </div>
  <div class="button-basic-circle">
    <ued-button :icon="Plus" circle />
    <ued-button type="primary" :icon="Plus" circle />
    <ued-button type="success" :icon="Plus" circle />
    <ued-button type="warning" :icon="Plus" circle />
    <ued-button type="danger" :icon="Plus" circle />
    <ued-button type="info" :icon="Plus" circle />
  </div>
   <div class="button-basic-icon">
    <ued-button circle>
      <ued-icon>
        <Plus/>
      </ued-icon>
    </ued-button>
    <ued-button type="primary" circle>
      <ued-icon>
        <Plus/>
      </ued-icon>
    </ued-button>
    <ued-button type="success" circle>
      <ued-icon>
        <Plus/>
      </ued-icon>
    </ued-button>
    <ued-button type="warning" circle>
      <ued-icon>
        <Plus/>
      </ued-icon>
    </ued-button>
    <ued-button type="danger" circle>
      <ued-icon>
        <Plus/>
      </ued-icon>
    </ued-button>
    <ued-button type="info" circle>
      <ued-icon>
        <Plus/>
      </ued-icon>
    </ued-button>
  </div>
</template>
<script lang="ts" setup>
import { Plus } from '@ued-plus/components'
</script>

禁用状态

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

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

显示代码

vue

<template>
  <div class="button-disabled-defalut">
    <ued-button disabled>默认按钮</ued-button>
    <ued-button type="primary" disabled>主要按钮</ued-button>
    <ued-button type="success" disabled>成功按钮</ued-button>
    <ued-button type="warning" disabled>警告按钮</ued-button>
    <ued-button type="danger" disabled>危险按钮</ued-button>
    <ued-button type="info" disabled>信息按钮</ued-button>
  </div>

  <div class="button-disabled-plain">
    <ued-button disabled plain>默认按钮</ued-button>
    <ued-button type="primary" disabled plain>主要按钮</ued-button>
    <ued-button type="success" disabled plain>成功按钮</ued-button>
    <ued-button type="warning" disabled plain>警告按钮</ued-button>
    <ued-button type="danger" disabled plain>危险按钮</ued-button>
    <ued-button type="info" disabled plain>信息按钮</ued-button>
  <div>

</template>

链接按钮

显示代码

vue

<template>
  <div class="button-link-defalut">
    <ued-button link>默认按钮</ued-button>
    <ued-button type="primary" link>主要按钮</ued-button>
    <ued-button type="success" link>成功按钮</ued-button>
    <ued-button type="warning" link>警告按钮</ued-button>
    <ued-button type="danger" link>危险按钮</ued-button>
    <ued-button type="info" link>信息按钮</ued-button>
  </div>

  <div class="button-link-disbaled">
    <ued-button link disabled>默认按钮</ued-button>
    <ued-button type="primary" link disabled>主要按钮</ued-button>
    <ued-button type="success" link disabled>成功按钮</ued-button>
    <ued-button type="warning" link disabled>警告按钮</ued-button>
    <ued-button type="danger" link disabled>危险按钮</ued-button>
    <ued-button type="info" link disabled>信息按钮</ued-button>
  <div>

</template>

按钮尺寸

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

显示代码

vue

<template>
	<div class="button-content button-size">
		<div class="button-size-show">
			<ued-button size="large">默认按钮</ued-button>
			<ued-button>默认按钮</ued-button>
			<ued-button size="small">默认按钮</ued-button>
		</div>
		<div class="button-size-show">
			<ued-button size="large" round>默认按钮</ued-button>
			<ued-button round>默认按钮</ued-button>
			<ued-button size="small" round>默认按钮</ued-button>
		</div>
	</div>
</template>

Tag

自定义元素标签。例如，按钮，div，路由链接，nuxt链接

div

显示代码

vue

<template>
	<div class="button-content button-tag">
		<div class="button-tag-defalut">
			<ued-button>默认按钮</ued-button>
			<ued-button tag="div">div</ued-button>
			<ued-button
				class="vp-raw"
				type="primary"
				tag="a"
				href="https://github.com/bin-K/ued-plus"
				target="_blank"
				rel="noopener noreferrer"
			>
				a
			</ued-button>
		</div>
	</div>
</template>

文字按钮

没有边框和背景色的按钮。

显示代码

vue

<template>
	<div class="button-content button-text">
		<div class="button-text-defalut">
			<ued-button
				v-for="item in buttonType"
				:key="item.type"
				:type="item.type"
				text
			>
				{{ item.text }}
			</ued-button>
		</div>
		<div class="button-text-bg">
			<ued-button
				v-for="item in buttonType"
				:key="item.type"
				:type="item.type"
				text
				bg
			>
				{{ item.text }}
			</ued-button>
		</div>
		<div class="button-text-disabled">
			<ued-button
				v-for="item in buttonType"
				:key="item.type"
				:type="item.type"
				text
				disabled
			>
				{{ item.text }}
			</ued-button>
		</div>
	</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
const buttonType = ref([
	{ type: '', text: '默认按钮' },
	{ type: 'primary', text: '主要按钮' },
	{ type: 'success', text: '成功按钮' },
	{ type: 'warning', text: '警告按钮' },
	{ type: 'danger', text: '危险按钮' },
	{ type: 'info', text: '信息按钮' },
])
</script>

Icon用法

使用 icon 可以配置按钮icon。可以包裹 ued-icon 组件配置按钮icon

TIP

不建议直接使用svg组件,这需要自己设置相关属性

显示代码

vue

<template>
	<div class="button-icon-defalut">
		<ued-button
			v-for="item in buttonType"
			:key="item.type"
			:type="item.type"
			:icon="Plus"
		>
			{{ item.text }}
		</ued-button>
	</div>
	<div class="button-icon-defalut">
		<ued-button v-for="item in buttonType" :key="item.type" :type="item.type">
			<ued-icon>
				<Plus />
			</ued-icon>
			{{ item.text }}
		</ued-button>
	</div>
</template>

<script lang="ts" setup>
import { Plus } from '@ued-plus/components'
import { ref } from 'vue'
const buttonType = ref([
	{ type: '', text: '默认按钮' },
	{ type: 'primary', text: '主要按钮' },
	{ type: 'success', text: '成功按钮' },
	{ type: 'warning', text: '警告按钮' },
	{ type: 'danger', text: '危险按钮' },
	{ type: 'info', text: '信息按钮' },
])
</script>

loading 加载状态

点击按钮来加载数据，并向用户反馈加载状态。

通过设置 loading 属性为 true 来显示加载中状态。

TIP

您可以使用icon插槽或 loadingIcon属性自定义您的loading图标 icon插槽优先级高于loadingIcon属性

显示代码

vue

<template>
	<div class="button-content button-loading">
		<div class="button-loading-defalut">
			<ued-button type="primary" loading>加载中</ued-button>
			<ued-button type="primary" loading :loading-icon="Plus">
				加载中
			</ued-button>
			<ued-button type="primary" loading>
				<template #icon>
					<CirclePlus />
				</template>
				加载中
			</ued-button>
		</div>
	</div>
</template>

<script lang="ts" setup>
import { CirclePlus, Plus } from '@ued-plus/components'
</script>

按钮组

以按钮组的方式出现，常用于多项类似操作。

使用 <ued-button-group> 对多个按钮分组。

使用 size type 可以设置按钮组内按钮的 size 和 type,优先级高于原按钮的 size 和 type

显示代码

vue

<template>
	<div class="button-group-defalut">
		<ued-button-group>
			<ued-button type="primary" :icon="Minus">主要按钮</ued-button>
			<ued-button type="primary">
				主要按钮<ued-icon class="ued-icon--right"><Plus /></ued-icon>
			</ued-button>
		</ued-button-group>
		<ued-button-group size="small">
			<ued-button type="success" :icon="Minus">成功按钮</ued-button>
			<ued-button type="success">
				成功按钮<ued-icon class="ued-icon--right"><Plus /></ued-icon>
			</ued-button>
		</ued-button-group>
	</div>
	<div class="button-group-round">
		<ued-button-group type="warning">
			<ued-button :icon="Minus" round> 警告按钮 </ued-button>
			<ued-button round>
				警告按钮<ued-icon class="ued-icon--right"><Plus /></ued-icon>
			</ued-button>
		</ued-button-group>
	</div>
	<div class="button-group-circle">
		<ued-button-group type="danger">
			<ued-button :icon="Search" circle />
			<ued-button>
				<ued-icon name="Message" circle />
			</ued-button>
			<ued-button circle>
				<ued-icon>
					<Delete />
				</ued-icon>
			</ued-button>
		</ued-button-group>
	</div>
	<div class="button-group-icon">
		<ued-button-group type="info">
			<ued-button :icon="Search" />
			<ued-button>
				<ued-icon name="Message" />
			</ued-button>
			<ued-button>
				<ued-icon>
					<Delete />
				</ued-icon>
			</ued-button>
		</ued-button-group>
	</div>
</template>

<script lang="ts" setup>
import { Minus, Search } from '@ued-plus/components'
</script>

Button API

属性

属性名	说明	类型	默认值
size	尺寸	`large`/`default`/`small`	-
type	类型	`default`/`success`/`warning`/`danger`/`info`	-
plain	是否为朴素按钮	`boolean`	false
text	是否为文字按钮	`boolean`	false
bg	是否显示文字按钮背景颜色	`boolean`	false
link	是否为链接按钮	`boolean`	false
round	是否为圆角按钮	`boolean`	false
circle	是否为圆形按钮	`boolean`	false
loading	是否为加载中状态	`boolean`	false
loading-icon	自定义加载中状态图标组件	`Component`	false
disabled	按钮是否为禁用状态	`Boolean`	false
icon	图标组件	`Component`	false
autofocus	原生 `autofocus` 属性	`boolean`	false
tag	自定义元素标签	`String`/`Component`	button

插槽

插槽名	说明
defalut	自定义默认内容
icon	自定义图标组件

方法

属性名	说明	类型
ref	按钮 html 元素	类型
size	按钮尺寸	类型
type	按钮类型	类型
disabled	按钮已禁用	类型

ButtonGroup API

属性

属性名	说明	类型	默认值
size	用于控制该按钮组内按钮的大小	`large`/`default`/`small`	-
type	用于控制该按钮组内按钮的类型	`default`/`success`/`warning`/`danger`/`info`	-

插槽

插槽名	说明	子标签
defalut	自定义默认内容	Button

Button 按钮 ​

基础用法 ​

禁用状态 ​

链接按钮 ​

按钮尺寸 ​

Tag ​

文字按钮 ​

Icon用法 ​

loading 加载状态 ​

按钮组 ​

Button API ​

属性 ​

插槽 ​

方法 ​

ButtonGroup API ​

属性 ​

插槽 ​

Button 按钮

基础用法

禁用状态

链接按钮

按钮尺寸

Tag

文字按钮

Icon用法

loading 加载状态

按钮组

Button API

属性

插槽

方法

ButtonGroup API

属性

插槽