通过作曲家包含时如何在 AdminLTE 中使用 jQuery 的输入掩码

Posted 2023-05-08

【中文标题】通过作曲家包含时如何在 AdminLTE 中使用 jQuery 的输入掩码

【英文标题】：How to use jQuery's inputmask in AdminLTE when included via composer

【发布时间】：2018-03-16 21:46:35

【问题描述】：

短版

如何使用继承自 avanzu/AdminThemeBundle 基础的 twig 的 inputmask？

上下文

我在 symfony3 项目中使用 AdminLTE 管理面板模板 (https://adminlte.io/)。

为此，我使用了 Avanzu 项目 (https://github.com/avanzu/AdminThemeBundle)，它有两个主要优势：

我可以通过 composer 安装它。 我有预制的树枝块，我可以在树枝上覆盖它们，以便重复使用。

问题是我需要一个<input> 以用欧元表示金额。我想使用inputmask，您可以在此处在 AdminLte 中看到它：https://adminlte.io/themes/AdminLTE/pages/forms/advanced.html

当我放置此代码时...

<div class="form-group">
    <label>Intl US phone mask:</label>
    <div class="input-group">
        <div class="input-group-addon">
            <i class="fa fa-phone"></i>
        </div>
        <input class="form-control" data-inputmask="'mask': ['999-999-9999 [x99999]', '+099 99 99 9999[9]-9999']" data-mask="" type="text">
    </div>
<!-- /.input group -->
</div>

...我唯一能看到的是输入框，但里面没有掩码。似乎 HTML 工作，但 JS 没有。

（PD：代码是电话而不是欧元，因为我开始复制示例以稍后对其进行编辑。）

先决条件

我已经运行了php bin/console avanzu:admin:fetch-vendor 命令和php bin/console assets:install --symlink 这里提到的https://github.com/avanzu/AdminThemeBundle

我还有资产包并预加载到内核中。

更多上下文

在我的页面中，我看到主模板包含所有 LTE javascript：

<script src="/hello-trip/dislodge-galvanize/web/bundles/avanzuadmintheme/static/dev/scripts/admin-lte-all.js"></script>

此外，如果我探索 admin-lte-all.js，它就在那里，搜索 inputmask 会发现它在缩小版中：

但是，在页面中，我仍然可以看到：

在演示站点中，我可以看到：

知道发生了什么，或者我是否应该做点别的事情。

问题

我应该在我的树枝中编写什么代码才能使<input class="form-control" data-inputmask="'mask': ['999-999-9999 [x99999]', '+099 99 99 9999[9]-9999']" data-mask="" type="text"> 输入起作用？

【问题讨论】：

在assets:install之后你有没有尝试cache:clear --env=prod？

【参考方案1】：

在你的 js 中添加这一行

 $('[data-mask]').inputmask()