README

Laravel 电话输入组件，基于 intl-tel-input JavaScript 插件。

DEMO 预览

简单使用示例

国家同步示例

Laravel 电话输入
- DEMO 预览
- 目录
- 安装
- 指令
- 需求
  - 核心依赖
    - 工具脚本
- 配置
- 使用 - 基本使用 - 添加隐藏的电话国家输入 - 与 Livewire 一起使用 - 与国家下拉框同步 tel-input - 事件监听器
- 属性
- 事件
- 故障排除
- 测试
- 变更日志
- 贡献
  - 安全
- 鸣谢
- 许可协议
- Laravel 包模板

安装

您可以通过 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 一起使用

<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">

与国家下拉框同步 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');
        }
    }
    //...
}
```

测试

composer test

变更日志

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

贡献

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

安全

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

chapdel / laravel-tel-input

维护者

详细信息