사용자 정의 필드를 만드는 방법을 검토
1. 사용자 정의 필드를 만들자
1 | php artisan nova:field beyondcode/string-limit | cs |
설치화면
폴더가 생성됨
이동
1 | cd nova-components/StringLimit | cs |
소스 변화 감지 빌드
1 | npm run watch | cs |
2. nova-components/StringLimit/resources//js/components/FormField.vue 파일에 다음을 추가해준다.
1 2 3 4 5 6 7 8 9 10 11 | <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> | cs |
data() 메서드를 만들고 소스를 추가한다.
1 2 3 4 5 6 7 8 9 10 11 12 | import { FormField, HandlesValidationErrors } from 'laravel-nova' export default { mixins: [FormField, HandlesValidationErrors], props: ['resourceName', 'resourceId', 'field'], data() { return { maxLenght: 255, } }, | cs |
input 밑에 소스추가
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <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> | cs |
3. app/Nova/Post.php 파일을 열어서 새로 만든 StringLimit field를 넣어준다.
posts 글을 작성해보자 사용자 정의 필드가 적용되었다.
4. max값을 유동적으로 바꿔줘야 할때 가 있다. 다음 소스를 수정하자.
1 | StringLimit::make('Title')->max(150), | cs |
nova-components/StringLimit/src/StringLimit.php
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <?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, ]); } } | cs |
노란색은 추가, 빨간색은 삭제한다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | <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, } }, | cs |
문자길이가 150으로 변경된 것을 확인 할 수 있다.
'라라벨 > NOVA' 카테고리의 다른 글
글로벌 검색 왼쪽 laravel 변경하기 (0) | 2020.01.05 |
---|---|
Resources 제목 변경하기 (0) | 2020.01.05 |
nova 맞춤도구 만들기 (0) | 2020.01.04 |
nova 측정항목정의(value, trend, partition) (0) | 2020.01.04 |
nova 동작정의(defining actions) (0) | 2020.01.04 |