iflex docs

Appearance

Input Wrap ​

라벨 및 유효성 검사 기능을 제공합니다.

이 컴포넌트는 내부적으로 <el-form-item>을 사용하고 있으며, 해당 컴포넌트의 속성들을 그대로 상속받아 활용할 수 있습니다. 자세한 속성 목록은 공식문서를 참고하세요.

props ​

이름타입기본값설명
labelstringnull입력 필드 위에 표시될 라벨입니다.
requiredbooleanfalsetrue 로 설정 시 필수 입력 ui 적용합니다.
veBaseValidationnullvuelidate를 활용한 유효성 검사를 적용합니다.
vesBaseValidation[]null여러 개의 ve를 배열 형태로 전달할 수 있습니다.
merge-cellnumber1grid의 column 병합
columnbooleanfalseflex 속성을 column 방향으로 변환

slot ​

이름설명
(default)폼 항목에 대한 입력 컴포넌트들을 포함합니다. 예: el-input, el-checkbox 등 다양한 폼 요소를 이 슬롯에 삽입할 수 있습니다.
labellabel 텍스트 옆에 붙는 추가 요소 (예: 아이콘, 도움말 버튼 등)
hint폼 항목에 대한 추가적인 안내 메시지나 힌트를 제공합니다.

유효성 검사 ​

  • @vuelidate/core 라이브러리를 활용하여 폼 필드에 대한 유효성 검사를 구현하는 방법을 보여줍니다.
  • 각 nv-input-wrap 컴포넌트에 :ve prop을 통해 유효성 검사 규칙(v$.type, v$.name 등)을 연결합니다.
  • required validator를 사용하여 필수 입력 필드를 지정하고, helpers.withMessage를 통해 사용자 친화적인 오류 메시지를 정의합니다.
  • 폼 제출 시 validate 함수를 호출하여 유효성 검사를 수행하고, 실패 시 오류 메시지를 다이얼로그로 표시합니다.
  • 성공 시에는 저장 확인 다이얼로그를 보여줍니다.

기본 정보

유형
이름
제목
사용 여부
선택
기본
기본
html
<form @submit.prevent.stop="validate" method="POST">
    <nv-form-groups :use-tab="false" :use-label="true">
      <nv-form-group title="기본 정보">
        <nv-input-wrap labelFor="type" label="유형" :ve="v$.type">
        <el-input v-model="model.type" />
        </nv-input-wrap>
        <nv-input-wrap labelFor="name" label="이름" :ve="v$.name">
          <el-input v-model="model.name" />
        </nv-input-wrap>
        <nv-input-wrap labelFor="subject" label="제목" :ve="v$.subject">
          <el-input v-model="model.subject" />
        </nv-input-wrap>
        <nv-input-wrap labelFor="use" label="사용 여부" :ve="v$.use">
          <el-select v-model="model.use" placeholder="선택">
            <el-option label="예" :value="true" />
            <el-option label="아니오" :value="false" />
          </el-select>
        </nv-input-wrap>
      </nv-form-group>
    </nv-form-groups>
    <button type="submit" class="btn btn-sm btn-primary q-mt-sm">저장</button>
</form>
typescript
import useVuelidate from '@vuelidate/core';
import { required, helpers } from '@vuelidate/validators';
import {computed, ref} from 'vue';
import useDialog from 'components/composables/usePopupUtil';
import _ from 'lodash';

const model = ref({});
const dialog = useDialog();


const sample = {
  type: {
    required: helpers.withMessage('유형 항목은 필수 입니다.', required),
  },
  name: {
    required: helpers.withMessage('이름 항목은 필수 입니다.', required),
  },
  subject: {
    required: helpers.withMessage('제목 항목은 필수 입니다.', required),
  },
  use: {
    required: helpers.withMessage('사용 여부 항목은 필수 입니다.', required),
  }
};

const rules = computed(() => _.merge({}, sample));

const v$ = useVuelidate(rules, model);

const validate = async () => {
    const valid = await v$.value.$validate();

    if (!valid) {
        let html = '<ul>';
        _.each(v$.value.$errors, (err) => {
            html += `<li>${err.$message}</li>`;
            });
            html += '</ul>';
            dialog.alert('<div class="q-mb-md">유효성 검증에 실패했습니다. 아래 내용을 확인해주세요.</div>' + html, { html: true });
            return;
    }

    dialog.confirm('저장 하시겠습니까?')
    .onOk(() => {
        save();
    });
};

TIP

ve 또는 ves 속성을 사용하면, required를 별도로 설정하지 않아도 해당 필드가 필수 입력 필드로 시각적으로 표시됩니다.

