hfysite/components/public/form/inputRow.vue

<script >
export default {
  name: 'inputRow',
  props: {
    label: {
      type: String,
      default: ''
    },
    labelWidth: {
      type: Number,
      default: 0
    },
    form: {
      type: Object,
      default: () => {}
    },
    checkFormItem: {
      type: Function,
      default: () => {}
    },
    state: {
      type: Number,
      default: 0
    },
    msg: {
      type: String,
      default: ''
    },
    remark: {
      type: String,
      default: ''
    }
  },
  data(){
    return {
    }
  },
  methods: {
  }
}
</script>

<template>
  <div class="w-full px-1.5 flex">
    <div class="w-4/12 flex items-center u px-1 justify-center"
         :style="`${labelWidth?`width:${labelWidth}px;`:''}`"
    >
      <span class="w-full flex items-center justify-center">
        {{ label }}
<!--        显示一个问号,悬浮时显示remark, 不使用 a toolTip -->
        <a-tooltip v-if="remark" placement="topLeft">
          <template slot="title">
            {{remark}}
          </template>
          <a-icon type="question-circle" />
        </a-tooltip>
      </span>
    </div>
    <div class="w-8/12"
         :style="`${labelWidth?`width:calc(100% - ${labelWidth}px);`:''}`"
    >
      <slot></slot>
      <div :class="`w-full  ${state===0?'text-red-600':'text-green-300'}`" v-show="msg" >
        {{msg}}
      </div>
      <slot name="extra"></slot>
    </div>
  </div>
</template>

<style scoped>

</style>