Vue + Ant design 实现鼠标悬浮文字提示

小泡泡c

4285人浏览 · 2022-02-21 16:39:58

小泡泡c · 2022-02-21 16:39:58 发布

1. 效果一

在这里插入图片描述
1）思路：利用控件的 title 属性

注：不是所有的控件都有这个属性，见相关文档说明。

2）代码

<a-radio-group v-model="form.tolCode" >
 <a-radio-button value="1" title="平面度">
  <icon-font type="icon-tx-pinghangsibianxing" style="font-size:16px" />
 </a-radio-button>
</a-radio-group>

2.效果二

在这里插入图片描述

1）思路：利用 tooltip 控件
2）代码

<a-radio-group v-model="form.sign">
 <a-tooltip>
  <template slot="title">说明文字</template>
   <a-radio-button value="0">
    <icon-font type="icon-cucaodu" />
   </a-radio-button>
 </a-tooltip>
</a-radio-group>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^