wxc-counter

wxc-counter

MinUI 小程序组件 - 数字框

Install

$ min install @minui/wxc-counter

Demos

默认

默认计数器展示

<template>
  <wxc-counter number="111" max="{{10000}}" min="1" bind:changenumber="onChangeNumber"></wxc-counter>
</template>
<script>
export default {
  config: {
    usingComponents: {
      'wxc-counter': '@minui/wxc-counter'
    }
  },
  data: {},
  /** note: 在 wxp 文件或者页面文件中请去掉 methods 包装 */
  methods: {
    onChangeNumber (e) {
      console.log(e.detail);
    }
  }
}
</script>
<style>
</style>

不可更改数量

禁止更改计数器展示

<template>
  <wxc-counter disabled="{{true}}" number="1234" max="10000" min="1" bind:changenumber="onChangeNumber"></wxc-counter>
</template>
<script>
export default {
  config: {
    usingComponents: {
      'wxc-counter': '@minui/wxc-counter'
    }
  },
  data: {},
  /** note: 在 wxp 文件或者页面文件中请去掉 methods 包装 */
  methods: {
    onChangeNumber (e) {
      console.log(e.detail);
    }
  }
}
</script>
<style>
</style>

设置最大值和操作符号颜色

设置最大值的计数器展示

<template>
  <wxc-counter number="5" max="{{5}}" min="1" color="#333" bind:changenumber="onChangeNumber"></wxc-counter>
</template>
<script>
export default {
  config: {
    usingComponents: {
      'wxc-counter': '@minui/wxc-counter'
    }
  },
  data: {},
  /** note: 在 wxp 文件或者页面文件中请去掉 methods 包装 */
  methods: {
    onChangeNumber (e) {
      console.log(e.detail);
    }
  }
}
</script>
<style>
</style>

设置最小值

设置最小值的计数器展示

<template>
  <wxc-counter number="1" max="{{10000}}" min="1" bind:changenumber="onChangeNumber"></wxc-counter>
</template>
<script>
export default {
  config: {
    usingComponents: {
      'wxc-counter': '@minui/wxc-counter'
    }
  },
  data: {},
  /** note: 在 wxp 文件或者页面文件中请去掉 methods 包装 */
  methods: {
    onChangeNumber (e) {
      console.log(e.detail);
    }
  }
}
</script>
<style>
</style>

API

Counter【props】

名称	描述
`number`	[说明]：当前数值，[默认值]：0，[类型]：字符串或者数值
`max`	[说明]：上限值，[默认值]：1，[类型]：字符串或者数值
`min`	[说明]：下限值，[默认值]：0，[类型]：字符串或者数值
`color`	[说明]：正常状态下加减操作符的颜色，[默认值]：#ff5777，[类型]：字符串
`changenumber`	[说明]：数值改变触发的事件，[类型]：函数

Link

	地址
	counter 组件文档 https://meili.github.io/min/docs/minui/index.html#counter
	counter 组件源码 https://github.com/meili/minui/tree/master/packages/wxc-counter
	MinUI 组件库 https://github.com/meili/minui