github
/
element
mirror of https://github.com/ElemeFE/element
1
0
Fork 0
Code Issues Releases Wiki Activity

Add badge component

pull/2/head
qingwei.li 2016-08-17 13:53:56 +08:00
parent 62e3e768c3
commit f8549e9084
13 changed files with 292 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
components.json
View File

@ -148,5 +148,8 @@
],
"message": [
"./packages/message/index.js"
],
"badge": [
"./packages/badge/index.js"
]
}

5
examples/app.vue
View File

@ -11,6 +11,7 @@
}
body {
font-family: FreeSans, Arimo, "Droid Sans", Helvetica, Arial, sans-serif;
overflow: auto;
}
@ -299,10 +300,10 @@
</div>
<div class="pure-u-5-6 app__content">
<header class="app__header">
<h1 class="app__headline">{{ $route.title || 'element 后台组件' }}</h1>
<h1 class="app__headline">{{ $route.meta.title || 'element 后台组件' }}</h1>
</header>
<section class="app__main" ref="main">
<p class="app__description">{{ $route.description }}</p>
<p class="app__description">{{ $route.meta.description }}</p>
<router-view></router-view>
</section>
<toc main=".app__main"></toc>

139
examples/docs/badge.md Normal file
View File

@ -0,0 +1,139 @@
## 基础用法
展示新消息数量
<el-row>
<el-col :span="12">
<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-col>
<el-col :span="12">
<el-dropdown text="点我查看" type="text" :icon-separate="false" trigger="click">
<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>
</el-col>
</el-row>
```html
<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-dropdown text="点我查看" type="text" :icon-separate="false" trigger="click">
<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>
```
## 最大值
可自定义最大值
<el-row>
<el-col :span="12">
<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>
</el-col>
</el-row>
```html
<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>
```
## 自定义内容
可以显示数字外的文本内容
<el-row>
<el-col :span="12">
<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>
</el-col>
</el-row>
```html
<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>
```
## 小红点
以红点的形式标注需要关注的内容
<el-row>
<el-col :span="12">
<el-badge dot class="item">数据查询</el-badge>
<el-badge dot class="item">
<el-button class="share-button" icon="share" type="primary"></el-button>
</el-badge>
</el-col>
</el-row>
```html
<el-badge dot class="item">数据查询</el-badge>
<el-badge dot class="item">
<el-button class="share-button" icon="share" type="primary"></el-button>
</el-badge>
```
<style scoped>
.share-button {
width: 36px;
padding: 10px;
}
.mark {
margin-top: 8px;
line-height: 1;
float: right;
}
.clearfix {
@utils-clearfix;
}
.item {
margin-right: 40px;
}
</style>
## API
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|------------- |---------------- |---------------- |---------------------- |-------- |
| value | 显示值 | string|number | | |
| max | 最大值，超过最大值会显示 '{max}+'，要求 value 是 Number 类型 | number | | |
| dot | 小圆点 | boolean | | false |

6
examples/nav.config.json
View File

@ -222,6 +222,12 @@
"path": "/tree",
"name": "tree (tree)",
"title": "tree"
},
{
"path": "/badge",
"name": "标记 (badge)",
"title": " Badge 标记",
"description": "出现在按钮、图标旁的数字或状态标记"
}
]
}

6
examples/route.config.js
View File

@ -10,8 +10,10 @@ const registerRoute = (config) => {
route.push({
path: page.path,
title: page.title || page.name,
description: page.description,
meta: {
title: page.title || page.name,
description: page.description
},
component: component.default || component
});
})

31
packages/badge/cooking.conf.js Normal file
View File

@ -0,0 +1,31 @@
var cooking = require('cooking');
var path = require('path');
cooking.set({
entry: {
index: path.join(__dirname, 'index.js')
},
dist: path.join(__dirname, 'lib'),
template: false,
format: 'umd',
moduleName: 'ElBadge',
extractCSS: 'style.css',
extends: ['vue', 'saladcss']
});
cooking.add('resolve.alias', {
'main': path.join(__dirname, '../../src'),
'packages': path.join(__dirname, '../../packages')
});
cooking.add('externals', {
vue: {
root: 'Vue',
commonjs: 'vue',
commonjs2: 'vue',
amd: 'vue'
}
});
module.exports = cooking.resolve();

7
packages/badge/index.js Normal file
View File

@ -0,0 +1,7 @@
const Badge = require('./src/main');
Badge.install = function(Vue) {
Vue.component(Badge.name, Badge);
};
module.exports = Badge;

15
packages/badge/package.json Normal file
View File

@ -0,0 +1,15 @@
{
"name": "el-badge",
"version": "0.0.0",
"description": "A badge component for Vue.js.",
"keywords": [
"element",
"vue",
"component"
],
"main": "./lib/index.js",
"repository": "https://github.com/element-component/element/tree/master/packages/badge",
"author": "elemefe",
"license": "MIT",
"dependencies": {}
}

34
packages/badge/src/main.vue Normal file
View File

@ -0,0 +1,34 @@
<template>
<div class="el-badge">
<slot></slot>
<sup
v-text="content"
class="el-badge__content"
:class="{ 'is-fixed': $slots.default, 'is-dot': dot }" />
</div>
</template>
<script>
export default {
name: 'el-badge',
props: {
value: {},
max: Number,
dot: Boolean
},
computed: {
content() {
const value = this.value;
const max = this.max;
if (typeof value === 'number' && typeof max === 'number') {
return max < value ? `${max}+` : value;
}
return value;
}
}
};
</script>

4
packages/dropdown/src/dropdown.vue
View File

@ -23,11 +23,9 @@
<!-- 下拉菜单 -->
<transition name="md-fade-bottom">
<el-dropdown-menu
ref:menu
v-if="visible"
@mouseenter.native="handleMouseEnter"
@mouseleave.native="handleMouseLeave"
>
@mouseleave.native="handleMouseLeave">
<slot></slot>
</el-dropdown-menu>
</transition>

40
packages/theme-default/src/badge.css Normal file
View File

@ -0,0 +1,40 @@
@charset "UTF-8";
@import "./common/var.css";
@component-namespace el {
@b badge {
position: relative;
vertical-align: middle;
display: inline-block;
@e content {
background-color: var(--badge-fill);
border-radius: var(--badge-radius);
color: #fff;
display: inline-block;
font-size: var(--badge-font-size);
height: var(--badge-size);
line-height: var(--badge-size);
padding: 0 var(--badge-padding);
text-align: center;
white-space: nowrap;
border:1px solid #fff;
@when fixed {
position: absolute 0 calc(var(--badge-size) / 2 + 1) * *;
transform: translateY(-50%) translateX(100%);
@when dot {
right: 5px;
}
}
@when dot {
size: 8px 8px;
padding: 0;
right: 0;
border-radius: 50%;
}
}
}
}

8
packages/theme-default/src/common/var.css
View File

@ -353,4 +353,12 @@
--dropdown-menu-box-shadow: 0 0 6px 0 rgba(0,0,0,.12), 0 2px 4px 0 rgba(0,0,0,.12);
--dropdown-menuItem-hover-fill: #e5e9f2;
--dropdown-menuItem-hover-color: #475669;
/* Badge
-------------------------- */
--badge-fill: var(--color-danger);
--badge-radius: 10px;
--badge-font-size: 12px;
--badge-padding: 6px;
--badge-size: 18px;
}

1
packages/theme-default/src/index.css
View File

@ -32,3 +32,4 @@
@import "./row.css";
@import "./col.css";
@import "./spinner.css";
@import "./badge.css";