Quasar Framework (Vue)：可折叠和鼠标离开答案

【问题标题】：Quasar Framework (Vue) : Collapsible and mouseleaveQuasar Framework (Vue)：可折叠和鼠标离开
【发布时间】：2019-05-20 20:32:59
【问题描述】：

我正在尝试找出quasar 中的可折叠组件。由于某种原因，鼠标悬停事件不起作用。

请告诉我，当用户将指针悬停在 .

请帮忙！ :)

<q-collapsible 
      opened
      icon="bookmark"
      :label="$t('Custom dashboards')"
      @mouseleave="var2 = true" //It doesn't work :(
      @mouseenter="var2 = false" //It doesn't work
    >
      <q-item>
        <q-btn
          @click="func()"
          icon="add"
          :label="$t('Create')"/>
      </q-item>
      </q-collapsible>

enter image description here

【问题讨论】：

它试图在未知范围内分配给var2。
变量存在。它是在
避免使用全局变量或以window.var2 访问它们。此外，写入变量不会触发重绘文本。
感谢您的回复！但是我还有一个问题：鼠标事件在 Collapsible 上不起作用

标签： vue.js vuejs2 quasar-framework

【解决方案1】：

完整的 HTML/Script/CSS 有望解决您的问题。由于那不可用，我基本上是您所做的，但扩展以解决图像中提供的内容。

@mouseleave 和 @mouseenter 工作正常。您只需设置并使用该值来隐藏/显示按钮。

我不相信 QCollapsible 支持标题中的插槽（如果我错了，请正确），因此将 QToolbar 与 QCollapsible 和 QList 结合使用可能会更好。

// Update the variables to toggle the display

new Vue({
  el: '#q-app',
  data: function() {
    return {
      listOpen: true,
      hover: false
    }
  },
  methods: {
    toggleList: function() {
      this.listOpen = !this.listOpen
    },
    addItem: function() {
      this.$q.notify('clicked')
    }
  },
  computed: {
    hovering() {
      return this.listOpen && this.hover
    }
  }
})

// Hide the existing collapse button (maybe there is a property for this)
div.q-collapsible.q-item-division.relative-position.q-collapsible-cursor-pointer>div>div.q-item.q-item-division.relative-position {
  display: none
}

<!-- Create a div with the hoverover events -->
<div style="width:500px" @mouseleave="hover = false" @mouseenter="hover = true">
  <q-toolbar>
    <div class="on-left">
      <q-icon name="bookmark">
        <q-icon>
    </div>
    <q-toolbar-title v-show="!hovering">
      Custom Dashboard
    </q-toolbar-title>
    <q-btn v-show="hovering" icon="add" label="Create" class="full-width" @click="addItem"></q-btn>
    <q-btn flat icon="menu" @click="toggleList"></q-btn>
  </q-toolbar>
  <q-collapsible opened v-model="listOpen">
    <div slot="side">test</div>
    <q-list>
      <q-item>
        <q-item-side left>
          <q-icon name="dashboard">
            <q-icon>
        </q-item-side>
        <q-item-main>
          dash 2
        </q-item-main>
      </q-item>
      <q-item>
        <q-item-side left>
          <q-icon name="dashboard">
            <q-icon>
        </q-item-side>
        <q-item-main>
          dash 5
        </q-item-main>
      </q-item>
    </q-list>
  </q-collapsible>
</div>

Codepen

【讨论】：