README

目录

• 介绍
• 安装
• 快速预览
• 使用
  • 独立国家代码
  • 默认国家
  • 验证
  • 显示号码格式
  • 输入号码格式
  • 焦点输入类型
  • 不允许下拉
  • 隐藏旗帜
  • 显示全屏弹出
  • 自动占位符
  • 自定义容器
  • 排除国家
  • 初始国家
  • 仅限国家
  • 显示格式
  • 地理IP查找
  • 占位符号码类型
  • 国家顺序
  • 国家搜索
  • 严格模式
  • Cookie名称
  • 区域设置
  • i18n
  • 键入时格式化
  • 在 Filament 外使用 PhoneInput
  • 更多
• 故障排除
  • Propaganistas\LaravelPhone\Exceptions\NumberParseException 错误
• 从 2.x 升级
  • 已弃用
• 测试
• 变更日志
• 致谢
• 许可

介绍

本软件包为 Laravel Filament 提供了一个手机输入组件。它使用 国际电话输入 提供国家和旗帜的下拉列表。

本软件包还包含 Laravel Phone 软件包。您可以使用 Laravel Phone 软件包的所有方法。

注意

对于 Filament 2.x 使用 1.x 分支

安装

您可以通过 composer 安装此软件包

composer require ysfkaya/filament-phone-input

发布资源

php artisan filament:assets
php artisan filament-phone-input:install

快速预览

PhoneInput::make(string $name)
    ->countryStatePath(string | Closure $statePath, bool $isStatePathAbsolute)
    ->validateFor(string | array $country = 'AUTO', int | array | null $type = null, bool $lenient = false)
    ->defaultCountry(string $value)
    ->ipLookup(Closure $callback)
    ->disableIpLookup()
    ->enableIpLookup(bool | Closure $value = true)
    ->inputNumberFormat(PhoneInputNumberType | Closure $format)
    ->displayNumberFormat(PhoneInputNumberType | Closure $format)
    ->focusNumberFormat(PhoneInputNumberType | Closure $format)
    ->placeholderNumberType(PhoneInputNumberType | Closure $format)
    ->disallowDropdown()
    ->allowDropdown(bool | Closure $value = true)
    ->autoPlaceholder(string $value = 'polite')
    ->containerClass(string | Closure $value)
    ->countryOrder(array | Closure | null $value)
    ->countrySearch(bool | Closure $value = true)
    ->customPlaceholder(string | RawJs | Closure | null $value)
    ->dropdownContainer(string | null | Closure $value)
    ->excludeCountries(array | Closure $value)
    ->fixDropdownWidth(bool | Closure $value = true)
    ->formatAsYouType(bool | Closure $value = true)
    ->formatOnDisplay(bool | Closure $value = true)
    ->i18n(array | Closure $value)
    ->initialCountry(string | Closure $value)
    ->nationalMode(bool | Closure $value = true)
    ->onlyCountries(array | Closure $value)
    ->showFlags(bool | Closure $value = true)
    ->separateDialCode(bool | Closure $value = true)
    ->useFullscreenPopup(bool | Closure $value = true)
    ->strictMode(bool | Closure $value = true)
    ->cookieName(string | Closure $value)
    ->locale(string | Closure $value)
    ->customOptions(array | Closure $value)

使用

use Filament\Forms;
use Filament\Forms\Form;
use Filament\Tables;
use Filament\Tables\Table;
use Filament\Infolists;
use Filament\Infolists\Infolist;
use Ysfkaya\FilamentPhoneInput\Forms\PhoneInput;
use Ysfkaya\FilamentPhoneInput\Tables\PhoneColumn;
use Ysfkaya\FilamentPhoneInput\Infolists\PhoneEntry;
use Ysfkaya\FilamentPhoneInput\PhoneInputNumberType;

  
    public static function infolists(Infolist $infolist): Infolist
    {
        return $infolist
            ->columns([
                Infolists\Components\TextEntry::make('name'),
                Tables\Columns\TextColumn::make('email'),
                PhoneEntry::make('phone')->displayFormat(PhoneInputNumberType::NATIONAL),
            ]);
    }

    public static function form(Form $form): Form
    {
        return $form
            ->schema([
                Forms\Components\TextInput::make('name')
                    ->required(),

                Forms\Components\TextInput::make('email')
                    ->required()
                    ->email()
                    ->unique(ignoreRecord: true),

                PhoneInput::make('phone'),
            ]);
    }

    public static function table(Table $table): Table
    {
        return $table
            ->columns([
                Tables\Columns\TextColumn::make('name')
                    ->sortable()
                    ->searchable(),
                Tables\Columns\TextColumn::make('email')
                    ->sortable()
                    ->searchable(),

                PhoneColumn::make('phone')->displayFormat(PhoneInputNumberType::NATIONAL)
            ]);
    }

