README

基于 intl-tel-input JavaScript 插件的 Laravel 电话输入组件，适用于 Blade 和 Livewire。

演示预览

简单使用演示

国家同步演示

安装

您可以通过 composer 安装此包

composer require victorybiz/laravel-tel-input

指令

将 @laravelTelInputStyles 放置在模板的 <head> 部分中，在您的其他样式之前。将 @laravelTelInputScripts 指令放置在您的模板中，在您的关闭 </body> 标签之前，在 Livewire 或任何其他编译脚本之后。

<html>
  <head>
    <!-- ... -->
    @laravelTelInputStyles
    <!-- ... -->
  </head>
<body>
    <!-- content -->

    @laravelTelInputScripts
</body>
</html>

需求

此包使用以下包。

国际电话输入 (https://github.com/jackocnr/intl-tel-input)
当使用 Livewire wire:model 时，需要 Laravel Livewire (https://laravel-livewire.com/)

在使用此组件之前，请确保已安装并包含这些依赖项。

核心依赖

此包在内部使用 intl-tel-input。对于依赖项，我们建议您通过 npm 或 yarn 安装它们，然后在项目的 JavaScript 中引入它们。要在终端中运行以下命令安装此包使用的每个依赖项：

npm install intl-tel-input

或者 Yarn

yarn add intl-tel-input

导入 JS

import intlTelInput from 'intl-tel-input';

window.intlTelInput = intlTelInput;

导入 CSS

@import 'intl-tel-input/build/css/intlTelInput.css';

如果您正在使用编译后的 JavaScript，别忘了在它之前包含依赖项的下载或 CDN 版本。请参阅 intl-tel-input 读取说明了解其他安装步骤。

工具脚本

更新您的 webpack.mix.js 以将 utils.js 脚本复制到您的 public 目录，或者发布配置文件以设置自定义路径。

// webpack.mix.js
// ...
mix.copy('node_modules/intl-tel-input/build/js/utils.js', 'public/vendor/intl-tel-input/build/js');

配置

要自定义组件，您应使用 vendor:publish Artisan 命令发布配置文件。配置文件将放置在您应用程序的配置目录中

# Publish the config file
php artisan vendor:publish --tag=laravel-tel-input:config

请参阅 intl-tel-input 读取说明了解插件选项。

使用

基本使用

<x-tel-input
  id="phone"
  name="phone"
  class="form-input"
/>

添加隐藏的电话国家输入

<x-tel-input
  id="phone"
  name="phone"
  class="form-input"
  phone-country-input="#phone_country"
/>
<input type="hidden" id="phone_country" name="phone_country">

与 Livewire 2 的使用

<x-tel-input
  wire:model="phone"
  id="phone"
  name="phone"
  class="form-input"
/> 
<input wire:model="phone_country" type="hidden" id="phone_country" name="phone_country">

与 Livewire 3 的使用

<x-tel-input
  wire:model.live="phone"
  value="{{ $phone }}"
  id="phone"
  name="phone"
  class="form-input"
/> 
<input wire:model="phone_country" type="hidden" id="phone_country" name="phone_country">

与国家下拉框同步 tel-input

<div class="form-item">
  <label>Phone number</label>
  <x-tel-input
    id="phone"
    name="phone"
    class="form-input"
    phone-country-input="#address_country"
  />
</div>
<div class="form-item">
  <label>Address</label>
  <input type="text" placeholder="House name/number"><br>
  <input type="text" placeholder="City"><br>
  <input type="text" placeholder="State"><br>
  <input type="text" placeholder="Zip code"><br>
  <select id="address_country" name="address_country">
    <option value="CN">China</option>
    <option value="IN">India</option>
    <option value="NG">Nigeria</option>
    <option value="GB">United Kingdom</option>
    <option value="US">United States</option>
  </select>
</div>

事件监听器

input.addEventListener('telchange', function(e) {
    console.log(e.detail.valid); // Boolean: Validation status of the number
    console.log(e.detail.validNumber); // Returns internationally formatted number if number is valid and empty string if invalid
    console.log(e.detail.number); // Returns the user entered number, maybe auto-formatted internationally
    console.log(e.detail.country); // Returns the phone country iso2
    console.log(e.detail.countryName); // Returns the phone country name
    console.log(e.detail.dialCode); // Returns the dial code
});

属性 / 属性

事件

故障排除

在Livewire组件更新、刷新或DOM内容更改后，tel-input无法渲染。

Livewire用户遇到的最常见问题与Livewire的DOM差异/修补系统有关。这是一个系统，在每次组件更新后，会选择性地更新已更改、已添加或已删除的元素。

通常情况下，该系统是可靠的，但在某些情况下，Livewire无法正确跟踪更改。当这种情况发生时，希望会抛出一个有用的错误，您可以按照以下指南进行调试。

如果在打开包含tel-input的弹出窗口/模态框或切换到包含tel-input表单的标签页后，tel-input无法渲染，要解决这个问题，请在触发/打开弹出窗口或表单标签页的操作中派发一个telDOMChanged浏览器事件。
```
class ContactPage extends Component
{
    public $showQuickContactForm = false;

    public function toggleQuickContactForm()
    {
        $this->showQuickContactForm = !$this->showQuickContactForm;

        if ($this->showQuickContactForm) {
            $this->dispatchBrowserEvent('telDOMChanged'); // in Livewire 2
            $this->dispatch('telDOMChanged'); // in Livewire 3
        }
    }
    //...
}
```
在某些情况下，弹出表单包含在组件mount()中预先填充的值/电话号码的tel-input，且无法从组件中派发浏览器事件。将以下JavaScript代码添加到组件blade视图的末尾。
```
<script wire:ignore>
  document.dispatchEvent(new Event('telDOMChanged')); 
</script>
```

测试

composer test

变更日志

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

贡献

有关详细信息，请参阅贡献指南。

安全

如果您发现任何与安全相关的问题，请通过电子邮件lavictorybiz@gmail.com联系，而不是使用问题跟踪器。

victorybiz / laravel-tel-input

维护者

详细信息