Laravel Nova如何向文本字段添加实时计数器

// app/Nova/Fields/RealTimeCounter.php
namespace App\Nova\Fields;

use Laravel\Nova\Fields\Field;

class RealTimeCounter extends Field
{
    public $component = 'real-time-counter';

    public function __construct($attribute, $label = null, $options = [])
    {
        parent::__construct($attribute, $label, $options);
    }
}

// resources/js/components/RealTimeCounter.vue
<template>
  <div>
    <input
      v-model="value"
      @input="updateCount"
      :placeholder="placeholder"
    />
    <span>{{ count }}</span>
  </div>
</template>

<script>
export default {
  props: ['attribute', 'value', 'placeholder'],
  data() {
    return {
      count: 0,
    };
  },
  methods: {
    updateCount() {
      this.count = this.value.length;
      this.$emit('input', this.value);
    },
  },
};
</script>

// resources/js/app.js
import Vue from 'vue';
import RealTimeCounter from './components/RealTimeCounter.vue';

Vue.component('real-time-counter', RealTimeCounter);

// app/Nova/Resources/YourModelResource.php
namespace App\Nova\Resources;

use App\Nova\Fields\RealTimeCounter;
use Laravel\Nova\Resource;

class YourModelResource extends Resource
{
    public function fields(Request $request)
    {
        return [
            RealTimeCounter::make('text_field', 'Text Field')->placeholder('Enter text here'),
        ];
    }
}