[vuejs 관련] Input component

Input component

---

component .vue파일

<template>
  <div class="input_wrap">
    <p class="top_title" v-if="inputtxt">{{ txt }}</p>
    <input :id="id" :type="type" class="box_input" :class="{ on: inputtxt }"
              :placeholder="txt" :readonly="read" v-model="inputtxt" 
              @input="upInfo(inputtxt = $event.target.value)">
  </div>
</template>

<script setup>
import { ref, watch } from "vue";

const props = defineProps({
  id: undefined,
  type: {
    type: String,
    defatult: "text"
  },
  txt: {
    type: String,
    defatult: undefined
  },
  val: undefined,
  read: {
    type: Boolean,
    default: false
  },
})

watch(props, (e) => {
  if(e.val) {
    inputtxt.value = e.val
  }
})

const inputtxt = ref();
inputtxt.value = props.val;

const emit = defineEmits(["model"]);

const upInfo = (txt) => {
  emit("model", txt);
}
</script>
<!--
  <Inputbox id="" txt="" type="" v-model="..." />

  # id : id
  # type : text, password, number...
  # txt : input에 표시되는 타이틀과 placeholder
  # val : input에 입력된 값(ex: <input value="val"> )
  # read : 읽기 전용(readonly)
  @ model : input이 전해주는 값(ex: <input v-model="info.name" )

  // 부모 컴포넌트에서 사용 시
  ex : <Inputbox id="" txt="아이디어" type="text" :val="info.name" @model="info.name = $event" />
  ex : <Inputbox id="" txt="아이디어" type="text" :val="info.name" @model="info.name = $event" read/>
 -->

불러오는 .vue 파일에

<template>
  <div class="m_checkbox">
    <Inputbox txt="placeholder와 내용이 있을 때 위로 보여지는 타이틀" 
                 type="text" :val="info.title" @model="info.title = $event" />
  </div>
</template>

<script setup>
import { ref } from "vue";
import Inputbox from "@/components/Inputbox.vue";

const info = ref({
  title: "",
})

Input component

iOS에서 <input type="number"/>일 때 키패드가 AOS랑 다르게 이상하게 나오는건
<input type="number" inputmode="numeric" pattern="[0-9]*" > 처럼 넣으면 된다

끝.