92 lines
2.5 KiB
Vue
92 lines
2.5 KiB
Vue
<!--
|
||
组件作用： 单个输入框的弹层。
|
||
输入框的弹出框， 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>
|