# 4.3 图标按钮（Icon Button）

图标按钮组件

# 基础用法

<template>
  <dof-icon-button
    v-model="active"
    :img="normalIcon"
    :active-img="activeIcon"
    text="新风"
    @change="onChange"
  />
</template>

<script>
import { DofIconButton } from 'dolphin-intl-ui'

export default {
  components: { DofIconButton },
  data() {
    return {
      active: false,
      normalIcon: '你的常态图标地址',
      activeIcon: '你的激活态图标地址',
    }
  },
  methods: {
    onChange(active) {
      this.active = active
    },
  },
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

# Attributes

Prop Type Required Default Description
active Boolean N false 是否为激活态
img String N - 常态图片地址
color String N '' 常态背景颜色
active-color String N '' 激活态背景颜色
text-color String N '' 文字颜色
touch-color String N '' 按压态背景颜色
is-loading Boolean N false 是否显示加载状态
loading-img String N 'black' 加载图标类型
active-img String N '' 激活态图片地址
round Boolean N true 图片是否显示为圆形
text String N '' 按钮文字
is-show-triangle Boolean N false 是否显示右下角三角标识
border-color String N '' 常态边框颜色
active-border-color String N '' 激活态边框颜色
is-haptic-feedback Boolean N false 是否启用震动反馈
btn-size Number N 96 按钮尺寸
img-size Number N 96 图片尺寸
loading-img-size Number N 0 加载图标尺寸，0 时使用内部默认值
disabled Boolean N false 是否禁用
is-plain Boolean N false 是否为朴素按钮，仅支持 Colmo
icon-font Object N {} 图标字体配置，包含 code 和 color
active-icon-font Object N {} 激活态图标字体配置，包含 code 和 color
need-dark-mode Boolean N false 是否启用 M-dark/T-dark 内置暗黑适配
isRTL Boolean N false 是否启用 RTL（从右到左）布局；默认关闭 ^2.5.10

设置 :need-dark-mode="true" 可启用内置暗黑配色，主题初始化与构建配置见 接入说明。

颜色属性为空时使用内置配色；业务显式颜色和样式覆盖优先于默认配色，关闭暗黑适配后仍有效。

业务颜色和图标配置优先；组件不会修改调用方共享的图标配置。

# Events

事件名称 说明 回调参数
change 点击未禁用、非加载状态的按钮时触发；同时供 v-model 使用 新的激活状态 active

← 4.4 开关（Switch） →