网站建设属于广告费吗,vue.js 做网站,产品品牌推广公司,附近电子商城出现在按钮、图标旁的数字或状态标记。 1.如何使用#xff1f;
可展示新消息数量。
//定义value属性#xff0c;它接受Number或者String。el-badge :value12 classitemel-button sizesmall评论/el-button可展示新消息数量。
//定义value属性它接受Number或者String。el-badge :value12 classitemel-button sizesmall评论/el-button
/el-badge
el-badge :value3 classitemel-button sizesmall回复/el-button
/el-badge
el-badge :value1 classitem typeprimaryel-button sizesmall评论/el-button
/el-badge
el-badge :value2 classitem typewarningel-button sizesmall回复/el-button
/el-badgeel-dropdown triggerclickspan classel-dropdown-link点我查看i classel-icon-caret-bottom el-icon--right/i/spanel-dropdown-menu slotdropdownel-dropdown-item classclearfix评论el-badge classmark :value12 //el-dropdown-itemel-dropdown-item classclearfix回复el-badge classmark :value3 //el-dropdown-item/el-dropdown-menu
/el-dropdownstyle
.item {margin-top: 10px;margin-right: 40px;
}
/style
2.最大值
可自定义最大值。
//由max属性定义它接受一个Number需要注意的是只有当value为Number时它才会生效。el-badge :value200 :max99 classitemel-button sizesmall评论/el-button
/el-badge
el-badge :value100 :max10 classitemel-button sizesmall回复/el-button
/el-badgestyle
.item {margin-top: 10px;margin-right: 40px;
}
/style
3.自定义内容
可以显示数字以外的文本内容。
//定义value为String类型是时可以用于显示自定义文本。el-badge valuenew classitemel-button sizesmall评论/el-button
/el-badge
el-badge valuehot classitemel-button sizesmall回复/el-button
/el-badgestyle
.item {margin-top: 10px;margin-right: 40px;
}
/style
4.小红点
以红点的形式标注需要关注的内容。
//除了数字外设置is-dot属性它接受一个Boolean。el-badge is-dot classitem数据查询/el-badge
el-badge is-dot classitemel-button classshare-button iconel-icon-share typeprimary/el-button
/el-badgestyle
.item {margin-top: 10px;margin-right: 40px;
}
/style
关于Badge 标记它常见于网站或内容平台的消息数量展示。
