NaEasy UI

Appearance

IconButton 图标按钮 ​

介绍 ​

纯图标按钮，用于展示各种图标操作，如收藏、分享、删除等。

导入 ​

js
import IconButton from '@/components/basic/IconButton.vue'

用法 ​

基础用法 ​

图标按钮支持所有 Icon 组件中的图标，也可以传入图标 URL。

vue
<template>
  <FlexRow wrap :padding="10" :gap="20">
    <IconButton icon="top-filling" @click="onClick" />
    <IconButton icon="download" @click="onClick" />
    <IconButton icon="share" @click="onClick" />
    <IconButton icon="delete" @click="onClick" />
  </FlexRow>
</template>

不同形状 ​

图标按钮支持多种预设形状，包括圆形、方形等。

vue
<template>
  <FlexRow wrap :padding="10" :gap="20">
    <IconButton icon="top-filling" shape="round-full" @click="onClick" />
    <IconButton icon="download" shape="square-full" @click="onClick" />
    <IconButton icon="share" shape="round" @click="onClick" />
    <IconButton icon="delete" shape="custom" borderRadius="10" @click="onClick" />
  </FlexRow>
</template>

不同大小 ​

通过 size 属性可以设置图标的大小。

vue
<template>
  <FlexRow wrap :padding="10" :gap="20">
    <IconButton icon="top-filling" size="12" @click="onClick" />
    <IconButton icon="download" size="20" @click="onClick" />
    <IconButton icon="share" size="30" @click="onClick" />
    <IconButton icon="delete" size="40" @click="onClick" />
  </FlexRow>
</template>

自定义颜色 ​

可以自定义图标颜色和背景颜色。

vue
<template>
  <FlexRow wrap :padding="10" :gap="20">
    <IconButton icon="top-filling" color="#cf1818" @click="onClick" />
    <IconButton icon="download" color="#61b414" @click="onClick" />
    <IconButton icon="share" backgroundColor="#115e8b" color="#fff" @click="onClick" />
    <IconButton icon="delete" backgroundColor="#f0f0f0" color="#666" @click="onClick" />
  </FlexRow>
</template>

禁用状态 ​

通过 disabled 属性可以禁用图标按钮。

vue
<template>
  <FlexRow wrap :padding="10" :gap="20">
    <IconButton icon="top-filling" disabled @click="onClick" />
    <IconButton icon="download" backgroundColor="#f0f0f0" color="#999" disabled @click="onClick" />
  </FlexRow>
</template>

API 参考 ​

IconButton ​

图标按钮组件。

Props ​

名称说明类型必填默认值
icon图标名称或URLstring--
shape按钮形状预设
* round: 圆角按钮
* round-full: 圆角按钮，宽度和高度相等
* square-full: 方角按钮，宽度和高度相等
* custom: 自定义按钮形状		'round'|'round-full'|'square-full'|'custom'-'custom'
buttonSize按钮大小。可以是一个数字，也可以是一个数组，数组的第一个元素是宽度，第二个元素是高度。number|((number|string)[])|string--
backgroundColor按钮背景颜色string--
padding按钮边距number--
pressedBackgroundColor按钮按下时的背景颜色string-'pressed.white'
touchable是否响应点击事件boolean-true
buttonStyle按钮样式ViewStyle--
...继承 Icon 的所有属性IconProps--

Slots ​

名称说明
default自定义内容插槽

Events ​

名称说明参数
click点击事件$event

主题变量 ​

名称类型默认值说明
IconButtonPressedColorstring'pressed.white'按钮按下时的背景颜色
IconButtonDisabledOpacitynumber0.4禁用状态下的不透明度
IconButtonRoundBorderRadiusnumber50round形状的圆角大小