组件-Element—Badge（标记）

组件—标记

基础用法

<el-badge :value="12" class="item"><el-button size="small">评论</el-button>
</el-badge>
<el-badge :value="3" class="item"><el-button size="small">回复</el-button>
</el-badge>
<el-badge :value="1" class="item" type="primary"><el-button size="small">评论</el-button>
</el-badge>
<el-badge :value="2" class="item" type="warning"><el-button size="small">回复</el-button>
</el-badge><el-dropdown trigger="click"><span class="el-dropdown-link">点我查看<i class="el-icon-caret-bottom el-icon--right"></i></span><el-dropdown-menu slot="dropdown"><el-dropdown-item class="clearfix">评论<el-badge class="mark" :value="12" /></el-dropdown-item><el-dropdown-item class="clearfix">回复<el-badge class="mark" :value="3" /></el-dropdown-item></el-dropdown-menu>
</el-dropdown><style>
.item {margin-top: 10px;margin-right: 40px;
}
</style>

最大值

<el-badge :value="200" :max="99" class="item"><el-button size="small">评论</el-button>
</el-badge>
<el-badge :value="100" :max="10" class="item"><el-button size="small">回复</el-button>
</el-badge><style>
.item {margin-top: 10px;margin-right: 40px;
}
</style>

自定义内容

<el-badge value="new" class="item"><el-button size="small">评论</el-button>
</el-badge>
<el-badge value="hot" class="item"><el-button size="small">回复</el-button>
</el-badge><style>
.item {margin-top: 10px;margin-right: 40px;
}
</style>

小红点

<el-badge is-dot class="item">数据查询</el-badge>
<el-badge is-dot class="item"><el-button class="share-button" icon="el-icon-share" type="primary"></el-button>
</el-badge><style>
.item {margin-top: 10px;margin-right: 40px;
}
</style>

Attributes

组件-Element—Badge（标记）相关推荐

vue实现消息badge 标记_一天一个 Element 组件 - Badge
本文是 Element 的组件源码学习系列. Badge 组件使用文档:badge 标记 Props 我们先来看一下 el-badge 这个组件的入参 props: { value: [String, ...
如何：向 Windows 窗体组件附加智能标记
http://msdn2.microsoft.com/zh-cn/library/ms171830(VS.80).aspx 此示例演示如何向组件和自定义控件添加智能标记支持. 有关此代码示例的完整说明 ...
组件Element的入门学习
组件Element的入门学习第一节:Layout布局基础默认一行24列,通过自己简单的布局可以实现想要的效果基础布局注意;通过 row 和 col 组件,并通过 col 组件的 span 属性 ...
组件-Element—Timeline（时间线）
组件-Element-Timeline(时间线) 组件-时间线基础用法 <div class="block"><div class="radio&qu ...
vue实现消息badge 标记_Badge 标记
Badge 标记 Badge 标记出现在按钮.图标旁的数字或状态标记. 基础用法定义value属性,它接受Number或者String. 评论回复点我查看评论回复 .item { marg ...
gstreamer教程（二）-初始化_组件(Element)_箱柜(Bins)的使用
Gstreamer基础知识: 1.gstreamer基本概念 2.gstreamer初始化.组件.箱柜 3.gstreamer总线.衬垫.缓冲区.事件 1.初始化GStreamer 当你准备写一个 G ...
组件-Element—Transfer（穿梭框）
组件-Element-Transfer(穿梭框) 组件-穿梭框基础用法 <template><el-transfer v-model="value" :data ...
vue实现消息badge 标记_Badge组件_element-ui源码分析笔记 - SegmentFault 思否
Badge组件主要用于数字或状态的标记,对于消息类的提醒功能,使用这组件还是很常见的.具体显示效果如下图: 不管组件复杂还是简单,编码实现这个组件的都不是源码分析目的. 源码分析,在于通过一步步的实现 ...
vue实现消息badge 标记_Vue $mount实战之实现消息弹窗组件
之前的项目一直在使用Element-UI框架,element中的Notification.Message组件使用时不需要在html写标签,而是使用js调用.那时就很疑惑,为什么element ui使用 ...

组件-Element—Badge（标记）

组件-Element—Badge（标记）

组件-Element—Badge（标记）相关推荐

最新文章

热门文章