滑动操作 SwipeAction

基本用法

**注意:因为仅支持触摸事件,所以请打开chrome手机模拟查看demo

滑动操作 SwipeAction - 图1

  1. <template lang="html">
  2. <main>
  3. <div class="demo-hidden">
  4. <za-panel>
  5. <za-panel-header title="基本"></za-panel-header>
  6. <za-panel-body>
  7. <za-swipe-action
  8. autoClose
  9. @close='handleClose'
  10. @open='handleOpen'
  11. :right="action1">
  12. <za-cell>左滑看看(自动关闭)</za-cell>
  13. </za-swipe-action>
  14. <za-swipe-action
  15. @close='handleClose'
  16. @open='handleOpen'
  17. :left="action1">
  18. <za-cell>右滑看看</za-cell>
  19. </za-swipe-action>
  20. <za-swipe-action
  21. @close='handleClose'
  22. @open='handleOpen'
  23. :left="action1"
  24. :right="action1">
  25. <za-cell>左右都能滑动</za-cell>
  26. </za-swipe-action>
  27. </za-panel-body>
  28. </za-panel>
  29. </div>
  30. </main>
  31. </template>
  32. <script>
  33. export default {
  34. data() {
  35. return {
  36. action1:[
  37. {
  38. theme: 'error',
  39. text: '右按钮1',
  40. onClick: () => console.log('右按钮1'),
  41. },
  42. {
  43. theme: 'success',
  44. text: '右按钮2',
  45. onClick: () => console.log('右按钮2'),
  46. },
  47. ]
  48. }
  49. },
  50. methods: {
  51. handleClose(reason) {
  52. console.log(reason);
  53. },
  54. handleOpen(reason) {
  55. console.log(reason);
  56. },
  57. },
  58. };
  59. </script>

API

SwipeAction Attributes

属性类型默认值可选值/参数说明
prefixClsstringza-swipeaction类名前缀
leftarrayOf(object)[ ]object: { theme, text, onClick }左侧按钮组
rightarrayOf(object)[ ]object: { theme, text, onClick }右侧按钮组
autoCloseboolfalse点击按钮是否自动关闭

SwipeAction Events

事件名称说明回调参数
open打开时的事件direaction, 可能值left, right
close关闭时的事件reason, 可能值retract, touchaway