按钮组。
# 基础示例
默认没有 popup。
<template>
<EBlock class="e-button-group-showcase">
<EBlock horizontal wrap>
<EButtonGroup>
<EButton label="新建" />
<EButton label="导入" />
<EButton label="更改状态" />
</EButtonGroup>
</EBlock>
</EBlock>
</template>
# 有 popup 的情况
通过设置 slot="popup"
可以设置按钮点击下拉图标出现在 popup 中。
<template>
<EBlock class="e-button-group-showcase">
<EBlock horizontal wrap>
<EButtonGroup>
<EButton label="新建" />
<EButton label="导入" />
<EButton label="导出" />
<EButton slot="popup" label="删除" />
<EButton slot="popup" label="更改状态" />
</EButtonGroup>
</EBlock>
</EBlock>
</template>
# 定制下拉 icon
通过设置 slot="dropdown-icon"
可以定制下拉 icon。
<template>
<EBlock class="e-button-group-showcase">
<EBlock horizontal wrap>
<EButtonGroup>
<EIcon slot="dropdown-icon" name="ellipsis-v" font-size="16" />
<EButton slot="popup" label="编辑" style="min-width: auto;" />
<EButton slot="popup" label="删除" style="min-width: auto;" />
</EButtonGroup>
</EBlock>
</EBlock>
</template>
# 按钮的事件
按钮添加点击事件。
<template>
<EBlock class="e-button-group-showcase">
<EBlock horizontal wrap>
<EButtonGroup>
<EButton label="click me!" @click="click"/>
</EButtonGroup>
</EBlock>
<EBlock style="margin-top: 10px;">
<EText>按钮点击了 {{ clicked }} 次</EText>
</EBlock>
</EBlock>
</template>
<script>
export default {
data() {
return {
clicked: 0,
};
},
methods: {
async click(message) {
// eslint-disable-next-line no-alert
if (typeof message === 'string') alert(message);
else if (typeof message === 'number') {
await Promise.delay(message);
} else {
await Promise.delay(1000);
this.clicked += 1;
}
},
},
};
</script>
<style>
.e-button-group-showcase .e-button {
margin: 0;
}
</style>