Question

我正在使用Vue路由器构建Vue应用程序。我尝试从here实现jscolor脚本。基本上，您必须包括脚本，并将jscolor类添加到html元素中。我正在从vue使用SFC。

HTML / Vue模板

<div class="form-group row">
    <label for="departmentColor" class="col-sm-2 col-form-label label">{{ t('Color') }}</label>
    <div class="col-sm-10">
    <input type="text" class="CN-input-field jscolor" id="departmentColor" :value="department.color" @change="changeColor" :style="`background-color: ${department.color}`">
    </div>
</div>

JS

// Local deps (js file)
import jscolor from '../../../assets/js/jscolor';

因此，基本上，当我对页面本身进行一次硬刷新时，它可以工作，但是例如，当我从另一个页面路由到该页面时，似乎脚本未加载，因为，好色选器未加载活性。

有人在那里有同样的问题，并且有相似的依赖性吗？可能有解决这个问题的方法吗？

Answer 1

查看jscolor的源代码，似乎页面加载后，它将自己注册到jscolor类的元素上。以后再插入DOM的任何新元素都不会受到影响。

您的选择是：

使用其他支持动态元素的库。
在新元素添加到DOM后，您必须手动将jscolor附加到新元素上（可以使用custom directive来做到这一点）。

有趣的是，jscolor并未对单击事件使用事件委托来涵盖这种情况。

仅在硬刷新后，本地依赖性才未随Vue / Vue路由器一起加载

1 个答案: