1

我在我的应用程序中使用 vue.js、vue-router 和 vue-material。我有一个搜索栏，您可以在其中对艺术家、发行和唱片进行全局搜索。这看起来有点像这样：

带有示例搜索的搜索栏

结果 div 当前仅在输入表单具有焦点时显示。我在css中这样做：

.search-field + span {
  display: none;
}

.search-field:focus + span, .search-field:active + span {
  display: block;
}

这在所有其他组件之前的绝对位置显示/隐藏结果范围。

我现在遇到的问题是，当我单击其中一个结果条目时，它什么也不做。

显示的结果项是类型的md-list-item，并为 vue-router 定义了一个:to属性，以执行单击时的站点导航。

我认为它什么都不做，因为“点击”（动作）实际上从未在列表项本身上执行，而是在它后面的组件（主体）上执行。我认为这是因为:focus选择器在项目上触发 onclick 事件之前更改了视图状态（隐藏了结果范围）。

有没有办法延迟从:focus正常的切换？我试图将 css 属性transition-delay放在.search-field课堂上，但这并没有让我走得太远。

编辑 1

我发现了一个类似的问题，但无法将解决方案移植到我的标记中；它看起来像这样：

  <md-field class="md-toolbar-section-end searchbar md-inline grow">
    <label class="search-label">Search...</label>
    <md-input class="search-field" v-model="query"></md-input>
    <span class="result-span">
    <md-content class="results md-elevation-15 md-scrollbar md-layout" :style="{ display: displayResults ? 'flex' : 'none' }">
      <template v-for="loader in [loaderArtists, loaderReleases, loaderRecords]">
        <div :key="Math.random()">
          <md-list>
            <template v-if="loader.isLoading">
              <span>
                <md-progress-spinner :md-diameter="20" :md-stroke="3" md-mode="indeterminate"></md-progress-spinner>
              </span>
            </template>
            <template v-else>
              <template v-for="item in loader.dataSource.data">
                <md-list-item :to="item.value">
                  <md-icon>{{item.icon}}</md-icon>
                  <span class="md-list-item-text">{{item.label}}</span>
                </md-list-item>
              </template>
            </template>
          </md-list>
          <md-divider class="divider"></md-divider>
        </div>
      </template>
    </md-content>
    </span>
    <md-icon class="search-icon">search</md-icon>
  </md-field>

我相应地更改了 css 以使用属性visibility而不是display添加transition: visibility 0.2s到.result-span类中 - 这不起作用。

4

1 回答 1

0

我设法通过应用此答案中提供的解决方案来解决问题。

一开始这不起作用的原因是，因为.2s仍然太快，我不得不将其更改为0.3s

总结：

我将css更改为：

.result-span {
  transition: visibility .3s;
}

.search-field ~ .result-span {
  visibility: hidden;
}

.search-field:focus ~ .result-span, .search-field:active ~ .result-span {
  visibility: visible;
}
于 2018-03-19T07:15:58.290 回答