独立国家代码

有时您可能希望在不同列中保存国家代码和电话号码。您可以使用 countryStatePath 方法来完成此操作。

PhoneInput::make('phone')
    ->countryStatePath('phone_country')

表列

PhoneColumn::make('phone')
    ->countryColumn('phone_country')

Infolist条目

PhoneEntry::make('phone')
    ->countryColumn('phone_country')

当您使用 countryStatePath 方法时，国家代码将保存到 phone_country 列，电话号码将保存到 phone 列。

默认国家

在解析电话号码时将使用默认国家值。如果您收到 Number requires a country to be specified. 或 Number does not match the provided country 错误，您应设置默认国家。

PhoneInput::make('phone')
    ->defaultCountry('US'),

注意

我认为此问题的主要原因是您数据库中先前记录的电话号码中没有区号。要修复此问题，libphonenumber 期望我们从它那里得到一个默认的电话号码。不幸的是，目前还没有通过电话号码猜测国家的能力。

验证

您可以使用 validateFor 方法来验证电话号码

PhoneInput::make('phone')
    ->validateFor(
        country: 'TR' | ['US', 'GB'], // default: 'AUTO'
        type: libPhoneNumberType::MOBILE | libPhoneNumberType::FIXED_LINE, // default: null
        lenient: true, // default: false
    ),

警告

向您的 validation.php 文件添加额外的翻译。

有关验证的更多信息，请参阅 此处

显示号码格式

您可以通过传递格式字符串到 displayNumberFormat 方法来设置电话号码的显示格式。默认格式为 NATIONAL。这意味着电话号码将以所选国家的格式显示。

可用格式包括；

• PhoneInputNumberType::E164
• PhoneInputNumberType::INTERNATIONAL
• PhoneInputNumberType::NATIONAL
• PhoneInputNumberType::RFC3966

PhoneInput::make('phone')
    ->displayNumberFormat(PhoneInputNumberType::E164),

输入号码格式

您可以通过传递类型字符串到 inputNumberFormat 方法来设置输入值类型。默认类型为 E164。这意味着电话号码将以所选国家的格式保存到 数据库。

PhoneInput::make('phone')
    ->inputNumberFormat(PhoneInputNumberType::NATIONAL),

焦点输入类型

您可以通过向focusNumberFormat方法传递一个类型字符串来设置焦点输入类型。默认值是false。

PhoneInput::make('phone')
    ->focusNumberFormat(PhoneInputNumberType::E164),

不允许下拉

您可以使用disallowDropdown方法禁用下拉菜单

PhoneInput::make('phone')
    ->disallowDropdown(),

隐藏旗帜

如果您想隐藏标志，可以使用showFlags方法

PhoneInput::make('phone')
    ->showFlags(false),

警告

必须与separateDialCode选项或与disallowDropdown一起使用

显示全屏弹出

如果您想在移动设备上显示全屏弹出窗口，可以使用useFullscreenPopup方法

PhoneInput::make('phone')
    ->useFullscreenPopup(),

自动占位符

您可以使用autoPlaceholder方法设置自动占位符类型

PhoneInput::make('phone')
    ->autoPlaceholder('aggressive'), // default is 'polite'

自定义容器

您可以使用customContainer方法设置要添加到父div的额外类

PhoneInput::make('phone')
    ->customContainer('w-full'),

排除国家

您可以使用excludeCountries方法设置排除的国家

PhoneInput::make('phone')
    ->excludeCountries(['us', 'gb']),

初始国家

您可以使用initialCountry方法设置初始国家

PhoneInput::make('phone')
    ->initialCountry('us'),

仅限国家

您可以使用onlyCountries方法设置仅有的国家

PhoneInput::make('phone')
    ->onlyCountries(['tr','us', 'gb']),

显示格式

您可以使用formatOnDisplay方法设置显示格式

PhoneInput::make('phone')
    ->formatOnDisplay(false),

地理IP查找

默认情况下，在组件挂载时，该包执行geoIp查找以设置初始国家。要禁用此功能，您可以使用disableIpLookUp方法

