starwork-uniapp/src/pages/approval/components/Input.vue

<template>
  <view class="px-2 text-3.5">
    <view class="flex flex-items-center pos-relative">
      <view v-if="required" class="color-#f62933 pos-absolute left--2 mt-1">*</view>
      <view>{{ title }}</view>
    </view>
    <view class="pt-2">
      <wd-input
        :type="type"
        custom-class="!bg-transparent"
        :placeholder="placeholder"
        :maxlength="type === 'text' ? 30 : 15"
        v-model="text"
        @input="change(id, $event)"
      ></wd-input>
    </view>
  </view>
</template>

<script setup lang="ts">
  const emits = defineEmits(['change'])

  const text = ref<string>('')

  const props = defineProps({
    id: {
      type: Number,
      required: true
    },
    type: {
      type: String,
      default: 'text'
    },
    required: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      required: true
    },
    value: {
      type: String,
      default: ''
    },
    placeholder: {
      type: String,
      default: '请输入'
    }
  })

  onMounted(() => {
    text.value = props.value
  })

  const change = (id, data) => {
    emits('change', { id, value: data.value })
  }
</script>

<style lang="scss" scoped>
  .wd-input::after {
    height: 0 !important;
  }

  :deep(.wd-input__inner) {
    font-size: 0.875rem;
  }
</style>