我试图找出类星体内部的可折叠组件。由于某种原因,鼠标悬停事件不起作用。
请告诉我当用户将指针悬停在 .
请帮忙! :)
<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>
在此处输入图像描述
完整的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>
代码笔