---
nav: default
---
### XNumber
<img width="100" src="http://qr.topscan.com/api.php?text=demo%2F%23%2Fcomponent%2Fx-number"/>
<a href="demo/#/component/x-number" target="_blank" style="font-size:12px;color:#888;">demo 原始链接：demo/#/component/x-number</a>


---
#### 演示
<div style="width:377px;height:667px;display:inline-block;border:1px dashed #ececec;border-radius:5px;overflow:hidden;">
<iframe src="demo/#/component/x-number" width="375" height="667" border="0" frameborder="0"></iframe>
</div>
#### demo 代码

``` html
<template>
  <div>
    <group title="Default">
      <x-number
        v-model="v0"
        name="number"
        title="Number"
      />
    </group>

    <group title="listen to change events">
      <x-number
        v-model="v1"
        name="listen"
        title="Number"
        :min="0"
        @on-change="change"
      />
    </group>

    <group title="set width=100">
      <x-number
        v-model="v7"
        title="Number"
        :width="100"
      />
    </group>

    <group title="set step=0.5">
      <x-number
        v-model="v6"
        title="Number"
        :step="0.5"
      />
    </group>

    <group title="set value=1, min=-5 and max=8">
      <x-number
        v-model="v2"
        title="Number"
        :min="-5"
        :max="8"
      />
    </group>

    <group title="fillable = false">
      <x-number
        v-model="v3"
        title="Number"
        :fillable="false"
      />
    </group>

    <group title="with other element">
      <x-number
        v-model="v4"
        title="Number"
        :min="-5"
        :max="8"
        type="inline"
      />
      <x-number
        v-model="v5"
        title="Number"
        :min="-5"
        :max="8"
        type="inline"
      />
      <x-switch
        v-model="show"
        title="Other element"
      />
    </group>
    <group title="custom Number">
      <x-number
        v-model="v4"
        title="Number"
        :shell="false"
        :min="-5"
        :max="8"
        type="inline"
        input-classes="input"
      >
        <a
          slot="add"
          style="dispaly:inline-block;width:20px;height:20px;"
          href="javascript:void(0);"
        >A</a>
        <a
          slot="sub"
          style="dispaly:inline-block;width:20px;height:20px;"
          href="javascript:void(0);"
        >S</a>
      </x-number>
    </group>
  </div>
</template>

<script>
import { Group, XNumber, XSwitch } from '../components/_index'

export default {
  components: {
    XNumber,
    Group,
    XSwitch
  },
  data () {
    return {
      show: true,
      v0: 0,
      v1: 0,
      v2: 1,
      v3: 10,
      v4: 1,
      v5: 1,
      v6: 0,
      v7: 0
    }
  },
  methods: {
    change (val) {
      console.log('change', val)
    }
  }
}
</script>
<style lang="less">
  .input {
    border: 1px solid red;
  }
</style>

```

#### Github Issue