nova 사용자 정의 필드만들기

사용자 정의 필드를 만드는 방법을 검토

1. 사용자 정의 필드를 만들자

php artisan nova:field beyondcode/string-limit

설치화면

폴더가 생성됨

이동

cd nova-components/StringLimit

소스 변화 감지 빌드

npm run watch

2. nova-components/StringLimit/resources//js/components/FormField.vue 파일에 다음을 추가해준다.

        <template slot="field">
            <input
                :id="field.name"
                type="text"
                class="w-full form-control form-input form-input-bordered"
                :class="errorClasses"
                :placeholder="field.name"
                :max="maxLength"
                v-model="value"
            />
        </template>

data() 메서드를 만들고 소스를 추가한다.

import { FormField, HandlesValidationErrors } from 'laravel-nova'
 
export default {
    mixins: [FormField, HandlesValidationErrors],
 
    props: ['resourceName', 'resourceId', 'field'],
 
    data() {
        return {
            maxLenght: 255,
        }
    },

input 밑에 소스추가

        <template slot="field">
            <input
                :id="field.name"
                type="text"
                class="w-full form-control form-input form-input-bordered"
                :class="errorClasses"
                :placeholder="field.name"
                :max="maxLength"
                v-model="value"
            />
 
            <p class="my-2 text-light">
                {{ (maxLenght - value.length) }} characters remaining.
            </p>

3. app/Nova/Post.php 파일을 열어서 새로 만든 StringLimit field를 넣어준다.

posts 글을 작성해보자 사용자 정의 필드가 적용되었다.

4. max값을 유동적으로 바꿔줘야 할때 가 있다. 다음 소스를 수정하자.

 StringLimit::make('Title')->max(150),

nova-components/StringLimit/src/StringLimit.php

<?php
 
namespace Beyondcode\StringLimit;
 
use Laravel\Nova\Fields\Field;
 
class StringLimit extends Field
{
    /**
     * The field's component.
     *
     * @var string
     */
    public $component = 'string-limit';
 
    public function max($value)
    {
        return $this->withMeta([
            'maxLength' => $value,
        ]);
    }
}
 

노란색은 추가, 빨간색은 삭제한다.

<template>
    <default-field :field="field" :errors="errors">
        <template slot="field">
            <input
                :id="field.name"
                type="text"
                class="w-full form-control form-input form-input-bordered"
                :class="errorClasses"
                :placeholder="field.name"
                :max="field.maxLength"
                v-model="value"
            />
 
            <p>
                {{ (field.maxLenght - value.length) }} characters remaining.
            </p>
        </template>
    </default-field>
</template>
 
<script>
import { FormField, HandlesValidationErrors } from 'laravel-nova'
 
export default {
    mixins: [FormField, HandlesValidationErrors],
 
    props: ['resourceName', 'resourceId', 'field'],
 
    data() {
        return {
            maxLenght: 255,
        }
    },

문자길이가 150으로 변경된 것을 확인 할 수 있다.