pet_uni/uni_modules/m-view/components/m-form-item/m-form-item.vue

<script setup>

import {computed, inject, onMounted, ref, watch} from "vue";
import image from "@/config/image";

const imagesPublic = image.Public;
const props = defineProps({
  label: {
    type: String,
    default: '',
  },
  name: {
    type: String,
    default: '',
  },
  align: {
    type: String,
    default: 'between',// vertical || between
  },
  itemStyle: {
    type: [Object, String],
    default: {}
  },
  labelStyle: {
    type: [Object, String],
    default: {}
  },
  inputStyle: {
    type: [Object, String],
    default: {}
  },
  customOption: {
    type: [Object],
    default: {}
  },
  border: {
    type: [Boolean],
    default: true
  },
  required: {
    type: [Boolean],
    default: false
  },
  prop: {
    type: [String],
    default: ''
  },
});

const formItemStyle = computed(() => {
  return {
    paddingBottom: ((props.align === 'vertical') ? '0' : '35rpx'),
    borderBottom: props.border ? '2rpx solid #EEEEEE' : 'none',
    ...uni.$m.addStyle(props.itemStyle),
  }
})

const labelStyle = computed(() => {
  return {
    paddingLeft: (props.inputType === 'textarea' || props.inputType === 'upload') ? 0 : '35rpx',
    paddingRight: (props.inputType === 'textarea' || props.inputType === 'upload') ? 0 : '35rpx',
    ...uni.$m.addStyle(props.labelStyle),
  }
})

const inputStyle = computed(() => {
  const padding = ((props.inputType === 'textarea' || props.inputType === 'upload') && type === 'form') ? 0 : '35rpx'
  return {
    paddingLeft: padding,
    paddingRight: padding,
    ...uni.$m.addStyle(props.inputStyle),
  }
})
const parent = inject('form')
onMounted(() => {
  if(parent && props.required){
    parent.rule.value.push({label:props.label || props.name,value:props.prop});
  }
});

</script>

<template>
  <view class="form-item row justify-between" :style="formItemStyle">
    <view class="label border-box" :style="labelStyle" :class="{'vertical':(align === 'vertical')}">
      <view class="required" v-if="required">
        <m-text text="*" size="32rpx" align="center" line-height="50rpx" color="#FF3838"></m-text>
      </view>
      <m-text :text="label" size="32rpx" line-height="50rpx" color="#020b18"></m-text>
    </view>
    <view class="input border-box" :style="inputStyle" :class="{'vertical':(align === 'vertical')}">
      <slot></slot>
    </view>
  </view>
</template>

<style lang="scss">
.form-item {
  padding: 35rpx 0;
  position:relative;
  .label{
    position: relative;
  }
  .required{
    position: absolute;
    width:35rpx;
    height:100%;
    top:8rpx;
    left:0;
  }
  &.bottom {
    padding-bottom: 10rpx;
  }
}

.vertical {
  flex: 0 0 100%;
  padding-bottom: 10rpx;
}
</style>