fs-uni-template/components/fs-form-item/fs-form-item.vue

<template>
	<view class="fs-form-item" :class="['fs-form-item-' + position, { 'fs-form-item-border': border }]">
		<view class="fs-form-item-label-before" v-if="slots.before"><slot name="before"></slot></view>
		<view
			class="fs-form-item-label"
			:class="['text-' + align, { 'fs-form-item-required': required }]"
			:style="{ width: width }"
			v-if="label"
		>
			{{ label }}
		</view>
		<view class="fs-form-item-right"><slot></slot></view>
	</view>
</template>

<script>
/**
 * 表单项组件
 * @description 表单项组件
 * @property {String} label label
 * @property {String} labelWidth label宽度
 * @property {String} labelPosition = [left | top] label位置
 * @property {String} labelAlign = [left | center | right | justify] label对齐方式
 * @property {Boolean} required  是否必填，值为true时会有红色星号
 * @property {Boolean} border 是否显示边框
 */
export default {
	name: 'fs-form-item'
}
</script>

<script setup>
import { inject, provide, computed, useSlots } from 'vue'

const props = defineProps({
	label: String,
	labelWidth: String,
	labelPosition: {
		type: String,
		validator(value) {
			return ['left', 'top'].includes(value)
		}
	},
	labelAlign: {
		type: String,
		validator(value) {
			return ['left', 'center', 'right', 'justify'].includes(value)
		}
	},
	required: Boolean,
	border: {
		type: Boolean,
		default: true
	}
})
const slots = useSlots()

const form = inject('form', {})
const position = props.labelPosition || form.labelPosition || 'left'
const width = props.labelWidth || form.labelWidth || '120rpx'
const align = props.labelAlign || form.labelAlign || 'left'

provide('form-item-position', position)
</script>

<style lang="scss" scoped>
.fs-form-item {
	display: flex;
	background-color: #fff;
	padding: 20rpx var(--gutter);
	min-height: 110rpx;

	&-border {
		border-bottom: 2rpx solid var(--border-color);
	}

	&-left {
		align-items: center;
		// .label{
		// 	text-align-last: justify;
		// }
	}
	&-top {
		flex-direction: column;
		.form-item-label {
			margin-bottom: 10rpx;
			width: auto !important;
		}
	}

	&-label {
		font-size: var(--content-size);
		margin-right: 20rpx;

		&-before {
			margin-right: 20rpx;
		}
	}
	&-required {
		position: relative;
		padding-left: 14rpx;

		&::before {
			position: absolute;
			content: '*';
			color: red;
			left: 0;
		}
	}

	&-right {
		flex: 1;
	}
}
</style>