盈江城乡建设局网站,有没有教做网站实例视频,常州企业免费建站,semcms外贸网站管理系统该组件一般用于图标右上角显示未读的消息数量#xff0c;提示用户点击#xff0c;有圆点和圆包含文字两种形式。 #平台差异说明
App#xff08;vue#xff09;App#xff08;nvue#xff09;H5小程序√√√√
#基本使用
通过value参数定义徽标内容通过type设置主题。重…该组件一般用于图标右上角显示未读的消息数量提示用户点击有圆点和圆包含文字两种形式。 #平台差异说明
AppvueAppnvueH5小程序√√√√
#基本使用
通过value参数定义徽标内容通过type设置主题。重申一次uView中所有组件的type参数都只有5个固定的可选值分别是primary(蓝色-主色)warning(黄色-警告) error(红色-错误)success(绿色-成功)info(灰色-信息)通过max参数控制最大值超过最大值会显示 {max}
注意
此组件内部默认为absolute绝对定位所以需要给badge父组件(元素)设置position: relative相对定位 再通过调整offset偏移值(数组两个元素第一个元素为top值第二个元素为right值单位rpx可为负值如[-10, -10])设置到合适的位置即可。 如果不需要组件内容默认的自动绝对定位设置absolute参数为false即可。
templateview stylepadding: 20px;view classboxu-badge :typetype max99 :valuevalue/u-badge/view/view
/templatescript
export default {data() {return {type:warning,value:100}}
};
/scriptstyle langscss scoped.box{width: 100px; height: 100px;background-color: #909193;border-radius: 15px;}
/stylecopy
#设置徽标的类型为一个圆点
通过isDot参数设置该形式组件没有内容只显示一个圆点
u-badge :isDottrue typesuccess/u-badgecopy
#设置数字的显示方式 overflow|ellipsis|limit
overflow会根据max字段判断超出显示${max}ellipsis会根据max判断超出显示${max}...limit会依据1000作为判断条件超出1000显示${value/1000}K比如2.2k、3.34w最多保留2位小数
templateview stylepadding: 20px;view classboxu-badge numberTypeoverflow :typetype max99 :valuevalue/u-badge/viewview classboxu-badge numberTypeellipsis :typetype max99 :valuevalue/u-badge/viewview classboxu-badge numberTypelimit :typetype max99 :valuevalue/u-badge/view/view
/templatescript
export default {data() {return {type:warning,value:99999}}
};
/scriptstyle langscss scoped.box{width: 100px; height: 100px;background-color: #909193;border-radius: 15px;}
/style
