WeUI Uniapp Design

Appearance

Slideview 滑动菜单 ​

左滑显示操作按钮的视图组件，常用于列表项的快捷操作（删除、标记、分享等）。组件采用 Cell 内置滑动项的官方 weui-cell_swiped / weui-swiped-btn 结构；默认插槽放入一个完整的 weui-cell。通过 v-model:show 控制展开状态，点击按钮自动收起并触发 buttonclick 事件。

基础用法 ​

通过 buttons 设置操作按钮列表，v-model:show 控制是否展开右侧按钮。移动端可通过左滑手势展开，桌面端（无 touch 事件）通过按钮切换 show 状态。点击按钮触发 buttonclick 事件并自动收起。

滑动菜单内容
标记删除
查看代码
vue
<template>
  <weui-button type="primary" @click="show = !show">{{ show ? '收起' : '展开' }}</weui-button>
  <weui-slideview v-model:show="show" :buttons="buttons" @buttonclick="onButtonClick">
    <weui-cell title="滑动菜单内容" />
  </weui-slideview>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import type { SlideButton } from 'weui-uniapp-design'

const show = ref(false)
const buttons: SlideButton[] = [
  { text: '标记' },
  { text: '删除', type: 'warn' },
]

const onButtonClick = (btn: SlideButton, index: number) => {
  console.log(btn, index)
}
</script>

三个操作按钮 ​

通过在 buttons 中添加更多项实现多按钮操作，warn 类型的按钮显示为红色警告样式。

三按钮滑动菜单
标记分享删除
查看代码
vue
<template>
  <weui-button type="primary" @click="show = !show">{{ show ? '收起' : '展开' }}</weui-button>
  <weui-slideview v-model:show="show" :buttons="buttons" @buttonclick="onButtonClick">
    <weui-cell title="三按钮滑动菜单" />
  </weui-slideview>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import type { SlideButton } from 'weui-uniapp-design'

const show = ref(false)
const buttons: SlideButton[] = [
  { text: '标记' },
  { text: '分享' },
  { text: '删除', type: 'warn' },
]
</script>

禁用滑动 ​

通过 disabled 禁用滑动和点击收起交互。父组件仍可通过 v-model:show 控制展开状态，但点击内容区域不会自动收起。

禁用滑动（点击内容区域不收起，但按钮仍可点击收起）
标记删除
查看代码
vue
<template>
  <weui-button type="primary" @click="show = !show">{{ show ? '收起' : '展开' }}</weui-button>
  <weui-slideview v-model:show="show" :buttons="buttons" disabled>
    <weui-cell title="禁用滑动（点击内容区域不收起）" />
  </weui-slideview>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import type { SlideButton } from 'weui-uniapp-design'

const show = ref(false)
const buttons: SlideButton[] = [
  { text: '标记' },
  { text: '删除', type: 'warn' },
]
</script>

点击按钮自动收起 ​

点击右侧操作按钮时，组件自动触发 buttonclick 事件并收起（show 置为 false），无需手动处理收起逻辑。同时触发 close 事件。

点击右侧按钮后自动收起
标记删除
查看代码
vue
<template>
  <weui-button type="primary" @click="show = !show">{{ show ? '收起' : '展开' }}</weui-button>
  <weui-slideview v-model:show="show" :buttons="buttons" @buttonclick="onButtonClick">
    <weui-cell title="点击右侧按钮后自动收起" />
  </weui-slideview>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import type { SlideButton } from 'weui-uniapp-design'

const show = ref(false)
const buttons: SlideButton[] = [
  { text: '标记' },
  { text: '删除', type: 'warn' },
]

const onButtonClick = (btn: SlideButton, index: number) => {
  console.log(btn, index)
}
</script>

自定义内容 ​

通过 default slot 自定义左侧内容区域，可放置卡片、列表项等任意内容。

A
自定义卡片标题
这是一段描述文字
编辑删除
查看代码
vue
<template>
  <weui-button type="primary" @click="show = !show">{{ show ? '收起' : '展开' }}</weui-button>
  <weui-slideview v-model:show="show" :buttons="buttons" @buttonclick="onButtonClick">
    <div class="weui-cell" style="padding: 12px 16px; background: #fff;">
      <div class="weui-cell__hd" style="margin-right: 8px;">
        <div style="width: 40px; height: 40px; border-radius: 50%; background: #07c160;">A</div>
      </div>
      <div class="weui-cell__bd">
        <div>自定义卡片标题</div>
        <div style="font-size: 13px; color: #888;">这是一段描述文字</div>
      </div>
    </div>
  </weui-slideview>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import type { SlideButton } from 'weui-uniapp-design'

const show = ref(false)
const buttons: SlideButton[] = [
  { text: '编辑' },
  { text: '删除', type: 'warn' },
]
</script>

Attributes ​

参数说明类型默认值
show (v-model)是否展开右侧按钮booleanfalse
buttons操作按钮列表SlideButton[][]
disabled是否禁用滑动和点击收起booleanfalse
ext-class自定义附加类名string—

SlideButton ​

属性说明类型默认值
text按钮文字string—
type按钮类型，warn 为警告样式（红色）'default' | 'warn'—
width操作按钮宽度（px）；展开距离由所有按钮宽度相加得出number68

Events ​

事件名说明回调参数
update:show展开状态变化时触发(value: boolean)
buttonclick点击按钮时触发，随后自动收起(button: SlideButton, index: number)
close收起时触发（点击按钮或点击内容区域均会触发）—

Slots ​

名称说明
default左侧主内容区域