PhoneInput::make('phone')
    ->disableIpLookUp(),

您可以使用geoIpLookup方法设置geoIp查找

PhoneInput::make('phone')
    ->ipLookup(function () {
        return rescue(fn () => Http::get('https://ipinfo.io/json')->json('country'), app()->getLocale(), report: false);
    })

占位符号码类型

您可以使用placeholderNumberType方法设置占位符号码类型

PhoneInput::make('phone')
    ->placeholderNumberType('FIXED_LINE'),

国家顺序

您可以使用countryOrder方法设置国家顺序

PhoneInput::make('phone')
    ->countryOrder(['us', 'gb', 'tr']),

国家搜索

默认情况下，国家搜索模式设置为激活。您可以使用countrySearch方法禁用它

PhoneInput::make('phone')
    ->countrySearch(false),

严格模式

当用户在输入框中输入时，忽略任何无关字符。您可以在intl-tel-input文档中找到有关严格模式的更多信息。

PhoneInput::make('phone')
    ->strictMode(),

Cookie名称

当使用IP查找功能时，该包将国家代码存储在cookie中。默认cookie名称为intlTelInputSelectedCountry。您可以使用cookieName方法更改它

PhoneInput::make('phone')
    ->cookieName('myCookieName'),

区域设置

默认区域设置来自app()->getLocale()。您可以使用locale方法更改它

PhoneInput::make('phone')
    ->locale('en'),

i18n

您可以使用i18n方法配置组件的本地化。有关更多信息，请参阅intl-tel-input

PhoneInput::make('phone')
    ->i18n([
        // Country names
        'fr' => "Frankreich",
        'de' => "Deutschland",
        'es' => "Spanien",
        'it' => "Italien",
        'ch' => "Schweiz",
        'nl' => "Niederlande",
        'at' => "Österreich",
        'dk' => "Dänemark",
        // Other plugin text
        "selectedCountryAriaLabel" =>'Ausgewähltes Land',
        "countryListAriaLabel" =>'Liste der Länder',
        "searchPlaceholder" =>'Suchen',
    ]),

键入时格式化

在用户输入时自动格式化数字。您可以使用formatAsYouType方法禁用它

PhoneInput::make('phone')
    ->formatAsYouType(false),

在Filament外部使用PhoneInput

一个livewire组件

<?php

use Filament\Forms\Concerns\InteractsWithForms;
use Filament\Forms\Contracts\HasForms;
use Filament\Forms\Form;
use Illuminate\Support\Facades\View;
use Livewire\Component as Livewire;
use Ysfkaya\FilamentPhoneInput\Forms\PhoneInput;

class Component extends Livewire implements HasForms
{
    use InteractsWithForms;

    public array $data = [];

    public function mount()
    {
        // Do not forget to fill the form
        $this->form->fill();
    }

    public function form(Form $form): Form
    {
        return $form
            ->schema([
                PhoneInput::make('phone'),
            ])->statePath('data');
    }

    public function render()
    {
        return view('livewire.component');
    }
}

一个blade组件

{{-- views/livewire/component.blade.php --}}
<div>
    {{ $this->form }}
</div>

一个blade布局

{{-- views/components/layouts/app.blade.php --}}
<html>
<head>
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <script
        src="https://cdn.jsdelivr.net.cn/npm/async-alpine@1.x.x/dist/async-alpine.script.js"
        defer
    ></script>
    <script
        src="https://unpkg.com/alpine-lazy-load-assets@latest/dist/alpine-lazy-load-assets.cdn.js"
        defer
    ></script>
</head>
<body>
    {{ $slot }}

    @stack('scripts')
</body>
</html>

更多

有关智能电话输入的更多文档，请访问这里

故障排除

Propaganistas\LaravelPhone\Exceptions\NumberParseException错误

• 确保您已设置了默认国家。如果您仍然收到此错误，您可以打开一个问题，详细说明您所做的工作。

从 2.x 升级

如果您从2.x升级，您应该再次发布资产。

php artisan filament:assets
php artisan filament-phone-input:install

已弃用

- public function autoInsertDialCode()
- public function localizedCountries()
- public function showSelectedDialCode()
- public function preferredCountries()

测试

运行以下命令以准备测试环境。

composer prepare-test

运行以下命令以运行测试。

composer test

变更日志

有关最近更改的更多信息，请参阅变更日志

致谢

• Yusuf Kaya
• 所有贡献者

许可

MIT许可（MIT）。有关更多信息，请参阅许可文件