67 lines
1.6 KiB
Vue
67 lines
1.6 KiB
Vue
<template>
|
|
<view class="l-input-wrapper">
|
|
<view class="l-input-title">{{ title }}</view>
|
|
<input :type="type" :placeholder="place" :password="password" placeholder-class="l-input-place"
|
|
v-model="vdata.inputValue" @input="inputChange" />
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { reactive, ref } from 'vue'
|
|
const props = defineProps({
|
|
title: { type: String }, //标题
|
|
require: { type: Boolean, default: false }, //是否必填 默认 否
|
|
place: { type: String }, // placeholder
|
|
type: { type: String, default: 'text' }, //input 类型
|
|
value: { type: [String, Number], default: '' }, //双向绑定的值
|
|
REG: {}, //正则表达式
|
|
password: { type: Boolean, default: false },//是否密码模式 默认false
|
|
})
|
|
|
|
const emits = defineEmits(['update:value'])
|
|
const vdata = reactive({
|
|
inputValue: props.value,
|
|
})
|
|
const inputChange = (e) => {
|
|
emits('update:value', vdata.inputValue)
|
|
}
|
|
const check = () => {
|
|
if (props.require && !vdata.inputValue) return errorTips('不能为空')
|
|
if (props.REG && !props.REG.test(vdata.inputValue)) return errorTips('填写不正确')
|
|
return true
|
|
}
|
|
const errorTips = (err) => {
|
|
uni.showToast({
|
|
title: props.title + err,
|
|
icon: 'none',
|
|
})
|
|
}
|
|
defineExpose({ check })
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.l-input-wrapper {
|
|
margin: 50rpx;
|
|
height: 100rpx;
|
|
|
|
border-bottom: 1rpx solid #666;
|
|
|
|
input {
|
|
font-size: 24rpx;
|
|
height: 50%;
|
|
background-color: transparent !important;
|
|
}
|
|
|
|
.l-input-title {
|
|
margin-bottom: 10rpx;
|
|
font-size: 24rpx;
|
|
font-weight: 700;
|
|
}
|
|
}
|
|
|
|
::v-deep .l-input-place {
|
|
font-size: 32rpx;
|
|
color: #666;
|
|
}
|
|
</style>
|