tianmucloudmobile/components/ParamRow.vue

<template>
	<view class="param-row">
		<u-button 
			:type="labelType" 
			size="mini" 
			class="param-label"
		>
			{{ label }}
		</u-button>
		
		<!-- 输入框 -->
		<u-input 
			v-if="inputType === 'text'"
			v-model="inputValue" 
			:placeholder="placeholder"
			:type="inputType"
			class="param-input"
			@input="handleInput"
		></u-input>
		
		<!-- 选择器 -->
		<u-select 
			v-else-if="inputType === 'select'"
			v-model="inputValue" 
			:list="options"
			:placeholder="placeholder"
			class="param-select"
			@change="handleSelect"
		></u-select>
		
		<!-- 复选框 -->
		<u-checkbox 
			v-if="showCheckbox"
			v-model="checkboxValue" 
			class="checkbox"
			@change="handleCheckbox"
		>
			{{ checkboxLabel }}
		</u-checkbox>
		
		<!-- 操作按钮 -->
		<u-button 
			v-if="actionButton"
			:type="buttonType" 
			size="mini" 
			class="action-btn"
			:disabled="buttonDisabled"
			@click="handleAction"
		>
			{{ actionButton }}
		</u-button>
	</view>
</template>

<script>
	export default {
		name: 'ParamRow',
		props: {
			label: {
				type: String,
				required: true
			},
			labelType: {
				type: String,
				default: 'primary'
			},
			inputType: {
				type: String,
				default: 'text'
			},
			placeholder: {
				type: String,
				default: '请输入'
			},
			value: {
				type: [String, Number],
				default: ''
			},
			options: {
				type: Array,
				default: () => []
			},
			showCheckbox: {
				type: Boolean,
				default: false
			},
			checkboxLabel: {
				type: String,
				default: ''
			},
			checkboxValue: {
				type: Boolean,
				default: false
			},
			actionButton: {
				type: String,
				default: ''
			},
			buttonType: {
				type: String,
				default: 'info'
			},
			buttonDisabled: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				inputValue: this.value
			}
		},
		watch: {
			value(newVal) {
				this.inputValue = newVal
			}
		},
		methods: {
			handleInput(value) {
				this.$emit('input', value)
			},
			handleSelect(value) {
				this.$emit('change', value)
			},
			handleCheckbox(value) {
				this.$emit('checkbox-change', value)
			},
			handleAction() {
				this.$emit('action')
			}
		}
	}
</script>

<style lang="scss" scoped>
@import '@/static/scss/custom-theme.scss';

.param-row {
	@include flex-start;
	margin-bottom: $custom-spacing-md;
	gap: $custom-spacing-sm;
	flex-wrap: wrap;
	
	.param-label {
		min-width: 80px;
		@include button-style('primary');
	}
	
	.param-input, .param-select {
		flex: 1;
		min-width: 120px;
		@include input-style;
	}
	
	.checkbox {
		margin-left: $custom-spacing-sm;
	}
	
	.action-btn {
		@include button-style('info');
		background-color: $custom-bg-secondary;
		color: $custom-text-secondary;
		border: 1px solid $custom-border-secondary;
		
		&:disabled {
			background-color: $custom-bg-disabled;
			color: $custom-text-disabled;
			border-color: $custom-border-disabled;
		}
	}
}

// 响应式设计
@include responsive(md) {
	.param-row {
		.param-input, .param-select {
			min-width: 150px;
		}
	}
}

@include responsive(lg) {
	.param-row {
		.param-input, .param-select {
			min-width: 200px;
		}
	}
}
</style>