From 44600789dcf3824ccad4bac3e7fc7a6fa2b7eedf Mon Sep 17 00:00:00 2001 From: zhuxiang Date: Sun, 26 Feb 2017 15:42:19 +0800 Subject: [PATCH] badge css done --- components.json | 4 +- docs/examples-docs/badge.md | 14 ++++++ package.json | 7 ++- packages/badge-group/index.js | 3 ++ packages/badge/CHANGELOG.md | 8 ++++ packages/badge/README.md | 26 +++++++++++ packages/badge/index.js | 3 ++ packages/badge/package.json | 10 +++++ packages/badge/src/badge-group.vue | 11 +++++ packages/badge/src/badge.vue | 23 ++++++++++ packages/zanui-css/src/badge.css | 71 ++++++++++++++++++++++++++++++ packages/zanui-css/src/index.css | 1 + src/index.js | 8 +++- 13 files changed, 185 insertions(+), 4 deletions(-) create mode 100644 docs/examples-docs/badge.md create mode 100644 packages/badge-group/index.js create mode 100644 packages/badge/CHANGELOG.md create mode 100644 packages/badge/README.md create mode 100644 packages/badge/index.js create mode 100644 packages/badge/package.json create mode 100644 packages/badge/src/badge-group.vue create mode 100644 packages/badge/src/badge.vue create mode 100644 packages/zanui-css/src/badge.css diff --git a/components.json b/components.json index 579038825..85636467e 100644 --- a/components.json +++ b/components.json @@ -10,5 +10,7 @@ "dialog": "./packages/dialog/index.js", "picker": "./packages/picker/index.js", "radio-group": "./packages/radio-group/index.js", - "loading": "./packages/loading/index.js" + "loading": "./packages/loading/index.js", + "badge": "./packages/badge/index.js", + "badge-group": "./packages/badge-group/index.js" } diff --git a/docs/examples-docs/badge.md b/docs/examples-docs/badge.md new file mode 100644 index 000000000..c73d6a8e5 --- /dev/null +++ b/docs/examples-docs/badge.md @@ -0,0 +1,14 @@ +## Badge 组件 + +### 基础用法 + +:::demo 样例代码 +```html + + + + + + +``` +::: \ No newline at end of file diff --git a/package.json b/package.json index 98b435cd3..81ced6a56 100644 --- a/package.json +++ b/package.json @@ -11,7 +11,7 @@ ], "scripts": { "bootstrap": "npm i --registry=http://registry.npm.qima-inc.com", - "dev": "npm run bootstrap && npm run build:file && webpack-dev-server --inline --hot --config build/webpack.config.js", + "dev": "npm run bootstrap && npm run build:file && webpack-dev-server --port 8282 --inline --hot --config build/webpack.config.js", "build:file": "node build/bin/build-entry.js", "build:zanui-css": "gulp build --gulpfile packages/zanui-css/gulpfile.js && cp-cli packages/zanui-css/lib lib/zanui-css", "build:zanui": "webpack --progress --hide-modules --config build/webpack.build.js && webpack --progress --hide-modules --config build/webpack.build.min.js", @@ -38,6 +38,7 @@ "vue": "^2.1.8" }, "devDependencies": { + "autoprefixer": "^6.7.5", "babel-cli": "^6.14.0", "babel-core": "^6.17.0", "babel-eslint": "^6.1.2", @@ -49,6 +50,7 @@ "babel-plugin-transform-vue-jsx": "^3.3.0", "babel-preset-es2015": "^6.16.0", "babel-runtime": "^6.11.0", + "cheerio": "^0.22.0", "copy-webpack-plugin": "^4.0.1", "cp-cli": "^1.0.2", "cross-env": "^3.1.3", @@ -67,6 +69,7 @@ "gulp": "^3.9.1", "gulp-cssmin": "^0.1.7", "gulp-postcss": "^6.1.1", + "gulp-util": "^3.0.8", "highlight.js": "^9.8.0", "html-loader": "^0.4.3", "html-webpack-plugin": "^2.22.0", @@ -119,4 +122,4 @@ "webpack-node-externals": "^1.5.4", "webpack-vendor-chunk-plugin": "^1.0.0" } -} \ No newline at end of file +} diff --git a/packages/badge-group/index.js b/packages/badge-group/index.js new file mode 100644 index 000000000..2bff2f50d --- /dev/null +++ b/packages/badge-group/index.js @@ -0,0 +1,3 @@ +import BadgeGroup from '../badge/src/badge-group'; + +export default BadgeGroup; diff --git a/packages/badge/CHANGELOG.md b/packages/badge/CHANGELOG.md new file mode 100644 index 000000000..e88c472b3 --- /dev/null +++ b/packages/badge/CHANGELOG.md @@ -0,0 +1,8 @@ +## 0.0.2 (2017-01-20) + +* 改了bug A +* 加了功能B + +## 0.0.1 (2017-01-10) + +* 第一版 diff --git a/packages/badge/README.md b/packages/badge/README.md new file mode 100644 index 000000000..4c6172563 --- /dev/null +++ b/packages/badge/README.md @@ -0,0 +1,26 @@ +# @youzan/<%= name %> + +!!! 请在此处填写你的文档最简单描述 !!! + +[![version][version-image]][download-url] +[![download][download-image]][download-url] + +[version-image]: http://npm.qima-inc.com/badge/v/@youzan/<%= name %>.svg?style=flat-square +[download-image]: http://npm.qima-inc.com/badge/d/@youzan/<%= name %>.svg?style=flat-square +[download-url]: http://npm.qima-inc.com/package/@youzan/<%= name %> + +## Demo + +## Usage + +## API + +| 参数 | 说明 | 类型 | 默认值 | 可选值 | +|-----------|-----------|-----------|-------------|-------------| +| className | 自定义额外类名 | string | '' | '' | + + + + +## License +[MIT](https://opensource.org/licenses/MIT) diff --git a/packages/badge/index.js b/packages/badge/index.js new file mode 100644 index 000000000..dc8381205 --- /dev/null +++ b/packages/badge/index.js @@ -0,0 +1,3 @@ +import Badge from './src/badge'; + +export default Badge; diff --git a/packages/badge/package.json b/packages/badge/package.json new file mode 100644 index 000000000..7dbfa2900 --- /dev/null +++ b/packages/badge/package.json @@ -0,0 +1,10 @@ +{ + "name": "<%= name %>", + "version": "<%= version %>", + "description": "<%= description %>", + "main": "./lib/index.js", + "author": "<%= author %>", + "license": "<%= license %>", + "devDependencies": {}, + "dependencies": {} +} diff --git a/packages/badge/src/badge-group.vue b/packages/badge/src/badge-group.vue new file mode 100644 index 000000000..1b928e828 --- /dev/null +++ b/packages/badge/src/badge-group.vue @@ -0,0 +1,11 @@ + + + diff --git a/packages/badge/src/badge.vue b/packages/badge/src/badge.vue new file mode 100644 index 000000000..e8df950ab --- /dev/null +++ b/packages/badge/src/badge.vue @@ -0,0 +1,23 @@ + + \ No newline at end of file diff --git a/packages/zanui-css/src/badge.css b/packages/zanui-css/src/badge.css new file mode 100644 index 000000000..5e1d816ed --- /dev/null +++ b/packages/zanui-css/src/badge.css @@ -0,0 +1,71 @@ +@import "./common/var.pcss"; +@import "./mixins/border_retina.pcss"; + +@component-namespace z { + @b badge-group { + position: relative; + width: 85px; + &::after { + @mixin border-retina (top); + } + } + @b badge { + display: block; + overflow: hidden; + position: relative; + padding: 20px 15px; + box-sizing: border-box; + line-height: 14px; + background-color: $c-background; + color: $c-gray-darker; + font-size: 14px; + text-decoration: none; + white-space: nowrap; + @e active { + display: none; + position: absolute; + left: 0; + top: 0; + width: 3px; + height: 100%; + background-color: #FF4444; + } + @e info { + position: absolute; + top: 2px; + right: 2px; + font-size: 10px; + transform:scale(0.8); + text-align: center; + box-sizing: border-box; + padding: 0 6px; + min-width: 18px; + height: 18px; + line-height: 18px; + border-radius: 9px; + background-color: #FF4444; + color: $c-white; + } + @when select { + font-weight: bold; + color: $c-black; + background-color: $c-white; + .z-badge__active { + display: block; + } + &::after { + @mixin border-retina (top); + @mixin border-retina (right); + @mixin border-retina (left); + } + } + &::after { + @mixin border-retina (bottom); + } + &:last-child { + &::after { + border-bottom: 0; + } + } + } +} \ No newline at end of file diff --git a/packages/zanui-css/src/index.css b/packages/zanui-css/src/index.css index 50bad75d3..faf3315a5 100644 --- a/packages/zanui-css/src/index.css +++ b/packages/zanui-css/src/index.css @@ -12,3 +12,4 @@ @import './popup.css'; @import './radio.css'; @import './switch.css'; +@import './badge.css'; diff --git a/src/index.js b/src/index.js index d591aba7e..1ef347b6e 100644 --- a/src/index.js +++ b/src/index.js @@ -10,6 +10,8 @@ import Dialog from '../packages/dialog/index.js'; import Picker from '../packages/picker/index.js'; import RadioGroup from '../packages/radio-group/index.js'; import Loading from '../packages/loading/index.js'; +import Badge from '../packages/badge/index.js'; +import BadgeGroup from '../packages/badge-group/index.js'; const install = function(Vue) { if (install.installed) return; @@ -25,6 +27,8 @@ const install = function(Vue) { Vue.component(Picker.name, Picker); Vue.component(RadioGroup.name, RadioGroup); Vue.component(Loading.name, Loading); + Vue.component(Badge.name, Badge); + Vue.component(BadgeGroup.name, BadgeGroup); }; // auto install @@ -46,5 +50,7 @@ module.exports = { Dialog, Picker, RadioGroup, - Loading + Loading, + Badge, + BadgeGroup };