110 lines
2.3 KiB
Vue
110 lines
2.3 KiB
Vue
<template>
|
|
<view class="px-2 text-3.5">
|
|
<view v-if="inline">
|
|
<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>
|
|
<wd-input
|
|
class="flex-1 ml-2"
|
|
:type="type"
|
|
custom-class="!bg-transparent"
|
|
:custom-input-class="inline ? 'text-right' : 'text-left'"
|
|
:placeholder="placeholder"
|
|
:maxlength="maxlength ?? (type === 'text' ? 30 : 15)"
|
|
v-model="text"
|
|
:readonly="readonly"
|
|
@input="change(id, $event)"
|
|
></wd-input>
|
|
</view>
|
|
</view>
|
|
<view v-else>
|
|
<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="maxlength ?? (type === 'text' ? 30 : 15)"
|
|
v-model="text"
|
|
:readonly="readonly"
|
|
@input="change(id, $event)"
|
|
></wd-input>
|
|
</view>
|
|
</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: '请输入'
|
|
},
|
|
readonly: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
inline: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
maxlength: {
|
|
type: [Number, null],
|
|
default: null
|
|
}
|
|
})
|
|
|
|
onMounted(() => {
|
|
text.value = props.value
|
|
})
|
|
|
|
const change = (id, data) => {
|
|
emits('change', { id, value: data.value })
|
|
}
|
|
|
|
const clear = () => {
|
|
text.value = ''
|
|
}
|
|
|
|
defineExpose({
|
|
clear
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.wd-input::after {
|
|
height: 0 !important;
|
|
}
|
|
|
|
:deep(.wd-input__inner) {
|
|
font-size: 0.875rem;
|
|
}
|
|
</style>
|