源文件

jeepay-ui-uapp-merchant/components/JeepayPopupInput/JeepayPopupInput.vue

@@ -0,0 +1,91 @@
+<!--
+  组件作用： 单个输入框的弹层。 
+  输入框的弹出框， uni必须使用的是： 组件方式， 无法直接JS调起。 
+  // 要求， 输入空也可以点击确定。 
+  示例： 
+  
+  A: 一般用法： 
+  <JeepayPopupInput ref="ref" label="备注" :maxLength="3" v-model:value="vdata.payRemark" />
+  
+  B: 自定义 校验规则
+  <JeepayPopupInput ref="ref" label="备注" :maxLength="3" v-model:value="vdata.payRemark" :rules="[ {required: true }, {pattern: '^(123)+$' } ]" />
+  
+  @author terrfly
+  @site https://www.jeequan.com
+  @date 2022/11/17 10:46
+-->
+
+<template>
+  <uni-popup ref="popupRef" type="dialog">
+    <uni-popup-dialog :before-close="true" mode="input" :title="`请输入${props.label}`" @confirm="confirmFunc" @close="popupRef.close()">
+      <template #default>
+        <uni-forms ref="formRef" :rules="vdata.rules" :modelValue="vdata.formData">
+          <uni-forms-item label="" name="singleInputVal">
+            <uni-easyinput :inputBorder="false" type="text" v-model="vdata.formData.singleInputVal" :placeholder="`最多输入${props.maxLength}个字`" :maxlength="props.maxLength" />
+          </uni-forms-item>
+        </uni-forms>
+      </template>
+    </uni-popup-dialog>
+  </uni-popup>
+</template>
+
+<script setup>
+import { reactive, ref, watch } from 'vue'
+
+// 定义组件参数
+const props = defineProps({
+  // 显示文本
+  label: { type: String, default: '' },
+
+  // 操作对象
+  value: [Number, String],
+
+  // 输入框最大位数
+  maxLength: { type: Number, default: 10 },
+
+  rules: { type: Array, default: () => [] },
+})
+
+// emit 父组件使用： v-model="val" 进行双向绑定。
+const emit = defineEmits(['update:value'])
+
+// 重置按钮，不能直接重置时间选择，需要通过watch监听，进行重置
+watch(
+  () => props.value,
+  (newVal, oldVal) => {
+    vdata.formData.singleInputVal = newVal
+  }
+)
+
+const popupRef = ref()
+const formRef = ref()
+
+const vdata = reactive({
+  // 表单的值
+  formData: { singleInputVal: '' },
+
+  // 验证规则
+  rules: {
+    singleInputVal: { rules: props.rules },
+  },
+})
+
+// 点击确认按钮。
+function confirmFunc() {
+  formRef.value.validate().then(() => {
+    emit('update:value', vdata.formData.singleInputVal)
+    popupRef.value.close()
+  })
+}
+
+// 显示弹层
+function open() {
+  vdata.formData.singleInputVal = props.value
+  popupRef.value.open()
+}
+
+// 将表格事件暴露出去  https://www.jianshu.com/p/39d14c25c987
+defineExpose({ open })
+</script>
+
+<style lang="scss" scoped></style>