65 lines
1.8 KiB
Vue
65 lines
1.8 KiB
Vue
<script lang="ts" setup>
|
|
import type { PropType } from 'vue'
|
|
// Prefer using the project's uni-app InputType if available so the prop matches framework expectations
|
|
import type { InputType as UniInputType } from '@uni-helper/uni-app-types'
|
|
|
|
// Supported input keyboard types (uni-app / web):
|
|
// text - 文本输入键盘（默认）
|
|
// number - 数字输入键盘
|
|
// idcard - 身份证输入键盘
|
|
// digit - 带小数点的数字键盘
|
|
// tel - 电话输入键盘
|
|
// safe-password - 密码安全输入键盘
|
|
// nickname - 昵称输入键盘
|
|
// password, email - 其它常见类型
|
|
// Compose our input types from the project's InputType and add a couple extra platform-specific keys
|
|
type _InputType = UniInputType | 'safe-password' | 'nickname'
|
|
|
|
const props = defineProps({
|
|
value: {
|
|
type: String,
|
|
default: ""
|
|
},
|
|
type:{
|
|
type: String as PropType<_InputType>,
|
|
default: 'text'
|
|
},
|
|
placeholder: {
|
|
type: String,
|
|
default: ""
|
|
},
|
|
rootClass: {
|
|
type: String,
|
|
default: ""
|
|
},
|
|
readonly: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
inputDirection: {
|
|
type: String as PropType<'text-left' | 'text-right' | 'text-center'>,
|
|
default: 'text-left'
|
|
}
|
|
})
|
|
|
|
const emits = defineEmits(["update:value"])
|
|
|
|
const innerValue = computed({
|
|
get: () => props.value,
|
|
set: (val) => {
|
|
emits("update:value", val)
|
|
}
|
|
})
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<view class="relative w-full" :class="rootClass">
|
|
<input :type="type" v-model="innerValue" :placeholder="placeholder" confirm-type="done" :disabled="readonly"
|
|
:placeholder-style="`color:#C5C8D1;font-size:30rpx;${inputDirection === 'text-right' ? 'text-align:right;' : inputDirection === 'text-center' ? 'text-align:center;' : 'text-align:left;'} `" />
|
|
<view class="absolute top-0 left-0 w-full h-full" v-if="readonly"></view>
|
|
</view>
|
|
</template>
|
|
|
|
<style lang="scss" scoped></style>
|