Hui使用手册-Button

type 设置按钮类型，可选值有primary、ghost、dashed、text、info、success、warning、errorshape 设置按钮形状，circlesize 设置按钮大小，small，largedisabled 设置按钮是否可点击 Booleanloading 设置按钮为加载中状态 booleanicon 设置图标

示例一

采用自定义样式

<h-button class="button" @click="add"> <h-icon name="add"></h-icon> 新增</h-button> .button { margin-right: 0px; border: 1px solid #1388e6 !important; color: #1388e6 !important; background-color: white; }

示例二

按钮状态切换，根据不同状态显示不同文字

<h-button type="ghost" :loading="loading"> <h-icon name="t-b-download"></h-icon> <span v-cloak>{{loading===true? '导入中':'导入'}}</span> </h-button> <h-button type="ghost" class="button" :loading="loading"> <h-icon name="t-b-download"></h-icon> <span v-if="!loading"> 批量导入</span> <span v-else> 导入中</span> </h-button>

示例三

按钮状态切换，根据不同状态显示是否可点击并更改样式

<h-button :class="{button:true, unActive: !canClick}" @click="edit" :disabled="!canClick"> <h-icon name="editor"></h-icon> 修改</h-button>

button样式是按钮可以点击时的样式，unActive是按钮不可点击时的样式，它是值由canClick决定

.unActive { margin-right: 0px; border: 1px solid #9a9292 !important; color: #9a9292 !important; background-color: white; }

表格数据选中一条时，才可点击修改按钮，需要将canClick()放到computed中实时观察

computed: { canClick() { if (this.selectData.length !== 1) { return false; } return true; }, }