From f8549e90845fa7b28a38fb879dabdd024f68ed88 Mon Sep 17 00:00:00 2001 From: "qingwei.li" Date: Wed, 17 Aug 2016 13:53:56 +0800 Subject: [PATCH 1/3] Add badge component --- components.json | 3 + examples/app.vue | 5 +- examples/docs/badge.md | 139 ++++++++++++++++++++++ examples/nav.config.json | 6 + examples/route.config.js | 6 +- packages/badge/cooking.conf.js | 31 +++++ packages/badge/index.js | 7 ++ packages/badge/package.json | 15 +++ packages/badge/src/main.vue | 34 ++++++ packages/dropdown/src/dropdown.vue | 4 +- packages/theme-default/src/badge.css | 40 +++++++ packages/theme-default/src/common/var.css | 8 ++ packages/theme-default/src/index.css | 1 + 13 files changed, 292 insertions(+), 7 deletions(-) create mode 100644 examples/docs/badge.md create mode 100644 packages/badge/cooking.conf.js create mode 100644 packages/badge/index.js create mode 100644 packages/badge/package.json create mode 100644 packages/badge/src/main.vue create mode 100644 packages/theme-default/src/badge.css diff --git a/components.json b/components.json index 1aedb8f28..ea6cfbec6 100644 --- a/components.json +++ b/components.json @@ -148,5 +148,8 @@ ], "message": [ "./packages/message/index.js" + ], + "badge": [ + "./packages/badge/index.js" ] } diff --git a/examples/app.vue b/examples/app.vue index 8a9959f0a..6ba1d6c38 100644 --- a/examples/app.vue +++ b/examples/app.vue @@ -11,6 +11,7 @@ } body { + font-family: FreeSans, Arimo, "Droid Sans", Helvetica, Arial, sans-serif; overflow: auto; } @@ -299,10 +300,10 @@
-

{{ $route.title || 'element 后台组件' }}

+

{{ $route.meta.title || 'element 后台组件' }}

-

{{ $route.description }}

+

{{ $route.meta.description }}

