63 lines
1.3 KiB
Vue
63 lines
1.3 KiB
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>
|