badge css done

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"
 }

docs/examples-docs/badge.md

@@ -0,0 +1,14 @@
+## Badge 组件
+
+### 基础用法
+
+:::demo 样例代码
+```html
+<z-badge-group>
+  <z-badge is-selected value="热销榜" info="8"></z-badge>
+  <z-badge value="花式寿司" info="99"></z-badge>
+  <z-badge value="火炽寿司"></z-badge>
+  <z-badge value="手握寿司" info="199"></z-badge>
+</z-badge-group>
+```
+:::

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",

packages/badge-group/index.js

@@ -0,0 +1,3 @@
+import BadgeGroup from '../badge/src/badge-group';
+
+export default BadgeGroup;

packages/badge/CHANGELOG.md

@@ -0,0 +1,8 @@
+## 0.0.2 (2017-01-20)
+
+* 改了bug A
+* 加了功能B
+
+## 0.0.1 (2017-01-10)
+
+* 第一版

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)

packages/badge/index.js

@@ -0,0 +1,3 @@
+import Badge from './src/badge';
+
+export default Badge;

packages/badge/package.json

@@ -0,0 +1,10 @@
+{
+  "name": "<%= name %>",
+  "version": "<%= version %>",
+  "description": "<%= description %>",
+  "main": "./lib/index.js",
+  "author": "<%= author %>",
+  "license": "<%= license %>",
+  "devDependencies": {},
+  "dependencies": {}
+}

packages/badge/src/badge-group.vue

@@ -0,0 +1,11 @@
+<template>
+  <div class="z-badge-group">
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'z-badge-group'
+};
+</script>

packages/badge/src/badge.vue

@@ -0,0 +1,23 @@
+<template>
+    <a class="z-badge" :class="{ 'is-select' : isSelected }" :href="url" @click="handleClick">
+      <div class="z-badge__active"></div>
+      <div v-if="info" class="z-badge__info">{{info}}</div>
+      {{value}}
+    </a>
+</template>
+<script>
+export default {
+  name: 'z-badge',
+  props: {
+    url: String,
+    value: String,
+    info: String,
+    isSelected: Boolean
+  },
+  methods: {
+    handleClick() {
+      this.$emit('click');
+    }
+  }
+};
+</script>

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;
+          }
+        }
+    }
+}

packages/zanui-css/src/index.css

@@ -12,3 +12,4 @@
 @import './popup.css';
 @import './radio.css';
 @import './switch.css';
+@import './badge.css';

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
 };