CellSwipe

左滑唤出按钮的列表项。

引入

import { CellSwipe, CellSwipeButton } from 'we-vue'

Vue.use(CellSwipe).use(CellSwipeButton)
1
2
3

WARNING

cell-swipe 只能在 group 中使用。cell-swipe-button 仅与 cell-swipe 结合使用

例子

默认示例

<wv-group title="默认">
  <wv-cell-swipe title="标题文字" :value="true">
    <wv-cell-swipe-button type="warn" slot="right" @click="deleteClicked">删除</wv-cell-swipe-button>
    <wv-cell-swipe-button type="default" slot="right" @click="readClicked">查看</wv-cell-swipe-button>
  </wv-cell-swipe>
</wv-group>
1
2
3
4
5
6

右侧按钮内为图标

<wv-group title="图标按钮">
  <wv-cell-swipe title="标题文字" :value="true">
    <wv-cell-swipe-button type="warn" slot="right" @click.native="deleteClicked">
      <i class="iconfont icon-rubish"></i>
    </wv-cell-swipe-button>
    <wv-cell-swipe-button type="default" slot="right" @click.native="readClicked">
      <i class="iconfont icon-view"></i>
    </wv-cell-swipe-button>
  </wv-cell-swipe>
</wv-group>
1
2
3
4
5
6
7
8
9
10

左侧带图标

<wv-group title="左侧带图标">
  <wv-cell-swipe title="标题文字">
    <img :src="imgIcon" slot="icon" class="cell-icon">
    <wv-cell-swipe-button type="warn" slot="right" @click.native="deleteClicked">删除</wv-cell-swipe-button>
    <wv-cell-swipe-button type="default" slot="right" @click.native="readClicked">查看</wv-cell-swipe-button>
  </wv-cell-swipe>
</wv-group>
1
2
3
4
5
6
7

点击后可跳转

<wv-group title="可跳转">
  <wv-cell-swipe title="标题文字" is-link to="/">
    <wv-cell-swipe-button type="warn" slot="right" @click.native="deleteClicked">删除</wv-cell-swipe-button>
    <wv-cell-swipe-button type="default" slot="right" @click.native="readClicked">查看</wv-cell-swipe-button>
  </wv-cell-swipe>
</wv-group>
1
2
3
4
5
6

API

  • cell-swipe
参数 类型 说明 可选值 默认值
title String 标题,即左侧label
value String 内容,即左侧文字
to String 或 Object vue-router 跳转的目标地址,与 is-link 配合使用
url String 跳转 url,与 is-link 配合使用
is-link Boolean 是否为链接 false

TIP

从 v1.6.0 开始,使用 to 定义 vue-router 跳转目标,使用 url 定义普通跳转。

  • cell-swipe-button
参数 类型 说明 可选值 默认值
type String 按钮类型 'default'

Slots

  • cell-swipe
name 描述
icon 左侧图标位,参考 cell 组件
hd 中部标题位,参考 cell 组件
ft 右侧说明文字位,参考 cell 组件
right 右侧位可加入多个按钮
  • cell-swipe-button
name 描述
- 按钮内容位,可为文字或其它元素
中国联通
20.45