[英]Quasar JS collapsible in drawer collapse on mini state
我正在使用Quasar JS版本v0.17.19,并且我希望在鼠标移开时布局抽屉进入迷你状态,但可折叠项仅在显示图标的情况下仍可扩展。 鼠标移出时,布局抽屉进入迷你状态; 但是,展开的项目已折叠。 我已经阅读了文档,但是没有看到任何针对此行为的配置。
<q-layout-drawer side="left" no-hide-on-route-change overlay v-model="isLeftDrawerOpen"
content-class="bg-blue-grey-10" @mouseover="miniState = false" @mouseout="miniState = true"
:mini="miniState" :width=290 :breakpoint="1037">
<user-menu />
</q-layout-drawer>
布局抽屉中没有默认选项,但是您可以通过编程实现。 请参考以下示例。
<q-layout-drawer
v-model="isLeftDrawerOpen"
:mini="miniState"
@mouseover="miniState = false"
@mouseout="miniState = true;"
>
<q-list>
<q-item>
<component :is="comp" v-model="comp_model" icon="settings" label="Settings">
<div>
<q-list
no-border
inset-delimiter
>
<q-item v-if="miniState && comp=='div'">
<q-item-side icon="settings">
</q-item-side>
<q-item-main>
Settings
</q-item-main>
</q-item>
<q-item>
<q-item-side icon="insert_drive_file">
</q-item-side>
<q-item-main>
User Accounts
</q-item-main>
</q-item>
<q-item>
<q-item-side icon="group">
</q-item-side>
<q-item-main>
User Accounts
</q-item-main>
</q-item>
</q-list>
</div>
</component>
</q-item>
</q-list>
</q-layout-drawer>
data() {
return {
comp:'q-collapsible',
isLeftDrawerOpen: true,
comp_model:false,
miniState:true,
}
},
watch: {
'miniState': function () {
if (this.miniState && this.comp_model) {
this.comp = 'div'
}
else{
this.comp = 'q-collapsible'
}
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.