nz-radio-group选项添加气泡提示
时间: 2024-10-11 20:12:05 浏览: 30
Angular,Ng-Zorro框架nz-icon静态加载第三方SVG图标示例源代码
`nz-radio-group`是Ant Design Vue库中的一个组件,用于创建一组单选按钮。如果需要给每个选项添加气泡提示(通常称为提示信息),你可以通过`nz-radiobutton`组件内的`nz-tooltip`属性来实现。`nz-tooltip`是一个自定义提示组件,可以设置显示的内容和触发条件。
下面是一个简单的例子:
```html
<template>
<nz-radio-group v-model="selectedOption">
<nz-radio
v-for="(option, index) in options"
:key="index"
:value="option.value"
:nz-tooltip="{ content: option.description, trigger: 'hover', placement: 'top' }"
>
{{ option.label }}
</nz-radio>
</nz-radio-group>
</template>
<script>
export default {
data() {
return {
selectedOption: '',
options: [
{ value: 'option1', label: '选项一', description: '这是选项一的描述' },
{ value: 'option2', label: '选项二', description: '这是选项二的描述' },
// 更多选项...
],
};
},
};
</script>
```
在这个例子中,当鼠标悬停在某个选项上时,会显示对应的`description`作为气泡提示。`placement`属性指定了提示框的位置,默认为'bottom',你可以根据需求调整。
阅读全文