shanxia2.0/miniprogram/components/db-ui/db-field.vue

<template>
  <view class="db-field" :class="{ 'db-field--textarea': type === 'textarea' }">
    <input
      v-if="type !== 'textarea'"
      class="db-field__control"
      :type="inputType"
      :value="modelValue"
      :placeholder="placeholder"
      :disabled="disabled"
      @input="onInput"
    />
    <textarea
      v-else
      class="db-field__control db-field__textarea"
      :value="modelValue"
      :placeholder="placeholder"
      :disabled="disabled"
      auto-height
      @input="onInput"
    />
  </view>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
  modelValue: { type: [String, Number], default: '' },
  type: { type: String, default: 'text' },
  placeholder: String,
  disabled: Boolean
})
const emit = defineEmits(['update:modelValue', 'change'])

const inputType = computed(() => {
  if (props.type === 'digit' || props.type === 'number') return 'digit'
  return 'text'
})

function onInput(e) {
  const v = e.detail.value
  emit('update:modelValue', v)
  emit('change', v)
}
</script>

<style scoped>
.db-field {
  background: #f7f7f7;
  border-radius: 8px;
  padding: 10px 12px;
}
.db-field__control {
  width: 100%;
  font-size: 14px;
  color: #323233;
}
.db-field__textarea {
  min-height: 72px;
  width: 100%;
}
</style>