quantity component

components.json

@@ -28,5 +28,6 @@
   "image-preview": "./packages/image-preview/index.js",
   "col": "./packages/col/index.js",
   "row": "./packages/row/index.js",
-  "actionsheet": "./packages/actionsheet/index.js"
+  "actionsheet": "./packages/actionsheet/index.js",
+  "quantity": "./packages/quantity/index.js"
 }

docs/ExamplesDocsApp.vue

@@ -72,6 +72,12 @@ export default {
       color: #5e6d82;
       margin: 14px 0;
     }
+
+     p > code {
+      background-color: #eee;
+      padding: 2px 4px;
+      color: #26a2ff;
+    }
   }
 
   .demo-page {

docs/examples-docs/quantity.md

@@ -0,0 +1,65 @@
+<style>
+@component-namespace demo {
+  @b quantity {
+    .zan-quantity {
+      margin: 15px;
+    }
+
+    .curr-quantity {
+      margin: 15px;
+    }
+  }
+}
+</style>
+
+<script>
+export default {
+  data() {
+    return {
+      quantity1: 1,
+      quantity2: null,
+    };
+  }
+};
+</script>
+
+## Quantity
+
+### 基础用法
+
+:::demo 基础用法
+```html
+<zan-quantity v-model="quantity1"></zan-quantity>
+<p class="curr-quantity">当前值：{{ quantity1 }}</p>
+```
+:::
+
+### 禁用Quantity
+
+:::demo 禁用Quantity
+```html
+<zan-quantity v-model="quantity1" disabled></zan-quantity>
+```
+:::
+
+### 高级用法
+
+默认是每次加减为1，可以对组件设置`step`、`min`、`max`、`defaultValue`属性。
+
+:::demo 高级用法
+```html
+<zan-quantity v-model="quantity2" min="5" max="40" step="2" default-value="9"></zan-quantity>
+<p class="curr-quantity">当前值：{{ quantity2 }}</p>
+```
+:::
+
+### API
+
+| 参数       | 说明      | 类型       | 默认值       | 可选值       |
+|-----------|-----------|-----------|-------------|-------------|
+| min | 最小值 | string/number | 1          | ''          |
+| max | 最大值 | string/number  | ''          | ''          |
+| step | 步数 | string/number  | 1         | ''          |
+| disabled | 是否被禁用了 | boolean  | false      | ''          |
+| defaultValue | 默认值 | string/number  | 1      | ''          |
+

docs/nav.config.json

@@ -133,6 +133,10 @@
               "path": "/swipe",
               "title": "Swipe"
             },
+            {
+              "path": "/quantity",
+              "title": "Quantity"
+            },
             {
               "path": "/waterfall",
               "title": "Waterfall"

packages/quantity/CHANGELOG.md

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

packages/quantity/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/quantity/index.js

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

packages/quantity/package.json

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

packages/quantity/src/quantity.vue

@@ -0,0 +1,104 @@
+<template>
+  <div class="zan-quantity">
+    <button
+      @click="handleChange('minus')"
+      class="zan-quantity__stepper zan-quantity__minus"
+      :class="{
+        'zan-quantity__minus--disabled': isMinusDisabled
+      }">
+    </button>
+    <input type="text" class="zan-quantity__input" :value="currentValue" @input="handleInputChange" :disabled="disabled">
+    <button
+      @click="handleChange('plus')"
+      class="zan-quantity__stepper zan-quantity__plus"
+      :class="{
+        'zan-quantity__plus--disabled': isPlusDisabled
+      }">
+    </button>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'zan-quantity',
+
+  props: {
+    min: {
+      type: [String, Number],
+      default: 1
+    },
+    max: {
+      type: [String, Number],
+      default: Infinity
+    },
+    value: {},
+    step: {
+      type: [String, Number],
+      default: 1
+    },
+    disabled: Boolean,
+    defaultValue: {
+      type: [String, Number],
+      default: 1
+    }
+  },
+
+  data() {
+    return {
+      currentValue: this.value ? +this.value : +this.defaultValue
+    };
+  },
+
+  computed: {
+    isMinusDisabled() {
+      const min = +this.min;
+      const step = +this.step;
+      const currentValue = +this.currentValue;
+      return min === currentValue || (currentValue - step) < min || this.disabled;
+    },
+    isPlusDisabled() {
+      const max = +this.max;
+      const step = +this.step;
+      const currentValue = +this.currentValue;
+      return max === currentValue || (currentValue + step) > max || this.disabled;
+    }
+  },
+
+  watch: {
+    currentValue(val) {
+      this.$emit('input', +val);
+    },
+    value(val) {
+      if (val) {
+        this.currentValue = +val;
+      }
+    }
+  },
+
+  methods: {
+    handleInputChange(event) {
+      let val = +event.target.value;
+      const max = +this.max;
+      const min = +this.min;
+
+      if (val > max) {
+        val = max;
+      } else if (val < min) {
+        val = min;
+      }
+
+      this.currentValue = val;
+    },
+    handleChange(type) {
+      if ((this.isMinusDisabled && type === 'minus') || (this.isPlusDisabled && type === 'plus')) {
+        return;
+      }
+
+      const step = +this.step;
+      const currentValue = +this.currentValue;
+      this.currentValue = type === 'minus' ? (currentValue - step) : (currentValue + step);
+      this.$emit('change', this.currentValue);
+    }
+  }
+};
+</script>

