Badge 标记

出现在按钮、图标旁的数字或状态标记。

基础用法

展示新消息数量。

通过绑定tagNum传递显示消息数量。

<fl-Badge :tagNum = "5">评论
</fl-Badge>
<fl-Badge :tagNum = "9">回复
</fl-Badge>
<fl-Badge :tagNum = "12">点赞
</fl-Badge>

自定义颜色

改变消息冒泡框的背景颜色。

<fl-Badge :tagNum = "5">评论
</fl-Badge>
<fl-Badge tagColor = 'blue' :tagNum = "9">回复
</fl-Badge>
<fl-Badge tagColor = 'green' :tagNum = "12">点赞
</fl-Badge>

使用tagColor，自定义任意颜色，默认为霸气红。

最大值

当tagNum超出最大值，使用+代替。

配置max属性。

<fl-Badge :tagNum = "5" :max = "6">评论
</fl-Badge>
<fl-Badge tagColor = 'blue' :tagNum = "5" :max = "2">回复
</fl-Badge>
<fl-Badge tagColor = 'green' :tagNum = "12" :max = "10">点赞
</fl-Badge>

Attributes

参数	说明	类型	可选值	最大值
`tagNum`	描述值	`String`	`>=0`	——
`tagColor`	冒泡框背景色	`String`	——	——
`max`	所支持最大值	`String`	`>=0`	——

源码：

<template><div class = "badge"><button class = "btn"><slot></slot><span class = "num" :style = "backgroundColor">{{formatTagNum}}</span></button></div>
</template><script>export default {props: {tagNum: {type: String,default: 1},max: {type: String,default: 10},},computed: {backgroundColor() {if(this.$attrs.tagColor){return `background:${this.$attrs.tagColor}`}return 'background:red'},formatTagNum(){if(this.tagNum < 0){return 1}return Number(this.tagNum) >= Number(this.max) ? Number(this.tagNum) + '+' : Number(this.tagNum)}},}
</script><style scoped>
.badge{width:100px;
}
.btn{width:60px;height:30px;border:1px solid #ccc;background: #fff;border-radius: 5px;position: relative;cursor: pointer;
}
.btn:hover{background: rgb(194, 235, 238);border-color: rgb(149, 211, 216);;
}
.btn .num{position: absolute;top:-10px;right:-20px;border-radius: 15px;color:#fff;width:20px;padding:3px;font-size:10px;
}
</style>

手写Vue个人组件库——fl-Badge相关推荐

手写Vue个人组件库——fl-Lazyimg 图片懒加载
fl-Lazyimg图片懒加载基础使用将img绑定在fl-Lazyimg标签中,设置img的src-data为图片路径即可使用. [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上 ...
手写Vue个人组件库——fl-Breadcrumb
Breadcrumb 面包屑显示当前页面的路径,快速返回之前的任意页面. 基础用法适用广泛的基础用法. 你需要做的是将面包屑导航所包含的标题名和路径名以数组形式存放并绑定:breadcrumbDa ...
手写Vue个人组件库——fl-Tree 树形选择器
Tree 树形控件用清晰的层级结构展示信息,可展开或折叠. 基础用法基础的树形结构展示. 通过dataSource绑定数据源,使用afterToggle获得每次展开收起的回调方法. 同时你还可以配 ...
vue 多点触控手势_手写 Vue 手势组件__Vue.js
前言最近需要使用手指捏合扩大的手势操作,找了几个组件,要么对 Vue 适配不好,要么量级太大,决定自己手写手势操作. 项目与效果预览思路直接在 DOM 上绑定 touchstart .touch ...
vue 日期面板_手写Vue日历组件
export class Lunar {//初一显示月份 //节日按照优先级替换日 private dataObj: any ={ month:"", day:"&quo ...
[vue] 你有自己用vue写过UI组件库吗？
[vue] 你有自己用vue写过UI组件库吗? {{item.title}}<dl v-if="item.list.length > 0"><dd v-fo ...
Vue手写一个日历组件
工作中遇到一个需求是根据日历查看某一天/某一周/某一月的睡眠报告,但是找了好多日历组件都不是很符合需求,只好自己手写一个日历组件,顺便记录一下. 先来看看设计图是什么样式, 跟其他日历有点不一样,这个 ...
创建, 发布自己的 Vue UI 组件库
创建, 发布自己的 Vue UI 组件库前言在使用 Vue 进行日常开发时, 我们经常会用到一些开源的 UI 库, 如: Element-UI_, _Vuetify 等. 只需一行命令, 即可方便 ...
16款优秀的Vue UI组件库推荐
16款优秀的Vue UI组件库推荐 Vue 是一个轻巧.高性能.可组件化的MVVM库,API简洁明了,上手快.从Vue推出以来,得到众多Web开发者的认可. 在公司的Web前端项目开发中,多个项目采用 ...
vue filter对象_学习vue源码（3）手写Vue.directive、Vue.filter、Vue.component方法
一.Vue.directive Vue.directive(id,[definition]); 1)参数 { string } id{ Function | Object } [ definition ...

手写Vue个人组件库——fl-Badge

Badge 标记

基础用法

自定义颜色

最大值

Attributes

手写Vue个人组件库——fl-Badge相关推荐

最新文章

热门文章