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

<template>
  <view class="form_item">
    <view class="form_item_key font-bold" :class="{ 'require': required }">{{ label }}</view>
    <view class="form_item_val" @click="onClick">
      <input 
        class="input" 
        type="text"
        :disabled="true"
        :placeholder="placeholder"
        :value="value"
      />
      <view class="arrow"></view>
    </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(['actionClick', 'validateRequest']);

const onClick = () => {
  if (props.readOnly) {
    return;
  }
  emit('actionClick', { value: props.value });
};

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;
  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 {
  height: inherit;
}

.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;
}

.arrow {
  content: "";
  position: absolute;
  top: 50%;
  right: 12upx;
  display: block;
  width: 18upx;
  height: 18upx;
  border-top: 4upx solid #e0e0e0;
  border-right: 4upx solid #e0e0e0;
  transform: rotate(45deg) translateY(-50%);
}
</style>