packages/zanui-css/src/index.css

@@ -23,3 +23,4 @@
 @import './row.css';
 @import './image_preview.css';
 @import './actionsheet.css';
+@import './quantity.css';

packages/zanui-css/src/quantity.css

@@ -0,0 +1,77 @@
+@import './common/var.css';
+
+@component-namespace zan {
+  @b quantity {
+    font-size: 0;
+
+    @e stepper {
+      width: 40px;
+      height: 30px;
+      box-sizing: border-box;
+      background-color: $c-white;
+      border: 1px solid $c-gray-dark;
+      position: relative;
+      outline: 0;
+      padding: 5px;
+      vertical-align: middle;
+
+      &::before {
+        width: 9px;
+        height: 1px;
+      }
+
+      &::after {
+        width: 1px;
+        height: 9px;
+      }
+
+      &::before,
+      &::after {
+        content: '';
+        position: absolute;
+        margin: auto;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background-color: #6c6c6c;
+      }
+    }
+
+    @e minus {
+      border-radius: 2px 0 0 2px;
+
+      &::after {
+        display: none;
+      }
+
+      @m disabled {
+        background-color: #f8f8f8;
+        border-color: #e8e8e8 #999 #e8e8e8 #e8e8e8;
+      }
+    }
+
+    @e plus {
+      border-radius: 0 2px 2px 0;
+
+      @m disabled {
+        background-color: #f8f8f8;
+        border-color: #e8e8e8 #e8e8e8 #e8e8e8 #999;
+      }
+    }
+
+    @e input {
+      width: 33px;
+      height: 26px;
+      padding: 1px;
+      border: 1px solid $c-gray-dark;
+      border-width: 1px 0;
+      box-sizing: content-box;
+      color: $c-gray-darker;
+      font-size: 14px;
+      outline: 0;
+      vertical-align: middle;
+      text-align: center;
+    }
+  }
+}

src/index.js

@@ -28,6 +28,7 @@ import ImagePreview from '../packages/image-preview/index.js';
 import Col from '../packages/col/index.js';
 import Row from '../packages/row/index.js';
 import Actionsheet from '../packages/actionsheet/index.js';
+import Quantity from '../packages/quantity/index.js';
 
 const install = function(Vue) {
   if (install.installed) return;
@@ -58,6 +59,7 @@ const install = function(Vue) {
   Vue.component(Col.name, Col);
   Vue.component(Row.name, Row);
   Vue.component(Actionsheet.name, Actionsheet);
+  Vue.component(Quantity.name, Quantity);
 };
 
 // auto install
@@ -97,5 +99,6 @@ module.exports = {
   ImagePreview,
   Col,
   Row,
-  Actionsheet
+  Actionsheet,
+  Quantity
 };