源文件

jeepay-ui-uapp-face/components/LoginInput/LoginInput.vue

@@ -0,0 +1,66 @@
+<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>