input输入框的一些复习

在这里插入图片描述

<template><div><div style="text-align: center;margin: 10px 0;"><span style="font-size: 15px;font-weight: bold;">input输入框的基本应用</span></div><el-descriptions :column="3" size="default" border><el-descriptions-item label="部门" label-align="center" :span="1"><el-select v-model="formData_Value.name" placeholder="请选择姓名" filterable size="small"><el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" /></el-select></el-descriptions-item><el-descriptions-item label="直接上级" label-align="center" :span="2"><el-input v-model="formData_Value.name" disabled size="small" /></el-descriptions-item><el-descriptions-item label-align="center" :span="3"><template #label><div><h2>劳动合同</h2><h2>签订情况</h2></div></template>劳动合同签订情况aaaaa</el-descriptions-item><el-descriptions-item label="续签期限" label-align="center" :span="3"><div style="height: 50px;"><el-radio-group v-model="ContractTime" @change="onChange_ContractTime"><el-radio :label="true" size="small">有固定期限</el-radio><el-radio :label="false" size="small">无固定期限</el-radio></el-radio-group><div v-if="ContractTime" style="display: flex;" class="animate__animated animate__backInDown"><div>续签时长</div><div contenteditable :class="{ StyleInput: inputStyle }":style="{ borderBottom: inputStyle ? '1px solid #ff0000' : '1px solid #000' }"style="width: 80px;text-align: center;" @blur="handleBlur" @focus="changeText">{{ formData_Value.ContractTime }}</div><div>月</div><div><div>续签时长</div><input type="number" class="StyleInput" v-model="formData_Value.ContractTime" @change="handleChange" /><div>月</div></div></div></div></el-descriptions-item><el-descriptions-item label="备注" label-align="center" :span="3"><el-input v-model="formData_Value.remark" :autosize="{ minRows: 2, maxRows: 4 }" type="textarea"placeholder="请输入备注" show-word-limit maxlength="500" /></el-descriptions-item><el-descriptions-item label="申请人" label-align="center" :span="3">{{ formData_Value.fillname }}</el-descriptions-item></el-descriptions><div style="margin-top: 15px;display: flex;width: 100%;justify-content: center;"><div style="padding: 6px 8px;background-color:#36d;color:#fff;width: 150px;text-align: center; cursor: pointer;"@click="onClick_ok">提&nbsp;&nbsp;&nbsp; 交</div></div></div>
</template><script setup>
import { ref, onMounted, nextTick } from "vue";
import { useRouter, useRoute } from "vue-router";
import { useStore } from "vuex";
import {ElMessage,
} from "element-plus";
const router = useRouter();
const route = useRoute();
const store = useStore();
let queryParams = ref({Cookie_USER: null,item: null
})
let props = defineProps({tableItem: {type: Object,default: {},},
})
const ContractTime = ref(true)
const formData_Value = ref({meancode: '',//合同编号  HTXQ + 年月日时分秒 + 2位随机数badge: '',//工号name: '',//姓名age: '',//年龄deptname: '',//部门supplier: '',//岗位lead: '',//直接领导ContractTime: 1,//需求期限  无固定期限，写600checksate: 0,//进程状态remark: '',//备注 500字fillname: '',//申请人filltime: '',//申请时间
})
const options = [{value: 'Option1',label: 'Option1',},{value: 'Option2',label: 'Option2',}
]
const onChange_ContractTime = (val) => {if (val) {formData_Value.value.ContractTime = 1} else {formData_Value.value.ContractTime = 600}
}
const inputStyle = ref(false)
const handleBlur = (event) => {inputStyle.value = falseformData_Value.value.ContractTime = event.target.innerText ? event.target.innerText : 1
}
const changeText = (value) => {console.log('输入的内容', value)inputStyle.value = true
}
const handleChange = (event) => {console.log('这个触发了', event.target.value)console.log('这个触发了', event.target)if (event.target.value > 0) {formData_Value.value.ContractTime = event.target.value} else {formData_Value.value.ContractTime = 1}
}
const onClick_ok = () => {let obj = {meancode: formData_Value.value.meancode,//合同编号  HTXQ + 年月日时分秒 + 2位随机数badge: formData_Value.value.badge,//工号name: formData_Value.value.name,//姓名age: formData_Value.value.age,//年龄deptname: formData_Value.value.deptname,//部门supplier: formData_Value.value.supplier,//岗位lead: formData_Value.value.lead,//直接领导ContractTime: Number(formData_Value.value.ContractTime),//需求期限  无固定期限，写600checksate: 0,//进程状态remark: formData_Value.value.remark,//备注 500字fillname: formData_Value.value.fillname,//申请人filltime: formData_Value.value.filltime,//申请时间}if ([{field: "deptname",message: "请选择部门",},{field: "name",message: "请选择姓名",},{field: "ContractTime",message: "请输入续签时长",}].every((item) => validateFields(item, obj))) {if (obj.ContractTime > 0) {console.log('需要提交的', obj)} else {ElMessage({message: "续签时间必须大于0",type: "error",});}}
}
onMounted(() => {store.dispatch("examine/COOLIE_VALUE_USER");queryParams.value.Cookie_USER = store.state.examine.cookieUser;if (queryParams.value.Cookie_USER.id) {ContractTime.value = truequeryParams.value.item = props.tableItem;formData_Value.value.meancode = 66;formData_Value.value.fillname = queryParams.value.Cookie_USER.realname;formData_Value.value.ContractTime = 1} else {ElMessage({message: '账号信息为空，请重新登录',type: 'warning',})}
})const validateFields = ({ field, message }, obj) => {const value = obj[field];if (value === null || value === undefined || value === "") {ElMessage({showClose: true,message: message,type: "error",});return false;}const trimmedValue = String(value).trim();if (!trimmedValue) {ElMessage({showClose: true,message: message,type: "error",});return false;}return true;
};
</script>
<style scoped></style>
<style scoped lang="less">
.StyleInput {color: #ff0000;border: none;outline: none;border-bottom: 1px solid red;box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.1);transition: border-bottom-color 0.3s ease;
}
</style>

在HTML中，input元素有多个原生事件可供使用，这些事件可以通过JavaScript来监听和处理。以下是一些常用的input元素的原生事件：change: 当输入框的值发生改变并失去焦点时触发，适用于大多数输入框。input: 当输入框的值发生改变时触发，即时响应用户输入，比如按键或者粘贴内容。focus: 当输入框获得焦点时触发。blur: 当输入框失去焦点时触发。keydown: 当用户按下键盘上的任意键时触发，通常用于捕获特定的键盘操作。keyup: 当用户释放键盘上的任意键时触发，通常用于获取输入框的实时值。keypress: 当用户按下键盘上的字符键时触发，用于捕获字符输入。select: 当用户选择输入框中的文本时触发。