yin_yu820
/
gwlz


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250
							<template>

	<view class="">

		<u-cell-group :border="true">

			<u-cell

			    :border="true"

			    title="基础用法"

			>

				<u-number-box

				    slot="right-icon"

				    v-model="value1"

				    step="1"

				    @change="change"

				>

				</u-number-box>

			</u-cell>

			<u-cell

			    :border="true"

			    title="步长设置"

			>

				<u-number-box

				    slot="right-icon"

				    v-model="value2"

				    :step="step1"

				    @change="change"

				>

				</u-number-box>

			</u-cell>

			<u-cell

			    :border="true"

			    title="限制输入范围"

			>

				<u-number-box

				    slot="right-icon"

				    v-model="value3"

				    step="1"

				    :min="min1"

				    :max="max1"

				    @change="change"

				>

				</u-number-box>

			</u-cell>

			<u-cell

			    :border="true"

			    title="限制输入整数"

			>

				<u-number-box

				    slot="right-icon"

				    v-model="value4"

				    step="1"

				    integer

				    @change="change"

				>

				</u-number-box>

			</u-cell>

			<u-cell

			    :border="true"

			    title="禁用状态"

			>

				<u-number-box

				    slot="right-icon"

				    v-model="value5"

				    step="1"

				    :disabled="true"

				    @change="change"

				>

				</u-number-box>

			</u-cell>

			<u-cell

			    :border="true"

			    title="禁用输入框"

			>

				<u-number-box

				    slot="right-icon"

				    v-model="value6"

				    step="1"

				    :disabledInput="true"

				    @change="change"

				>

				</u-number-box>

			</u-cell>

			<u-cell

			    :border="true"

			    title="禁用长按"

			>

				<u-number-box

				    slot="right-icon"

				    v-model="value7"

				    step="1"

				    :longPress="false"

				    @change="change"

				>

				</u-number-box>

			</u-cell>

			<u-cell

			    :border="true"

			    title="固定小数位数"

			>

				<u-number-box

				    slot="right-icon"

				    v-model="value8"

				    step="0.2"

				    decimalLength="1"

				    @change="change"

				>

				</u-number-box>

			</u-cell>

			<u-cell

			    :border="true"

			    title="异步变更"

			>

				<u-number-box

				    slot="right-icon"

				    v-model="value9"

				    step="1"

				    :asyncChange="asyncChange"

				    @change="myAsyncChange"

				>

				</u-number-box>

			</u-cell>

			<u-cell

			    :border="true"

			    title="自定义大小颜色样式"

			>

				<u-number-box

				    slot="right-icon"

				    v-model="value10"

				    step="1"

				    :color="color"

				    :buttonSize="buttonSize"

				    :bgColor="bgColor"

				    @change="change"

				    iconStyle="color: #fff"

				>

				</u-number-box>

			</u-cell>

			<u-cell

			    :border="true"

			    title="自定义(为0时减少按钮会消失)"

			>

				<u-number-box

				    slot="right-icon"

				    v-model="value11"

				    step="1"

				    :min="0"

				    :showMinus="value11 > 0"

				>

					<view

					    slot="minus"

					    class="minus"

					>

						<u-icon

						    name="minus"

						    size="12"

						></u-icon>

					</view>

					<text

					    slot="input"

					    style="width: 50px;text-align: center;"

					    class="input"

					>{{value11}}</text>

					<view

					    slot="plus"

					    class="plus"

					>

						<u-icon

						    name="plus"

						    color="#FFFFFF"

						    size="12"

						></u-icon>

					</view>

				</u-number-box>

			</u-cell>

		</u-cell-group>

	</view>

</template>


<script>

	export default {

		data() {

			return {

				value1: 3,

				value2: 3,

				value3: 3,

				value4: 3,

				value5: 3,

				value6: 3,

				value7: 3,

				value8: 3.1,

				value9: 3,

				value10: 3,

				value11: 3,

				step1: 2,

				min1: 5,

				max1: 8,

				asyncChange: true,

				color: '#FFFFFF',

				buttonSize: 36,

				bgColor: '#2979ff'

			}

		},

		methods: {

			change(e) {

				console.log('change', e);

			},

			myAsyncChange(e) {

				this.asyncChange = false

				uni.showLoading({

					title: '正在加载'

				})

				setTimeout(() => {

					uni.hideLoading()

					this.value9 = e

					this.asyncChange = true

				}, 3000)

			}

		}

	}

</script>


<style lang="scss">

	.minus {

		width: 22px;

		height: 22px;

		border-width: 1px;

		border-color: #E6E6E6;

		border-top-left-radius: 100px;

		border-top-right-radius: 100px;

		border-bottom-left-radius: 100px;

		border-bottom-right-radius: 100px;

		@include flex;

		justify-content: center;

		align-items: center;

	}


	.input {

		padding: 0 10px;

	}


	.plus {

		width: 22px;

		height: 22px;

		background-color: #FF0000;

		border-radius: 50%;

		/* #ifndef APP-NVUE */

		display: flex;

		/* #endif */

		justify-content: center;

		align-items: center;

	}

</style>