如何使用u-view中的NumberBox组件

最新推荐文章于 2024-03-01 06:47:41 发布

原创最新推荐文章于 2024-03-01 06:47:41 发布 · 1.2k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #前端框架 #vue.js

本文介绍了如何在Vue应用中创建一个可定制的数字输入组件，包括模板编写、props和数据管理，以及如何在父组件中引入和使用该组件，并实现父子组件之间的值传递。

1、添加组件

<template>
	<u-number-box v-model="internalValue" @change="valChange">
		<view slot="minus" class="minus">
			<u-icon name="minus" size="12" color="#FFFFFF"></u-icon>
		</view>
		<text slot="input" class="input">{{ internalValue }}</text>
		<view slot="plus" class="plus">
			<u-icon name="plus" color="#FFFFFF" size="12"></u-icon>
		</view>
	</u-number-box>
</template>

<script>
	export default {
		props: {
			value: {
				type: Number,
				default: 1,
			},
			user_index: {
				type: Number,
				default: 1,
			},
		},
		data() {
			return {
				internalValue: this.value,
			};
		},
		watch: {
			value(newVal) {
				this.internalValue = newVal;
			}
		},
		onLoad(option) {
			console.log(option);
		},
		methods: {
			valChange(e) {
				this.$emit("update:value", {
					value: e.value,
					userIndex: this.user_index,
				}); // 触发事件，传递新值
			}
		},
	};
</script>

<style lang="scss" scoped>
	@import "/static/css/common.css";

	.minus {
		width: 0.8rem;
		height: 0.8rem;
		font-weight: bold;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: rgb(196, 152, 74);
		border-top-left-radius: 4px;
		border-bottom-left-radius: 4px;
		margin-right: 2px;
	}

	.input {
		width: 0.8rem;
		height: 0.8rem;
		font-size: 16px;
		color: #ffffff;
		background-color: rgb(196, 152, 74);
		display: flex;
		justify-content: center;
		align-items: center;
		margin-right: 2px;
	}

	.plus {
		width: 0.8rem;
		height: 0.8rem;
		font-weight: bold;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: rgb(196, 152, 74);
		border-top-right-radius: 4px;
		border-bottom-right-radius: 4px;
	}
</style>

2、在父组件引入组件

import customNumber from "@/components/number-box/number-box.vue";

//添加以下部分
components: {
	customNumber,
},

3、在父组件中使用

<custom-number :value="re_obj.point" :user_index="re_obj_index" @update:value="updateUserPoint"></custom-number>

4、在父组件的js中添加回调函数，用来更新父组件的值

updateUserPoint({
				value,
				userIndex
			}) {
				// 接收子组件传递的新值
				console.log(value, userIndex);
				this.questionFormData.re_obj_list[userIndex].point = value;
				console.log(this.questionFormData);
			},