merge-cell ​

  • merge-cell prop을 사용하여 폼 필드가 그리드 시스템에서 차지할 컬럼의 수를 동적으로 조절하는 방법을 보여줍니다. 이는 마치 HTML 테이블의 colspan 속성과 유사한 기능을 제공합니다.
  • 이를 통해 폼 내에서 특정 필드의 너비를 강조하거나 레이아웃을 시각적으로 조정하는 데 유용합니다. 예를 들어, 중요한 입력 필드를 더 넓게 표시하거나, 관련 없는 필드들을 묶어서 공간을 절약할 수 있습니다.
column-size :

label="셀 병합 조절" merge-cell :

셀 병합

셀 병합 조절
2개의 셀 병합
기본
3개의 셀 병합
기본
기본
html
<small>column-size : </small>
<el-input-number v-model="num" :min="1" :max="10" class="q-mb-md" />
<br/>
<small>label="셀 병합 조절" merge-cell : </small>
<el-input-number v-model="mergeCell" :min="1" :max="10" class="q-mb-md" />
<nv-form-groups>
    <nv-form-group title="셀 병합" :column-size="num">
        <nv-input-wrap :merge-cell="mergeCell" labelFor="title" label="셀 병합 조절">
            <el-input v-model="model.test"/>
        </nv-input-wrap>
        <nv-input-wrap :merge-cell="2" labelFor="title" label="2개의 셀 병합">
            <el-input v-model="model.test"/>
        </nv-input-wrap>
        <nv-input-wrap labelFor="title" label="기본">
            <el-input v-model="model.test"/>
        </nv-input-wrap>
        <nv-input-wrap :merge-cell="3" labelFor="title" label="3개의 셀 병합">
            <el-input v-model="model.test"/>
        </nv-input-wrap>
        <nv-input-wrap labelFor="title" label="기본">
            <el-input v-model="model.test"/>
        </nv-input-wrap>
        <nv-input-wrap labelFor="title" label="기본">
            <el-input v-model="model.test"/>
        </nv-input-wrap>
    </nv-form-group>
</nv-form-groups>
typescript
const num = ref(5);
const mergeCell = ref(1);

column ​

  • column prop을 사용하여 nv-input-wrap 내부 요소들의 flexbox 레이아웃 방향을 변경하는 방법을 보여줍니다. 기본적으로 내부 요소들은 행(row) 방향으로 배치되지만, column prop을 true로 설정하면 열(column) 방향으로 쌓이게 됩니다.
  • 이는 폼 필드 내에서 라벨과 입력 요소의 배치 방식을 세로로 변경해야 할 때 유용하며, 모바일 환경이나 특정 레이아웃 요구 사항에 맞춰 UI를 조정할 수 있도록 합니다.

flex 방향 변환

동적
기본
column
html
<el-radio-group v-model="columnSw" class="q-mb-md">
    <el-radio :value="true">true</el-radio>
    <el-radio :value="false">false</el-radio>
</el-radio-group>
<nv-form-groups>
    <nv-form-group title="flex 방향 변환">
        <nv-input-wrap labelFor="title" :merge-cell="2" :column="columnSw" label="동적">
            <el-checkbox v-model="checked1" label="Option 1" size="large" />
            <el-input v-model="model.test"/>
            <template #hink>위의 라디오 버튼으로 flex의 방향 변환이 가능합니다.</template>
        </nv-input-wrap>
        <nv-input-wrap labelFor="title" label="기본">
            <el-checkbox v-model="checked1" label="Option 1" size="large" />
            <el-input v-model="model.test"/>
        </nv-input-wrap>
        <nv-input-wrap column labelFor="title" label="column">
            <el-checkbox v-model="checked1" label="Option 1" size="large" />
            <el-input v-model="model.test"/>
        </nv-input-wrap>
    </nv-form-group>
</nv-form-groups>
typescript
const columnSw = ref(false);

힌트 / 안내메세지 ​

  • hint 슬롯을 사용하여 폼 필드에 대한 추가적인 설명이나 안내 메시지를 제공하는 방법을 보여줍니다.
  • <template #hint> 내부에 원하는 힌트 텍스트나 HTML 요소를 삽입하면, 해당 입력 필드 아래에 보조적인 정보를 표시할 수 있습니다.
  • 이는 사용자에게 입력 필드의 용도, 필요한 형식, 또는 관련 주의사항 등을 안내하는 데 매우 유용하며, 폼의 사용성을 크게 향상시킬 수 있습니다.

안내메세지

기본
힌트/안내 메세지 입력이 가능합니다.
html
<nv-form-groups>
    <nv-form-group title="안내메세지">
        <nv-input-wrap labelFor="title" label="기본">
            <el-checkbox v-model="checked1" label="Option 1" size="large" />
            <el-input v-model="model.test"/>
            <template #hint>힌트/안내 메세지 입력이 가능합니다.</template>
        </nv-input-wrap>
    </nv-form-group>
</nv-form-groups>