167 lines
4.0 KiB
Vue
167 lines
4.0 KiB
Vue
<template>
|
|
<AnswerViewer :config="config" @next="$emit('next')" @previous="$emit('previous')">
|
|
<!-- 邮箱手机号身份证号 -->
|
|
<a-input
|
|
v-if="[5, 6, 7].includes(config.text_type)"
|
|
:value="value"
|
|
:placeholder="config.placeholder"
|
|
:addonAfter="config.right_prompt"
|
|
:addonBefore="config.left_prompt"
|
|
@change="changeValue"
|
|
:disabled="disabled"
|
|
/>
|
|
<!-- 整数小数 -->
|
|
<a-input
|
|
v-else-if="config.text_type === 1 || config.text_type === 2"
|
|
type="number"
|
|
:value="value"
|
|
:placeholder="config.placeholder"
|
|
:addonAfter="config.right_prompt"
|
|
:addonBefore="config.left_prompt"
|
|
:step="config.text_type === 1 ? 1 : 1 / Math.pow(10, config.decimal_few || 0)"
|
|
@change="changeValue"
|
|
@blur="imposeNum"
|
|
:disabled="disabled"
|
|
/>
|
|
<!-- 其他 -->
|
|
<div v-else>
|
|
<!-- 多行 -->
|
|
<a-textarea
|
|
v-if="config.line_type"
|
|
:value="value"
|
|
:placeholder="config.placeholder"
|
|
:addonAfter="config.right_prompt"
|
|
:addonBefore="config.left_prompt"
|
|
@change="changeValue"
|
|
:disabled="disabled"
|
|
:auto-size="{
|
|
minRows: config.line_height,
|
|
maxRows: config.line_height,
|
|
}"
|
|
/>
|
|
<!-- 单行 -->
|
|
<a-input
|
|
v-else
|
|
:value="value"
|
|
:placeholder="config.placeholder"
|
|
:addonAfter="config.right_prompt"
|
|
:addonBefore="config.left_prompt"
|
|
@change="changeValue"
|
|
:disabled="disabled"
|
|
/>
|
|
</div>
|
|
</AnswerViewer>
|
|
</template>
|
|
|
|
<script>
|
|
import { defineComponent, ref } from "vue";
|
|
import { message } from "ant-design-vue";
|
|
import AnswerViewer from "./components/AnswerViewer";
|
|
|
|
export default defineComponent({
|
|
components: {
|
|
AnswerViewer
|
|
},
|
|
props: {
|
|
// 配置
|
|
config: {
|
|
type: Object,
|
|
default: () => {},
|
|
},
|
|
// 答案
|
|
answer: {
|
|
type: Object,
|
|
default: () => {},
|
|
},
|
|
// 是否禁用
|
|
disabled: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
},
|
|
setup(props, context) {
|
|
const value = ref(""); // 值
|
|
|
|
// 初始化
|
|
function init() {
|
|
if (props.answer) {
|
|
value.value = props.answer.value;
|
|
}
|
|
}
|
|
init();
|
|
|
|
// 输入回调
|
|
function changeValue(e) {
|
|
let { value: val } = e.target;
|
|
// 整数限制
|
|
if (props.config.text_type === 1 && !/^-?[0-9]\d*$/.test(val) && val) {
|
|
val = value.value;
|
|
}
|
|
// 小数位数限制
|
|
if (props.config.text_type === 2) {
|
|
if (val.split(".")[1]?.length > props.config.decimal_few) {
|
|
val = value.value;
|
|
}
|
|
}
|
|
// 数值限制(最大)
|
|
if (
|
|
val &&
|
|
props.config.max !== "" &&
|
|
val > props.config.max &&
|
|
[1, 2].includes(props.config.text_type)
|
|
) {
|
|
val = value.value;
|
|
}
|
|
// 长度限制(最大)
|
|
if (
|
|
props.config.max &&
|
|
val.length > props.config.max &&
|
|
[0, 3, 4].includes(props.config.text_type)
|
|
) {
|
|
val = value.value;
|
|
}
|
|
value.value = val;
|
|
context.emit("changeValue", val);
|
|
// 更新答案
|
|
if (val) {
|
|
context.emit("update:answer", { value: val });
|
|
} else {
|
|
context.emit("update:answer", null);
|
|
}
|
|
}
|
|
|
|
// 数值限制
|
|
function imposeNum() {
|
|
let val = value.value;
|
|
if (!val) {
|
|
return message.error(`请输入数字`);
|
|
}
|
|
if (val && val < props.config.min) {
|
|
changeValue({ target: { value: "" } });
|
|
message.error(`请输入大于等于${props.config.min}的数字`);
|
|
}
|
|
if (val && val < props.config.min) {
|
|
changeValue({ target: { value: "" } });
|
|
message.error(`请输入大于等于${props.config.min}的数字`);
|
|
}
|
|
}
|
|
|
|
return { value, changeValue, imposeNum };
|
|
},
|
|
});
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.ant-input {
|
|
width: 225px;
|
|
}
|
|
|
|
.ant-input-group-wrapper {
|
|
width: auto;
|
|
|
|
:deep(.ant-input) {
|
|
width: 225px;
|
|
}
|
|
}
|
|
</style>
|