<template>
  <div class="form-item-box" :style="{ width: width }">
    <el-input style="width: 100%" :placeholder="placeholder" v-bind="$attrs"
     v-model="props.modelValue" @input="onInput"></el-input>
    <!-- <el-icon class="errorIcon"><circle-close-filled /></el-icon>
    <el-icon class="checkIcon"><circle-check-filled /></el-icon> -->
  </div>
</template>

<script setup>
import { COMPONENT_WIDTH } from "@/constant";
import { ref, defineProps, defineEmits, defineExpose } from "vue";
const props = defineProps({
  //获取组件传值
  placeholder: {
    default: "请填写手机号",
    type: String
  },
  modelValue: {
    default: "",
    type: String
  },
  width: {
    default: COMPONENT_WIDTH,
    type: String
  }
});

const emits = defineEmits(["update:modelValue"]);
const onInput = (e) => {
  emits("update:modelValue", e);
};
</script>

<style lang="scss" scoped>
// ::v-deep .el-input__inner {
//   // -webkit-box-shadow: 0 0 0 1000px #249628 inset !important;
//   // -webkit-text-fill-color: #ffffff !important;
// }
</style>
