Laravel 5.6：与 App.js 的 intl-tel-input 兼容性问题

Posted 2023-05-09

【中文标题】Laravel 5.6：与 App.js 的 intl-tel-input 兼容性问题

【英文标题】：Laravel 5.6: intl-tel-input compatibility issue with App.js

【发布时间】：2018-11-30 23:06:20

【问题描述】：

我有一个 Laravel 5.6 网页，我想添加 IntlTelInput (https://github.com/jackocnr/intl-tel-input) 但我尝试从源代码、composer 和 npm 安装它（当前使用 composer 和 mix 来复制构建文件夹），其中 3 个似乎没有初始化插件。

这不是我的浏览器（尝试了很多，它可以在 codepen 中使用） 我已经安装了 Jquery 我包含了样式表 我在我的 CSS 中覆盖了 flags.png 的路径（在 html 和 app.scss 中 [并运行 npm run watch]） 我在输入后添加了 intlTelInput.js 脚本 我用<script>$("#phone").intlTelInput();</script>初始化了输入（在DOM中输入之后）

这是我通过检查结果得到的：

    <div class="intl-tel-input allow-dropdown">
       <div class="flag-container">
          <div tabindex="0" class="selected-flag">
             <div class="iti-flag"></div>
             <div class="iti-arrow"></div>
          </div>
          <ul class="country-list hide">
             <li data-dial-code="1" data-country-code="us" class="country preferred">
                <div class="flag-box">
                   <div class="iti-flag us"></div>
                </div>
                <span class="country-name">United States</span><span class="dial-code">+1</span>
             </li>
             <li data-dial-code="44" data-country-code="gb" class="country preferred">
                <div class="flag-box">
                   <div class="iti-flag gb"></div>
                </div>
                <span class="country-name">United Kingdom</span><span class="dial-code">+44</span>
             </li>
             <li class="divider"></li>
             <li data-dial-code="93" data-country-code="af" class="country ">
                <div class="flag-box">
                   <div class="iti-flag af"></div>
                </div>
                <span class="country-name">Afghanistan (‫افغانستان‬‎)</span><span class="dial-code">+93</span>
             </li>
             <li data-dial-code="355" data-country-code="al" class="country ">
                <div class="flag-box">
                   <div class="iti-flag al"></div>
                </div>
                <span class="country-name">Albania (Shqipëri)</span><span class="dial-code">+355</span>
             </li>
             <li data-dial-code="213" data-country-code="dz" class="country ">
                <div class="flag-box">
                   <div class="iti-flag dz"></div>
                </div>
                <span class="country-name">Algeria (‫الجزائر‬‎)</span><span class="dial-code">+213</span>
             </li>

....

                <span class="country-name">Western Sahara (‫الصحراء الغربية‬‎)</span><span class="dial-code">+212</span>
             </li>
             <li data-dial-code="967" data-country-code="ye" class="country ">
                <div class="flag-box">
                   <div class="iti-flag ye"></div>
                </div>
                <span class="country-name">Yemen (‫اليمن‬‎)</span><span class="dial-code">+967</span>
             </li>
             <li data-dial-code="260" data-country-code="zm" class="country ">
                <div class="flag-box">
                   <div class="iti-flag zm"></div>
                </div>
                <span class="country-name">Zambia</span><span class="dial-code">+260</span>
             </li>
             <li data-dial-code="263" data-country-code="zw" class="country ">
                <div class="flag-box">
                   <div class="iti-flag zw"></div>
                </div>
                <span class="country-name">Zimbabwe</span><span class="dial-code">+263</span>
             </li>
             <li data-dial-code="358" data-country-code="ax" class="country ">
                <div class="flag-box">
                   <div class="iti-flag ax"></div>
                </div>
                <span class="country-name">Åland Islands</span><span class="dial-code">+358</span>
             </li>
          </ul>
       </div>
       <input name="phone" id="phone" placeholder="Phone" value="9992715671" required="required" autocomplete="off" class="form-control" type="text">
    </div>

当我从 ul class="country-list hide" 手动删除隐藏类时，它会出现但我无法与之交互，我猜 js 似乎无法正常工作。

如果我删除“隐藏”会发生什么：

更新：

进行更多测试后，我意识到如果我注释掉“app.js”脚本 intl-tel-input 可以完美运行，所以我现在的问题是，我必须在 App.js 中进行哪些更改使这项工作？ （我没有在 app.js 中添加任何内容，它与每次安装 laravel 时都带有相同的内容）

【参考方案1】：

通过 yarn 安装后我遇到了类似的问题。 我的解决方案是添加以下内容：

require('intl-tel-input/build/js/utils'); require("intl-tel-input/build/js/intlTelInput");

在require('bootstrap');之后的./resources/assets/js/bootstrap.js

然后添加：

jQuery( '#phone' ).intlTelInput( dropdownContainer: 'body', autoPlaceholder: 'polite', initialCountry: 'auto', geoIpLookup: function(callback) jQuery.get("https://ipinfo.io", function() , "jsonp").always(function(resp) var countryCode = (resp && resp.country) ? resp.country : ""; callback(countryCode); ); , );

到文件末尾./resources/assets/js/app.js

注意我添加了一些参数，因为在我解决这个问题之前，我也遇到了自动国家检测的问题。

【讨论】：

我试过这个，但似乎不起作用。我收到了intlTelInput is not a function 错误。

同样的问题在这里。有人解决了这个问题吗？

【参考方案2】：

我尝试删除 defer 属性但收到此错误：

[Vue warn]: Cannot find element: #app

尝试将 app.js 导入到 body 标记之后。这将解决问题。

<body>...</body>

<!-- Scripts -->
<script src=" asset('js/app.js') "></script>