滑动项
QSlideItem 组件本质上是一个带有两个额外插槽（left 和 right）的 QItem，它允许用户通过鼠标或用手指将项目拖动到其中一侧，以便应用特定的操作。
QSlideItem API
QSlideItem API
props
5
slots
5
events
6
methods
1
left-color
: String
说明
Quasar 颜色调色板中左侧背景的颜色名称
right-color
: String
说明
来自 Quasar 颜色调色板的右侧背景颜色名称
top-color
: String
说明
Quasar 颜色调色板中用于顶部背景的颜色名称
bottom-color
: String
说明
Quasar 颜色调色板中底部背景的颜色名称
dark
: Boolean | null
说明
通知组件背景颜色为深色
用法
用鼠标或用手指左右滑动以查看 QSlideItem 的效果。
TIP
如果您的内容带有图片，您可能需要给它们添加draggable="false"属性，否则浏览器的原生事件可能会起副作用。
基础
Template
Script
All
<template>
<div class="q-pa-md" style="max-width: 350px">
<q-list bordered separator>
<q-slide-item @left="onLeft" @right="onRight">
<template v-slot:left>
<q-icon name="done" />
</template>
<template v-slot:right>
<q-icon name="alarm" />
</template>
<q-item>
<q-item-section avatar>
<q-avatar color="primary" text-color="white" icon="bluetooth" />
</q-item-section>
<q-item-section>Icons only</q-item-section>
</q-item>
</q-slide-item>
<q-slide-item @left="onLeft" @right="onRight">
<template v-slot:left>
Left
</template>
<template v-slot:right>
Right content.. long
</template>
<q-item>
<q-item-section avatar>
<q-avatar>
<img src="https://cdn.quasar.dev/img/avatar6.jpg" draggable="false">
</q-avatar>
</q-item-section>
<q-item-section>Text only</q-item-section>
</q-item>
</q-slide-item>
<q-slide-item @left="onLeft" @right="onRight">
<template v-slot:left>
<div class="row items-center">
<q-icon left name="done" /> Left
</div>
</template>
<template v-slot:right>
<div class="row items-center">
Right content.. long <q-icon right name="alarm" />
</div>
</template>
<q-item>
<q-item-section avatar>
<q-avatar>
<img src="https://cdn.quasar.dev/img/avatar4.jpg" draggable="false">
</q-avatar>
</q-item-section>
<q-item-section>Text and icons</q-item-section>
</q-item>
</q-slide-item>
</q-list>
</div>
</template>Copied to clipboard
done
alarm
bluetooth
Icons only
Left
Right content.. long
Text only
done Left
Right content.. long alarm
Text and icons
垂直的
Template
Script
All
<template>
<div class="q-pa-md" style="max-width: 220px">
<q-list bordered separator>
<q-slide-item @top="onTop" @bottom="onBottom">
<template v-slot:top>
<q-icon name="link" />
</template>
<template v-slot:bottom>
<q-icon name="link_off" />
</template>
<q-item style="height: 150px">
<q-item-section avatar>
<q-avatar color="primary" text-color="white" icon="fingerprint" />
</q-item-section>
<q-item-section>Slide vertically</q-item-section>
</q-item>
</q-slide-item>
</q-list>
</div>
</template>Copied to clipboard
link
link_off
fingerprint
Slide vertically
自定义颜色
Template
Script
All
<template>
<div class="q-pa-md" style="max-width: 350px">
<q-list bordered separator>
<q-slide-item @left="onLeft" @right="onRight" left-color="red" right-color="purple">
<template v-slot:left>
<div class="row items-center">
<q-icon left name="done" /> Left
</div>
</template>
<template v-slot:right>
<div class="row items-center">
Right content.. long <q-icon right name="alarm" />
</div>
</template>
<q-item>
<q-item-section avatar>
<q-icon color="primary" name="cell_wifi" />
</q-item-section>
<q-item-section>Custom colors (red, purple)</q-item-section>
</q-item>
</q-slide-item>
<q-slide-item @left="onLeft" @right="onRight" left-color="amber" right-color="primary">
<template v-slot:left>
<div class="row items-center text-black">
<q-icon left name="done" /> Left
</div>
</template>
<template v-slot:right>
<div class="row items-center">
Right content.. long <q-icon right name="alarm" />
</div>
</template>
<q-item class="bg-grey-3">
<q-item-section avatar>
<q-icon color="purple" name="event" />
</q-item-section>
<q-item-section>Custom colors 2</q-item-section>
</q-item>
</q-slide-item>
</q-list>
</div>
</template>Copied to clipboard
done Left
Right content.. long alarm
cell_wifi
Custom colors (red, purple)
done Left
Right content.. long alarm
event
Custom colors 2
滑动时自定义
Template
Script
All
<template>
<div class="q-pa-md" style="max-width: 350px">
<q-list bordered separator>
<q-slide-item
:left-color="leftColor"
:right-color="rightColor"
@left="onLeft"
@right="onRight"
@slide="onSlide"
>
<template v-slot:left>
Left
</template>
<template v-slot:right>
Right content.. long
</template>
<q-item>
<q-item-section avatar>
<q-avatar>
<img src="https://cdn.quasar.dev/img/avatar6.jpg" draggable="false">
</q-avatar>
</q-item-section>
<q-item-section>Text only</q-item-section>
</q-item>
</q-slide-item>
</q-list>
</div>
</template>Copied to clipboard
Left
Right content.. long
Text only
只有一边可滑或都不可滑
Template
Script
All
<template>
<div class="q-pa-md" style="max-width: 350px">
<q-list bordered separator>
<q-slide-item @left="onLeft" @right="onRight">
<template v-slot:left>
<q-icon name="done" />
</template>
<q-item>
<q-item-section avatar>
<q-avatar>
<img src="https://cdn.quasar.dev/img/avatar2.jpg" draggable="false">
</q-avatar>
</q-item-section>
<q-item-section>Only left action</q-item-section>
</q-item>
</q-slide-item>
<q-slide-item @left="onLeft" @right="onRight">
<template v-slot:right>
<q-icon name="alarm" />
</template>
<q-item>
<q-item-section avatar>
<q-avatar>
<img src="https://cdn.quasar.dev/img/avatar3.jpg" draggable="false">
</q-avatar>
</q-item-section>
<q-item-section>Only right action</q-item-section>
</q-item>
</q-slide-item>
<q-slide-item @left="onLeft" @right="onRight">
<q-item>
<q-item-section avatar>
<q-avatar>
<img src="https://cdn.quasar.dev/img/avatar5.jpg" draggable="false">
</q-avatar>
</q-item-section>
<q-item-section>No actions</q-item-section>
</q-item>
</q-slide-item>
</q-list>
</div>
</template>Copied to clipboard
done
Only left action
alarm
Only right action
No actions
版权声明 本中文文档内容版权为站长个人所有，保留所有权利。
免责声明 本站点所包含的任何跳转链接均为第三方广告内容，站点对这些广告内容的准确性、合法性、真实性不承担任何责任。用户点击跳转链接进入第三方网站后，应自行判断广告内容的真实性和合法性，并自行承担因使用广告内容而产生的风险和责任。任何因使用第三方广告内容而导致的损失或损害，本站点概不负责。