Question

在我的应用程序中，我想使用 bootstrap-datetimepicker 库，它可以让您在网站上找到日期和时间选择器。

我只是将datepicker放入我的HTML（一些div和输入）。我还添加了初始化整个事情的脚本。

我发现了一个奇怪的行为：如果我的datetimepicker放在Vue div中，它就不起作用了！（当我点击输入字段时，应显示日历）。当我把选择器放在Vue DIV之外时，它可以很好地工作。

通常，我注意到Vue会阻止鼠标事件，我对MetricsGraphics.js库也有同样的问题（用于绘制图形） - 如果我把它放在Vue DIV中，鼠标悬停事件根本不起作用。我不得不把它放在Vue之外。

原因是什么？在datetimepicker的情况下，我无法将其置于Vue之外，因为我想在其上使用Vue功能。

我没有包含任何代码，但基本上，这不起作用：

String regex = "^max_len\\[(\\d+)\\];$";
String stringPattern = "max_len[5];";
Pattern pattern = Pattern.compile(regex);
Matcher matcher = pattern.matcher(stringPattern);
if(matcher.find()){
    int maxLength = Integer.valueOf(matcher.group(1);
}

这有效：

<div>
    <div id="vue-app">
        <!-- DATE_TIME PICKER: -->
        <div class="form-group">
            <div class='input-group date' id='datetimepicker1'>
                <input type='text' class="form-control" />
                <span class="input-group-addon">
                    <span class="glyphicon glyphicon-calendar"></span>
                </span>
            </div>
        </div>
    <div>
<div>

<script type="text/javascript">
    $(function () {
        $('#datetimepicker1').datetimepicker();
    });
</script>

Answer 1

在$('#datetimepicker1').datetimepicker();执行时，#datetimepicker1不存在，因为vue尚未完成解析模板。

在vue中初始化datetimepicker的正确方法是在mounted生命周期钩子中执行此操作。另外，为了让它听起来更像是 vue-ish ，您可以使用ref到您的DOM元素而不是id。看看下面的例子。

＆＃13;

new Vue({
  el: '#vue-app',
  mounted() {
    let dt = this.$refs['datetimepicker1']
    $(dt).datetimepicker()
  }
})

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>


<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker-standalone.min.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>


<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>

<div>
    <div id="vue-app">
        <!-- DATE_TIME PICKER: -->
        <div class="form-group">
            <div class='input-group date' ref='datetimepicker1'>
                <input type='text' class="form-control" />
                <span class="input-group-addon">
                    <span class="glyphicon glyphicon-calendar"></span>
                </span>
            </div>
        </div>
    <div>
<div>

＆＃13;

VueJS - 如果元素放在Vue app div中，鼠标事件不起作用

1 个答案: