From bb71db59bab58a66e566ad2bbc2194e4f23c3c7e Mon Sep 17 00:00:00 2001
From: supergaojian <402853745@qq.com>
Date: Tue, 2 Apr 2019 20:31:45 +0800
Subject: [PATCH] feat(Ruler):add new component (#382)

---
 components/index.js                   |   3 +
 components/ruler/README.en-US.md      |  34 +++
 components/ruler/README.md            |  34 +++
 components/ruler/component.js         |   7 +
 components/ruler/demo/cases/demo0.vue |  37 +++
 components/ruler/demo/cases/demo1.vue |  39 +++
 components/ruler/demo/cases/demo2.vue |  49 ++++
 components/ruler/demo/index.vue       |  26 ++
 components/ruler/index.vue            | 354 ++++++++++++++++++++++++++
 components/ruler/test/index.spec.js   |  16 ++
 examples/components.json              |   2 +-
 examples/demo-index.js                |   2 +-
 12 files changed, 601 insertions(+), 2 deletions(-)
 create mode 100644 components/ruler/README.en-US.md
 create mode 100644 components/ruler/README.md
 create mode 100644 components/ruler/component.js
 create mode 100644 components/ruler/demo/cases/demo0.vue
 create mode 100644 components/ruler/demo/cases/demo1.vue
 create mode 100644 components/ruler/demo/cases/demo2.vue
 create mode 100644 components/ruler/demo/index.vue
 create mode 100644 components/ruler/index.vue
 create mode 100644 components/ruler/test/index.spec.js

diff --git a/components/index.js b/components/index.js
index 50b2b3770..7bbaab1eb 100644
--- a/components/index.js
+++ b/components/index.js
@@ -58,6 +58,7 @@ import Transition from './transition'
 import DetailItem from './detail-item'
 import Slider from './slider'
 import Progress from './progress'
+import Ruler from './ruler'
 /* @init<%import ${componentNameUpper} from './${componentName}'%> */
 
 // Totally importing reminder
@@ -125,6 +126,7 @@ export const components = {
   DetailItem,
   Slider,
   Progress,
+  Ruler,
   /* @init<%${componentNameUpper},%> */
 }
 
@@ -213,6 +215,7 @@ export {
   DetailItem,
   Slider,
   Progress,
+  Ruler,
   /* @init<%${componentNameUpper},%> */
 }
 
diff --git a/components/ruler/README.en-US.md b/components/ruler/README.en-US.md
new file mode 100644
index 000000000..6f6f3a7ff
--- /dev/null
+++ b/components/ruler/README.en-US.md
@@ -0,0 +1,34 @@
+---
+title: Ruler
+preview: https://didi.github.io/mand-mobile/examples/#/ruler
+---
+
+Sliding selection
+
+### Import
+
+```javascript
+import { Ruler } from 'mand-mobile'
+
+Vue.component(Ruler.name, Ruler)
+```
+
+### Code Examples
+<!-- DEMO -->
+
+### API
+
+#### [Ruler] Props
+|Props | Description | Type | Default | Note|
+|----|-----|------|------|------|
+|v-model|current value|Number|0|-|
+|scope|ruler scope|Number[]|[0, 100]|-|
+|step|each large distance of the scale|Number|10|-|
+|unit|scale each small distance|Number|1|-|
+|min|minimum|Number|0|-|
+|max|maximum|Number|100|-|
+
+#### [Ruler] Events
+
+##### @change(currentValue)
+Change value
diff --git a/components/ruler/README.md b/components/ruler/README.md
new file mode 100644
index 000000000..4df27f186
--- /dev/null
+++ b/components/ruler/README.md
@@ -0,0 +1,34 @@
+---
+title: Ruler 刻度尺
+preview: https://didi.github.io/mand-mobile/examples/#/ruler
+---
+
+滑动选择
+
+### 引入
+
+```javascript
+import { Ruler } from 'mand-mobile'
+
+Vue.component(Ruler.name, Ruler)
+```
+
+### 代码演示
+<!-- DEMO -->
+
+### API
+
+#### [Ruler] Props
+|属性 | 说明 | 类型 | 默认值 | 备注 |
+|----|-----|------|------|------|
+|v-model|双向绑定的值|Number|0|-|
+|scope|刻度尺范围|Number[]|[0, 100]|-|
+|step|刻度尺每一大格步数|Number|10|-|
+|unit|刻度尺每一小格步数|Number|1|-|
+|min|最小可滑动位置|Number|0|-|
+|max|最大可滑动位置|Number|100|-|
+
+#### [Ruler] Events
+
+##### @change(currentValue)
+值发生变化事件
diff --git a/components/ruler/component.js b/components/ruler/component.js
new file mode 100644
index 000000000..02e605104
--- /dev/null
+++ b/components/ruler/component.js
@@ -0,0 +1,7 @@
+export default {
+  "name": "ruler",
+  "text": "刻度尺",
+  "category": "form",
+  "description": "刻度尺",
+  "author": "supergaojian <402853745@qq.com>"
+}
\ No newline at end of file
diff --git a/components/ruler/demo/cases/demo0.vue b/components/ruler/demo/cases/demo0.vue
new file mode 100644
index 000000000..d53bf7c51
--- /dev/null
+++ b/components/ruler/demo/cases/demo0.vue
@@ -0,0 +1,37 @@
+<template>
+  <div class="md-example-child md-example-child-single-component">
+    <p>当前值：{{ value }}</p>
+    <div class="container">
+      <md-ruler
+        :scope="scope"
+        :step="100"
+        :unit="10"
+        v-model="value"
+      ></md-ruler>
+    </div>
+	</div>
+</template>
+
+<script>
import {Ruler} from 'mand-mobile'
+
+export default {
+  name: 'ruler-demo',
+  title: '基本',
+  components: {
+    [Ruler.name]: Ruler,
+  },
+  data() {
+    return {
+      value: 1000,
+      scope: [1000, 2000],
+    }
+  },
+}
+
</script>
+
+<style lang="stylus" scoped>
+.md-example-child-single-component
+  .container
+    margin 0 auto
+    width 640px
+</style>
diff --git a/components/ruler/demo/cases/demo1.vue b/components/ruler/demo/cases/demo1.vue
new file mode 100644
index 000000000..6d70f9a12
--- /dev/null
+++ b/components/ruler/demo/cases/demo1.vue
@@ -0,0 +1,39 @@
+<template>
+  <div class="md-example-child md-example-child-single-component">
+    <p>当前值：{{ value }}</p>
+    <div class="container">
+      <md-ruler
+        :scope="scope"
+        :step="100"
+        :unit="10"
+        :max="1800"
+        :min="1200"
+        v-model="value"
+      ></md-ruler>
+    </div>
+  </div>
+</template>
+
+<script>
import {Ruler} from 'mand-mobile'
+
+export default {
+  name: 'ruler-demo',
+  title: '最大1800，最小1200',
+  components: {
+    [Ruler.name]: Ruler,
+  },
+  data() {
+    return {
+      value: 1305,
+      scope: [1000, 2000],
+    }
+  },
+}
+
</script>
+
+<style lang="stylus" scoped>
+  .md-example-child-single-component
+    .container
+      margin 0 auto
+      width 640px
+</style>
diff --git a/components/ruler/demo/cases/demo2.vue b/components/ruler/demo/cases/demo2.vue
new file mode 100644
index 000000000..574e0b0a5
--- /dev/null
+++ b/components/ruler/demo/cases/demo2.vue
@@ -0,0 +1,49 @@
+<template>
+  <div class="md-example-child md-example-child-single-component">
+    <p>当前值：{{ value }}</p>
+    <div class="container">
+      <md-ruler
+        :scope="scope"
+        :step="100"
+        :unit="10"
+        :max="2000"
+        :min="1000"
+        v-model="value"
+      ></md-ruler>
+    </div>
+  </div>
+</template>
+
+<script>
import {Ruler} from 'mand-mobile'
+
+export default {
+  name: 'ruler-demo',
+  /* DELETE */
+  title: '触发 <a href="javascript:window.triggerRuler2()">Change to 1500</a>',
+  titleEnUS: 'trigger <a href="javascript:window.triggerRuler2()">Change to 1500</a>',
+  describe: '只在滚动停止时有效',
+  describeEnUS: 'only valid when scroll is stopped',
+  /* DELETE */
+  components: {
+    [Ruler.name]: Ruler,
+  },
+  data() {
+    return {
+      value: 1300,
+      scope: [1000, 2000],
+    }
+  },
+  mounted() {
+    window.triggerRuler2 = () => {
+      this.value = 1500
+    }
+  },
+}
+
</script>
+
+<style lang="stylus" scoped>
+  .md-example-child-single-component
+    .container
+      margin 0 auto
+      width 640px
+</style>
diff --git a/components/ruler/demo/index.vue b/components/ruler/demo/index.vue
new file mode 100644
index 000000000..c5bd079fc
--- /dev/null
+++ b/components/ruler/demo/index.vue
@@ -0,0 +1,26 @@
+<template>
+  <div class="md-example single-component">
+    <section class="md-example-section" v-for="(demo, index) in demos" :key="index">
+      <div class="md-example-title" v-html="demo.title"></div>
+      <div class="md-example-describe" v-html="demo.describe"></div>
+      <div class="md-example-content">
+        <component :is="demo"></component>
+      </div>
+    </section>
+	</div>
+</template>
+
+<script>
import createDemoModule from '../../../examples/create-demo-module'
+import Demo0 from './cases/demo0'
+import Demo1 from './cases/demo1'
+import Demo2 from './cases/demo2'
+
+export default {
+  ...createDemoModule('single-component', [Demo0, Demo1, Demo2]),
+}
+
</script>
+
+<style lang="stylus">
+.md-example.single-component
+  position relative
+</style>
diff --git a/components/ruler/index.vue b/components/ruler/index.vue
new file mode 100644
index 000000000..e813d36e9
--- /dev/null
+++ b/components/ruler/index.vue
@@ -0,0 +1,354 @@
+<template>
+  <div
+    class="md-ruler"
+    @touchstart="$_startDrag"
+    @touchend="$_stopDrag"
+  >
+    <canvas
+      class="md-ruler-canvas"
+      ref="canvas"
+    ></canvas>
+    <div class="md-ruler-cursor"></div>
+    <div class="md-ruler-arrow"></div>
+  </div>
+</template>
+
+<script>
import Scroller from '../_util/scroller'
+import {throttle} from '../_util'
+
+export default {
+  name: 'md-ruler',
+
+  components: {},
+
+  props: {
+    value: {
+      type: Number,
+      default: 0,
+    },
+    scope: {
+      type: Array,
+      default: () => [0, 100],
+    },
+    step: {
+      type: Number,
+      default: 10,
+    },
+    unit: {
+      type: Number,
+      default: 1,
+    },
+    min: {
+      type: Number,
+      default: 0,
+    },
+    max: {
+      type: Number,
+      default: 100,
+    },
+  },
+
+  data() {
+    return {
+      clientHeight: 60,
+      scroller: null,
+      ratio: 2,
+
+      isInitialed: false,
+      isDragging: false,
+      isScrolling: false,
+
+      x: 0,
+      scrollingX: 0,
+      blank: 30, // unit blank
+    }
+  },
+
+  computed: {
+    unitCount() {
+      const {scope: [min, max], unit} = this
+      return Math.ceil((max - min) / unit)
+    },
+
+    canvasWidth() {
+      return this.$refs.canvas.clientWidth * this.ratio
+    },
+
+    realMin() {
+      const {scope, min} = this
+      const [left] = scope
+      return min > left ? min : left
+    },
+
+    realMax() {
+      let {scope, max} = this
+      const [left, right] = scope
+      if (left > max) {
+        max = right
+      }
+      return max > right ? right : max
+    },
+
+    blankLeft() {
+      const {scope, realMin, unit, blank} = this
+      const [min] = scope
+      return Math.ceil((realMin - min) / unit) * blank
+    },
+
+    blankRight() {
+      const {scope, realMax, unit, blank} = this
+      const [, max] = scope
+      return Math.ceil((max - realMax) / unit) * blank
+    },
+  },
+
+  watch: {
+    value() {
+      if (this.isScrolling) {
+        return
+      }
+
+      this.scrollingX = 0
+      this.isScrolling = true
+      const x = this.$_initX()
+      this.$_draw(x)
+      this.scroller.scrollTo(x, 0, true)
+    },
+  },
+
+  mounted() {
+    const {$refs} = this
+
+    // without watch ctx
+    this.ctx = $refs.canvas.getContext('2d')
+
+    this.$_initCanvas()
+    this.x = this.canvasWidth
+    this.$_initScroller()
+  },
+
+  methods: {
+    // MARK: private methods
+    $_initCanvas() {
+      const {ratio, ctx, canvasWidth, clientHeight, $refs} = this
+      const {canvas} = $refs
+
+      canvas.width = canvasWidth
+      canvas.height = clientHeight * ratio
+
+      const scale = 1 / ratio
+      ctx.scale(scale, 1)
+    },
+
+    $_initScroller() {
+      const {blankLeft, blankRight, blank, unitCount, canvasWidth, clientHeight} = this
+
+      const drawFn = throttle(this.$_draw, 10)
+      const scroller = new Scroller(
+        left => {
+          this.isInitialed && drawFn(left)
+        },
+        {
+          scrollingX: true,
+          scrollingY: false,
+          snapping: true,
+          snappingVelocity: 1,
+          animationDuration: 200,
+          inRequestAnimationFrame: true,
+          scrollingComplete: () => {
+            this.isScrolling = false
+          },
+        },
+      )
+
+      // set real scroll width
+      const innerWidth = unitCount * blank + canvasWidth - blankLeft - blankRight
+      const x = this.$_initX()
+      this.$_draw(x)
+      scroller.setDimensions(canvasWidth, clientHeight, innerWidth, clientHeight)
+      scroller.setSnapSize(blank, 0)
+      scroller.scrollTo(x, 0, false)
+
+      this.scroller = scroller
+      this.isInitialed = true
+    },
+
+    $_initX() {
+      const {value, scope, realMin, realMax, unit, blank, unitCount, canvasWidth} = this
+      const [min] = scope
+
+      this.x = canvasWidth - Math.ceil((realMin - min) / unit) * blank
+
+      if (value <= realMin) {
+        return 0
+      } else if (value >= realMax) {
+        return unitCount * blank
+      } else {
+        return Math.ceil((value - realMin) / unit) * blank
+      }
+    },
+
+    $_draw(left) {
+      left = +left.toFixed(2)
+      const {ctx, ratio, scrollingX, canvasWidth, clientHeight} = this
+
+      this.scrollingX = left
+      this.x += scrollingX - left
+
+      // clear canvas
+      const scale = ratio * ratio
+      ctx.clearRect(0, 0, canvasWidth * scale, clientHeight * scale)
+
+      this.$_drawLine()
+    },
+
+    $_drawLine() {
+      const {ctx, x, scope, step, unit, ratio, blank, unitCount} = this
+      const {blankLeft, blankRight, canvasWidth} = this
+      const [scopeLeft] = scope
+
+      const _y = 120
+      const _fontSize = 22
+      const _stepUnit = Math.round(step / unit)
+
+      ctx.lineWidth = 2
+      ctx.font = `${_fontSize * ratio}px DINPro-Medium`
+
+      for (let i = 0; i <= unitCount; i++) {
+        const _x = x + i * blank
+
+        if (_x < 0 || _x > canvasWidth * 2) {
+          continue
+        }
+
+        // over range use another color
+        const outRange = _x < x + blankLeft || _x > x + 1 + unitCount * blank - blankRight
+        if (outRange) {
+          ctx.fillStyle = '#E2E4EA'
+          ctx.strokeStyle = '#E2E4EA'
+        } else {
+          ctx.fillStyle = '#C5CAD5'
+          ctx.strokeStyle = '#858B9C'
+        }
+
+        ctx.beginPath()
+        ctx.moveTo(_x, _y)
+
+        if (i % _stepUnit === 0) {
+          // draw text
+          const text = scopeLeft + unit * i
+          const textOffset = String(text).length * _fontSize / 2
+          ctx.fillText(text, _x - textOffset, _fontSize * ratio)
+
+          // draw line
+          ctx.lineTo(_x, _y - 40)
+        } else {
+          ctx.lineTo(_x, _y - 20)
+        }
+        ctx.stroke()
+      }
+
+      // draw base line
+      ctx.strokeStyle = '#E2E4EA'
+      ctx.beginPath()
+      ctx.moveTo(x, _y)
+      ctx.lineTo(x + unitCount * blank, _y)
+      ctx.stroke()
+
+      this.$_updateValue()
+    },
+
+    $_startDrag(event) {
+      if (this.isDragging) {
+        return
+      }
+
+      event.preventDefault()
+      event.stopPropagation()
+      this.scroller.doTouchStart(event.touches, event.timeStamp)
+
+      this.isDragging = true
+      this.isScrolling = true
+
+      window.addEventListener('touchmove', this.$_onDrag)
+    },
+
+    $_onDrag(event) {
+      event.preventDefault()
+      event.stopPropagation()
+      if (!this.isDragging) {
+        return
+      }
+      this.scroller.doTouchMove(event.touches, event.timeStamp, event.scale)
+    },
+
+    $_stopDrag(event) {
+      event.preventDefault()
+      event.stopPropagation()
+      this.isDragging = false
+
+      this.scroller.doTouchEnd(event.timeStamp)
+
+      window.removeEventListener('touchmove', this.$_onDrag)
+    },
+
+    $_updateValue() {
+      if (!this.isInitialed) {
+        return
+      }
+
+      const {x, scope: [min], realMin, realMax, unit, blank, canvasWidth} = this
+
+      if (x > canvasWidth) {
+        this.$_onInput(realMin)
+        return
+      }
+
+      const _x = x >= 0 ? Math.abs(x - canvasWidth) : Math.abs(x) + canvasWidth
+      let value = min + Math.round(_x / blank) * unit
+
+      value > realMax && (value = realMax)
+      value < realMin && (value = realMin)
+      this.$_onInput(value)
+    },
+
+    // MARK: events handler, 如 $_onButtonClick
+    $_onInput(value) {
+      this.$emit('input', value)
+      this.$emit('change', value)
+    },
+  },
+}
+
</script>
+
+<style lang="stylus">
+.md-ruler
+  position relative
+  padding 36px 0 20px
+  width 100%
+  height 142px
+  box-sizing border-box
+  font-family font-family-number
+  .md-ruler-canvas
+    width 100%
+    height 60px
+  .md-ruler-cursor
+    z-index 10
+    position absolute
+    top 26px
+    left 50%
+    width 2px
+    height 70px
+    transform translate(-50%)
+    background-color #2F86F6
+    box-shadow 0 2px 4px #2F86F6
+  .md-ruler-arrow
+    z-index 10
+    position absolute
+    bottom 25px
+    left 50%
+    border-bottom 10px solid #2F86F6
+    border-left 10px solid transparent
+    border-right 10px solid transparent
+    transform translate(-50%)
+</style>
diff --git a/components/ruler/test/index.spec.js b/components/ruler/test/index.spec.js
new file mode 100644
index 000000000..d6b615f73
--- /dev/null
+++ b/components/ruler/test/index.spec.js
@@ -0,0 +1,16 @@
+import SingleComponent from '../index'
+import {mount} from 'avoriaz'
+
+describe('SingleComponent', () => {
+  let wrapper
+
+  afterEach(() => {
+    wrapper && wrapper.destroy()
+  })
+
+  it('create a simple ruler', () => {
+    wrapper = mount(SingleComponent)
+
+    expect(wrapper.hasClass('md-ruler')).to.be.true
+  })
+})
diff --git a/examples/components.json b/examples/components.json
index 12afd6a58..423dc7d1d 100644
--- a/examples/components.json
+++ b/examples/components.json
@@ -1 +1 @@
-[{"category":"basic","name":"Basic","text":"基础","list":[{"name":"ActionBar","path":"/action-bar","icon":"action-bar","text":"操作栏"},{"name":"ActivityIndicator","path":"/activity-indicator","icon":"activity-indicator","text":"活动指示器"},{"path":"/button","name":"Button","icon":"button","text":"按钮"},{"name":"CellItem","path":"/cell-item","icon":"cell-item","text":"列表单元"},{"name":"DetailItem","path":"/detail-item","icon":"detail-item","text":"清单项"},{"name":"DropMenu","path":"/drop-menu","icon":"drop-menu","text":"下拉菜单"},{"path":"/icon","name":"Icon","icon":"icon","text":"图标"},{"name":"ImageReader","path":"/image-reader","icon":"image-reader","text":"图片选择器"},{"name":"ImageViewer","path":"/image-viewer","icon":"image-viewer","text":"图片浏览器"},{"name":"NoticeBar","path":"/notice-bar","icon":"notice-bar","text":"通知栏"},{"name":"Progress","path":"/progress","icon":"progress","text":"进度"},{"name":"Stepper","path":"/stepper","icon":"stepper","text":"步进器"},{"name":"Steps","path":"/steps","icon":"steps","text":"步骤条"},{"name":"Swiper","path":"/swiper","icon":"swiper","text":"轮播"},{"name":"TabBar","path":"/tab-bar","icon":"tab-bar","text":"标签栏"},{"name":"Tabs","path":"/tabs","icon":"tabs","text":"标签页"},{"name":"Tag","path":"/tag","icon":"tag","text":"标签"}]},{"category":"business","name":"Business","text":"业务相关","list":[{"name":"Amount","path":"/amount","icon":"amount","text":"金融数字"},{"name":"Bill","path":"/bill","icon":"bill","text":"票据"},{"name":"Captcha","path":"/captcha","icon":"captcha","text":"验证码窗口"},{"name":"Cashier","path":"/cashier","icon":"cashier","text":"收银台"},{"name":"Chart","path":"/chart","icon":"chart","text":"折线图表"},{"name":"Landscape","path":"/landscape","icon":"landscape","text":"压屏窗"},{"name":"ResultPage","path":"/result-page","icon":"result-page","text":"结果页"},{"name":"WaterMark","path":"/water-mark","icon":"water-mark","text":"水印"}]},{"category":"feedback","name":"Feedback","text":"操作反馈","list":[{"name":"ActionSheet","path":"/action-sheet","icon":"action-sheet","text":"动作面板"},{"name":"DatePicker","path":"/date-picker","icon":"date-picker","text":"日期选择器"},{"name":"Dialog","path":"/dialog","icon":"dialog","text":"模态窗"},{"name":"Picker","path":"/picker","icon":"picker","text":"选择器"},{"name":"Popup","path":"/popup","icon":"popup","text":"弹出层"},{"name":"Selector","path":"/selector","icon":"selector","text":"列表选择器"},{"name":"TabPicker","path":"/tab-picker","icon":"tab-picker","text":"多频道选择器"},{"name":"Tip","path":"/tip","icon":"tip","text":"气泡提示"},{"name":"Toast","path":"/toast","icon":"toast","text":"轻提示"},{"name":"Transition","path":"/transition","icon":"transition","text":"动画"}]},{"category":"form","name":"Form","text":"表单相关","list":[{"name":"Agree","path":"/agree","icon":"agree","text":"勾选按钮"},{"name":"Check","path":"/check","icon":"check","text":"选择项组"},{"name":"Codebox","path":"/codebox","icon":"codebox","text":"字符码输入框"},{"name":"Field","path":"/field","icon":"field","text":"区域列表组合"},{"name":"InputItem","path":"/input-item","icon":"input-item","text":"输入框"},{"name":"NumberKeyboard","path":"/number-keyboard","icon":"number-keyboard","text":"数字键盘"},{"name":"Radio","path":"/radio","icon":"radio","text":"单选框"},{"name":"Slider","path":"/slider","icon":"slider","text":"滑块"},{"name":"Switch","path":"/switch","icon":"switch","text":"开关"}]},{"category":"gesture","name":"Gesture","text":"手势","list":[{"name":"ScrollView","path":"/scroll-view","icon":"scroll-view","text":"滚动区域/下拉刷新"}]}]
\ No newline at end of file
+[{"category":"basic","name":"Basic","text":"基础","list":[{"name":"ActionBar","path":"/action-bar","icon":"action-bar","text":"操作栏"},{"name":"ActivityIndicator","path":"/activity-indicator","icon":"activity-indicator","text":"活动指示器"},{"path":"/button","name":"Button","icon":"button","text":"按钮"},{"name":"CellItem","path":"/cell-item","icon":"cell-item","text":"列表单元"},{"name":"DetailItem","path":"/detail-item","icon":"detail-item","text":"清单项"},{"name":"DropMenu","path":"/drop-menu","icon":"drop-menu","text":"下拉菜单"},{"path":"/icon","name":"Icon","icon":"icon","text":"图标"},{"name":"ImageReader","path":"/image-reader","icon":"image-reader","text":"图片选择器"},{"name":"ImageViewer","path":"/image-viewer","icon":"image-viewer","text":"图片浏览器"},{"name":"NoticeBar","path":"/notice-bar","icon":"notice-bar","text":"通知栏"},{"name":"Progress","path":"/progress","icon":"progress","text":"进度"},{"name":"Stepper","path":"/stepper","icon":"stepper","text":"步进器"},{"name":"Steps","path":"/steps","icon":"steps","text":"步骤条"},{"name":"Swiper","path":"/swiper","icon":"swiper","text":"轮播"},{"name":"TabBar","path":"/tab-bar","icon":"tab-bar","text":"标签栏"},{"name":"Tabs","path":"/tabs","icon":"tabs","text":"标签页"},{"name":"Tag","path":"/tag","icon":"tag","text":"标签"}]},{"category":"business","name":"Business","text":"业务相关","list":[{"name":"Amount","path":"/amount","icon":"amount","text":"金融数字"},{"name":"Bill","path":"/bill","icon":"bill","text":"票据"},{"name":"Captcha","path":"/captcha","icon":"captcha","text":"验证码窗口"},{"name":"Cashier","path":"/cashier","icon":"cashier","text":"收银台"},{"name":"Chart","path":"/chart","icon":"chart","text":"折线图表"},{"name":"Landscape","path":"/landscape","icon":"landscape","text":"压屏窗"},{"name":"ResultPage","path":"/result-page","icon":"result-page","text":"结果页"},{"name":"WaterMark","path":"/water-mark","icon":"water-mark","text":"水印"}]},{"category":"feedback","name":"Feedback","text":"操作反馈","list":[{"name":"ActionSheet","path":"/action-sheet","icon":"action-sheet","text":"动作面板"},{"name":"DatePicker","path":"/date-picker","icon":"date-picker","text":"日期选择器"},{"name":"Dialog","path":"/dialog","icon":"dialog","text":"模态窗"},{"name":"Picker","path":"/picker","icon":"picker","text":"选择器"},{"name":"Popup","path":"/popup","icon":"popup","text":"弹出层"},{"name":"Selector","path":"/selector","icon":"selector","text":"列表选择器"},{"name":"TabPicker","path":"/tab-picker","icon":"tab-picker","text":"多频道选择器"},{"name":"Tip","path":"/tip","icon":"tip","text":"气泡提示"},{"name":"Toast","path":"/toast","icon":"toast","text":"轻提示"},{"name":"Transition","path":"/transition","icon":"transition","text":"动画"}]},{"category":"form","name":"Form","text":"表单相关","list":[{"name":"Agree","path":"/agree","icon":"agree","text":"勾选按钮"},{"name":"Check","path":"/check","icon":"check","text":"选择项组"},{"name":"Codebox","path":"/codebox","icon":"codebox","text":"字符码输入框"},{"name":"Field","path":"/field","icon":"field","text":"区域列表组合"},{"name":"InputItem","path":"/input-item","icon":"input-item","text":"输入框"},{"name":"NumberKeyboard","path":"/number-keyboard","icon":"number-keyboard","text":"数字键盘"},{"name":"Radio","path":"/radio","icon":"radio","text":"单选框"},{"name":"Ruler","path":"/ruler","icon":"ruler","text":"刻度尺"},{"name":"Slider","path":"/slider","icon":"slider","text":"滑块"},{"name":"Switch","path":"/switch","icon":"switch","text":"开关"}]},{"category":"gesture","name":"Gesture","text":"手势","list":[{"name":"ScrollView","path":"/scroll-view","icon":"scroll-view","text":"滚动区域/下拉刷新"}]}]
\ No newline at end of file
diff --git a/examples/demo-index.js b/examples/demo-index.js
index 1b41470ba..efa3cd096 100644
--- a/examples/demo-index.js
+++ b/examples/demo-index.js
@@ -46,4 +46,4 @@ export {default as Transition} from '../components/transition/demo'
 export {default as DetailItem} from '../components/detail-item/demo'
 export {default as Slider} from '../components/slider/demo'
 export {default as Progress} from '../components/progress/demo'
-/* @init<%export {default as ${componentNameUpper}} from '../components/${componentName}/demo'%> */
+export {default as Ruler} from '../components/ruler/demo'
/* @init<%export {default as ${componentNameUpper}} from '../components/${componentName}/demo'%> */