input输入框的一些复习

news2025/1/18 16:50:51

在这里插入图片描述

<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,//需求期限  无固定期限，写600
  checksate: 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 = false
  formData_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),//需求期限  无固定期限，写600
    checksate: 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 = true
    queryParams.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: 当用户选择输入框中的文本时触发。