uni、uview自定义步进器、购物车加减

最新推荐文章于 2024-05-09 14:30:07 发布

耶啵奶膘

最新推荐文章于 2024-05-09 14:30:07 发布

阅读量2.1k

点赞数

分类专栏： uni、vue 文章标签： css css3 html

本文链接：https://blog.csdn.net/xulihua_75/article/details/127981297

版权

uni、vue 专栏收录该内容

137 篇文章 8 订阅

订阅专栏

案例演示

请添加图片描述

代码

<u-number-box v-model="numValue" @change="valChange">
	<view slot="minus" class="minus">
		<u-icon name="minus" size="12"></u-icon>
	</view>
	<input slot="input" type="number" class="input" v-model="numValue">
	<view slot="plus" class="plus">
		<u-icon name="plus" color="#FFFFFF" size="12"></u-icon>
	</view>
</u-number-box>

data() {
	return {
		numValue: 1
	}
},
methods: {
	valChange(e) {
		console.log('当前值为: ' + e.value)
	}
}

// 步进器样式start
	.minus {
		width: 22px;
		height: 22px;
		border-radius: 50%;
		@include flex;
		justify-content: center;
		align-items: center;
		background-color: #ffffff;
		border: 1rpx solid #dddddd;
	}

	.input {
		padding: 0 10px;
		width: 40rpx;
		text-align: center;
		color: #000000;
	}

	.plus {
		width: 22px;
		height: 22px;
		background-color: #304D99;
		border-radius: 50%;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		justify-content: center;
		align-items: center;
	}
// 步进器样式end