75 lines
1.3 KiB
Vue
75 lines
1.3 KiB
Vue
<template>
|
|
<common-cell :name="name" :required="required">
|
|
<view class="form-content__wrapper">
|
|
<input :disabled="disableChange" :value="value" :type="inputType" class="form-input" :placeholder="placeholder"
|
|
placeholder-class="form__placeholder" :maxlength="wordLimit" @input="change($event)" />
|
|
<view v-if="appendText" class="appendText"> {{ appendText }}</view>
|
|
</view>
|
|
</common-cell>
|
|
</template>
|
|
<script setup>
|
|
import { computed } from 'vue';
|
|
|
|
import commonCell from '../common-cell.vue';
|
|
|
|
const emits = defineEmits(['change']);
|
|
const props = defineProps({
|
|
appendText: {
|
|
default: ''
|
|
},
|
|
form: {
|
|
type: Object,
|
|
default: () => ({})
|
|
},
|
|
inputType: {
|
|
default: 'text'
|
|
},
|
|
name: {
|
|
default: ''
|
|
},
|
|
required: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
title: {
|
|
default: ''
|
|
},
|
|
disableChange: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
wordLimit: {
|
|
type: [Number, String],
|
|
default: 20
|
|
},
|
|
})
|
|
|
|
const placeholder = computed(() => `请输入${props.name || ''}`)
|
|
const value = computed(() => {
|
|
const v = props.form?.[props.title];
|
|
return v === undefined || v === null ? '' : String(v);
|
|
})
|
|
|
|
function change(e) {
|
|
emits('change', {
|
|
title: props.title,
|
|
value: e.detail.value
|
|
})
|
|
}
|
|
|
|
</script>
|
|
|
|
<style>
|
|
@import '../cell-style.css';
|
|
|
|
.form-input {
|
|
flex-grow: 1;
|
|
font-size: 28rpx;
|
|
}
|
|
|
|
.appendText {
|
|
margin-left: 10rpx;
|
|
flex-shrink: 0;
|
|
}
|
|
</style>
|