• 引入
  • 代码演示
    • 基本
      • 请在移动设备中扫码预览
    • 触发 Change to 1500
      • 只在滚动停止时有效
      • 请在移动设备中扫码预览
    • 自定义step展示位置
      • 请在移动设备中扫码预览
    • 最大1800，最小1200
      • 请在移动设备中扫码预览
    • 自定义step展示文案
      • 请在移动设备中扫码预览
  • API
    • Ruler Props
    • Ruler Events
      • @change(currentValue)

    Ruler 刻度尺

    Scan me!

    可滑动刻度尺2.2.0+

    引入

    1. import { Ruler } from 'mand-mobile'
    3. Vue.component(Ruler.name, Ruler)

    代码演示

    基本

    请在移动设备中扫码预览

    Ruler 刻度尺 - 图2

    1.         <template>
    2.   <div class="md-example-child md-example-child-single-component">
    3.     <p>当前值：{{ value }}</p>
    4.     <div class="container">
    5.       <md-ruler
    6.         :scope="scope"
    7.         :step="100"
    8.         :unit="10"
    9.         v-model="value"
    10.       ></md-ruler>
    11.     </div>
    12.     </div>
    13. </template>
    15. <script>
    16. import {Ruler} from 'mand-mobile'
    18. export default {
    19.   name: 'ruler-demo-0',
    20.   components: {
    21.     [Ruler.name]: Ruler,
    22.   },
    23.   data() {
    24.     return {
    25.       value: 1000,
    26.       scope: [1000, 2000],
    27.     }
    28.   },
    29. }
    31. </script>
    33. <style lang="stylus" scoped>
    34. .md-example-child-single-component
    35.   .container
    36.     margin 0 auto
    37.     width 640px
    38. </style>
    39.  
    40.

    触发 Change to 1500

    只在滚动停止时有效
    请在移动设备中扫码预览

    Ruler 刻度尺 - 图3

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

    自定义step展示位置

    请在移动设备中扫码预览

    Ruler 刻度尺 - 图4

            <template>
  <div class="md-example-child md-example-child-single-component">
    <p>当前值：{{ value }}</p>
    <div class="container">
      <md-ruler
        v-model="value"
        step-text-position="bottom"
        :scope="scope"
        :step="100"
        :unit="10"
      ></md-ruler>
    </div>
  </div>
</template>

<script>
import {Ruler} from 'mand-mobile'

export default {
  name: 'ruler-demo',
  components: {
    [Ruler.name]: Ruler,
  },
  data() {
    return {
      value: 1300,
      scope: [1000, 2000],
    }
  },
}

</script>

<style lang="stylus" scoped>
  .md-example-child-single-component
    .container
      margin 0 auto
      width 640px
</style>

    最大1800，最小1200

    请在移动设备中扫码预览

    Ruler 刻度尺 - 图5

            <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-1',
  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>

    自定义step展示文案

    请在移动设备中扫码预览

    Ruler 刻度尺 - 图6

            <template>
  <div class="md-example-child md-example-child-single-component">
    <p>当前值：{{ value }}</p>
    <div class="container">
      <md-ruler
        v-model="value"
        :scope="scope"
        :step="100"
        :unit="10"
        :step-text-render="stepTextRender"
      ></md-ruler>
    </div>
  </div>
</template>

<script>
import {Ruler} from 'mand-mobile'

export default {
  name: 'ruler-demo',
  components: {
    [Ruler.name]: Ruler,
  },
  data() {
    return {
      value: 1300,
      scope: [1000, 2000],
    }
  },
  methods: {
    stepTextRender(step) {
      return step + 'cm'
    },
  },
}

</script>

<style lang="stylus" scoped>
  .md-example-child-single-component
    .container
      margin 0 auto
      width 640px
</style>

    API

    Ruler Props

    属性说明类型默认值备注
    v-model双向绑定的值Number0-
    scope刻度尺范围Number[][0, 100]-
    step刻度尺每一大格步数Number10-
    unit刻度尺每一小格步数Number1-
    min最小可滑动位置Number0-
    max最大可滑动位置Number100-
    stepTextPosition2.2.1+Step标志位置String'top'可选'top', 'bottom'
    stepTextRender2.2.1+自定义step文案Functionnoop自定义函数应该返回字符串

    Ruler Events

    @change(currentValue)

    值发生变化事件