71 lines
1.3 KiB
Vue
71 lines
1.3 KiB
Vue
|
<template>
|
||
|
|
<common-cell :name="name" :required="required">
|
||
|
|
<view class="form-content__wrapper">
|
||
|
|
<input :disabled="disableChange" :value="value" :text="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(() => props.form && props.form && props.form[props.title] ? props.form[props.title] : '')
|
||
|
|
|
||
|
|
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>
|