com.kasite.client.uniapp.patient/pagesPatient/st1/business/outpatient/outpatientRefundNew/components/form/textArea/index.vue

<template>
  <view class="form_item">
    <view class="form_item_key font-bold" :class="{ 'require': required }">{{ label }}</view>
    <view class="form_item_val">
      <textarea 
        class="input" 
        :disabled="readOnly"
        :placeholder="placeholder"
        :value="value"
        @input="onInputChange" 
        :auto-height="true"
      ></textarea>
    </view>
  </view>
</template>

<script setup lang="ts">
import { defineProps, defineEmits, watch } from 'vue';

const props = defineProps({
  label: {
    type: String,
    default: ''
  },
  readOnly: {
    type: Boolean,
    default: false,
  },
  placeholder: {
    type: String,
    default: ''
  },
  required: {
    type: Boolean,
    default: false
  },
  errorMsg: {
    type: String,
    default: '输入不合法'
  },
  value: {
    type: String,
    default: ''
  }
});

const emit = defineEmits(['inputChange', 'validateRequest', 'update:value']);

const onInputChange = (e: any) => {
  const val = e.detail.value;
  emit('inputChange', { value: val });
  emit('update:value', val);
  validateInput(val);
};

const validateInput = (value: string) => {
  emit('validateRequest', { value });
};

watch(() => props.value, (newVal) => {
  validateInput(newVal);
});
</script>

<style>
/* 表单 start */
.form_item {
  position: relative;
  width: inherit;
  padding: 0 10upx;
  font-size: 30upx;
  min-height: 120upx;
  display: flex;
  align-items: center;
}

.form_item .form_item_key {
  padding-left: 20upx;
  position: relative;
  width: 220upx;
}

.form_item .form_item_val {
  flex: 1 0 0;
  text-align: right;
  height: inherit;
  padding: 0 20upx;
}

.form_item .form_item_val .input {
  min-height: 100%;
  width: 100%;
  line-height: 50upx;
}

.img_captcha {
  width: 160upx;
  height: inherit;
  background-color: var(--dominantColor);
  color: #fff;
  font-weight: bold;
  font-size: 38upx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.require::after {
  content: '*';
  position: absolute;
  color: #FF1D1F;
  top: 10%;
  left: 0;
}
/* 表单 end */

.font-bold {
  font-weight: bold;
}
</style>