diff --git a/examples/docs/badge.md b/examples/docs/badge.md new file mode 100644 index 000000000..c5343ed46 --- /dev/null +++ b/examples/docs/badge.md @@ -0,0 +1,139 @@ +## 基础用法 +展示新消息数量 + + + + + 评论 + + + 回复 + + + + + + 评论 + + + + 回复 + + + + + + +```html + + 评论 + + + 回复 + + + + + 评论 + + + + 回复 + + + +``` + +## 最大值 +可自定义最大值 + + + + + 评论 + + + 回复 + + + + +```html + + 评论 + + + 回复 + +``` + + +## 自定义内容 +可以显示数字外的文本内容 + + + + + 评论 + + + 回复 + + + + +```html + + 评论 + + + 回复 + +``` + +## 小红点 +以红点的形式标注需要关注的内容 + + + + 数据查询 + + + + + + +```html +数据查询 + + + +``` + + + +## API +| 参数 | 说明 | 类型 | 可选值 | 默认值 | +|------------- |---------------- |---------------- |---------------------- |-------- | +| value | 显示值 | string|number | | | +| max | 最大值，超过最大值会显示 '{max}+'，要求 value 是 Number 类型 | number | | | +| dot | 小圆点 | boolean | | false | diff --git a/examples/nav.config.json b/examples/nav.config.json index ed886eeb5..94e0f2e3d 100644 --- a/examples/nav.config.json +++ b/examples/nav.config.json @@ -222,6 +222,12 @@ "path": "/tree", "name": "tree (tree)", "title": "tree" + }, + { + "path": "/badge", + "name": "标记 (badge)", + "title": " Badge 标记", + "description": "出现在按钮、图标旁的数字或状态标记" } ] } diff --git a/examples/route.config.js b/examples/route.config.js index f9afe52d0..04f2b87a6 100644 --- a/examples/route.config.js +++ b/examples/route.config.js @@ -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 }); }) diff --git a/packages/badge/cooking.conf.js b/packages/badge/cooking.conf.js new file mode 100644 index 000000000..780ce4ffe --- /dev/null +++ b/packages/badge/cooking.conf.js @@ -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(); diff --git a/packages/badge/index.js b/packages/badge/index.js new file mode 100644 index 000000000..114c31467 --- /dev/null +++ b/packages/badge/index.js @@ -0,0 +1,7 @@ +const Badge = require('./src/main'); + +Badge.install = function(Vue) { + Vue.component(Badge.name, Badge); +}; + +module.exports = Badge; diff --git a/packages/badge/package.json b/packages/badge/package.json new file mode 100644 index 000000000..01c8ba404 --- /dev/null +++ b/packages/badge/package.json @@ -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": {} +} diff --git a/packages/badge/src/main.vue b/packages/badge/src/main.vue new file mode 100644 index 000000000..571716394 --- /dev/null +++ b/packages/badge/src/main.vue @@ -0,0 +1,34 @@ + + + diff --git a/packages/dropdown/src/dropdown.vue b/packages/dropdown/src/dropdown.vue index 6cefa8340..b44b57578 100644 --- a/packages/dropdown/src/dropdown.vue +++ b/packages/dropdown/src/dropdown.vue @@ -23,11 +23,9 @@ + @mouseleave.native="handleMouseLeave"> diff --git a/packages/theme-default/src/badge.css b/packages/theme-default/src/badge.css new file mode 100644 index 000000000..e9c7af655 --- /dev/null +++ b/packages/theme-default/src/badge.css @@ -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%; + } + } + } +} diff --git a/packages/theme-default/src/common/var.css b/packages/theme-default/src/common/var.css index 1eaf69414..cdf06b992 100644 --- a/packages/theme-default/src/common/var.css +++ b/packages/theme-default/src/common/var.css @@ -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; } diff --git a/packages/theme-default/src/index.css b/packages/theme-default/src/index.css index 806a04761..9473e9a02 100644 --- a/packages/theme-default/src/index.css +++ b/packages/theme-default/src/index.css @@ -32,3 +32,4 @@ @import "./row.css"; @import "./col.css"; @import "./spinner.css"; +@import "./badge.css"; From cc0934d89b4f4fb3f91857416f195b3d8b98c7e3 Mon Sep 17 00:00:00 2001 From: "qingwei.li" Date: Wed, 17 Aug 2016 14:03:40 +0800 Subject: [PATCH 2/3] Fix dot fix style --- packages/badge/src/main.vue | 2 ++ packages/theme-default/src/badge.css | 2 +- 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/badge/src/main.vue b/packages/badge/src/main.vue index 571716394..6db749462 100644 --- a/packages/badge/src/main.vue +++ b/packages/badge/src/main.vue @@ -20,6 +20,8 @@ export default { computed: { content() { + if (this.dot) return; + const value = this.value; const max = this.max; diff --git a/packages/theme-default/src/badge.css b/packages/theme-default/src/badge.css index e9c7af655..1ee409e7f 100644 --- a/packages/theme-default/src/badge.css +++ b/packages/theme-default/src/badge.css @@ -18,7 +18,7 @@ padding: 0 var(--badge-padding); text-align: center; white-space: nowrap; - border:1px solid #fff; + border: 1px solid #fff; @when fixed { position: absolute 0 calc(var(--badge-size) / 2 + 1) * *; From f0503c87a3d577e5443942b2dcb6373540e1b2bb Mon Sep 17 00:00:00 2001 From: "qingwei.li" Date: Wed, 17 Aug 2016 14:16:15 +0800 Subject: [PATCH 3/3] badge: dot => isDot --- examples/docs/badge.md | 12 ++++++------ packages/badge/src/main.vue | 6 +++--- 2 files changed, 9 insertions(+), 9 deletions(-) diff --git a/examples/docs/badge.md b/examples/docs/badge.md index c5343ed46..0935abe02 100644 --- a/examples/docs/badge.md +++ b/examples/docs/badge.md @@ -96,16 +96,16 @@ - 数据查询 - + 数据查询 + ```html -数据查询 - +数据查询 + ``` @@ -134,6 +134,6 @@ ## API | 参数 | 说明 | 类型 | 可选值 | 默认值 | |------------- |---------------- |---------------- |---------------------- |-------- | -| value | 显示值 | string|number | | | +| value | 显示值 | string, number | | | | max | 最大值，超过最大值会显示 '{max}+'，要求 value 是 Number 类型 | number | | | -| dot | 小圆点 | boolean | | false | +| is-dot | 小圆点 | boolean | | false | diff --git a/packages/badge/src/main.vue b/packages/badge/src/main.vue index 6db749462..e42aa79e6 100644 --- a/packages/badge/src/main.vue +++ b/packages/badge/src/main.vue @@ -4,7 +4,7 @@ + :class="{ 'is-fixed': $slots.default, 'is-dot': isDot }" />
@@ -15,12 +15,12 @@ export default { props: { value: {}, max: Number, - dot: Boolean + isDot: Boolean }, computed: { content() { - if (this.dot) return; + if (this.isDot) return; const value = this.value; const max = this.max;