swipeAction.nvue 4.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228
  1. <template>
  2. <view class="u-page">
  3. <view class="u-demo-block">
  4. <text class="u-demo-block__title">演示案例</text>
  5. <view class="u-page__swipe-action-item">
  6. <u-swipe-action>
  7. <u-swipe-action-item
  8. v-if="show1"
  9. :options="options1"
  10. @click="click"
  11. >
  12. <view class="swipe-action u-border-top u-border-bottom">
  13. <view class="swipe-action__content">
  14. <text class="swipe-action__content__text">基础使用</text>
  15. </view>
  16. </view>
  17. </u-swipe-action-item>
  18. </u-swipe-action>
  19. </view>
  20. </view>
  21. <view class="u-demo-block">
  22. <text class="u-demo-block__title">按钮组</text>
  23. <view class="u-page__swipe-action-item">
  24. <u-swipe-action>
  25. <u-swipe-action-item :options="options2">
  26. <view class="swipe-action u-border-top u-border-bottom">
  27. <view class="swipe-action__content">
  28. <text class="swipe-action__content__text">两个按钮并列</text>
  29. </view>
  30. </view>
  31. </u-swipe-action-item>
  32. </u-swipe-action>
  33. </view>
  34. </view>
  35. <view class="u-demo-block">
  36. <text class="u-demo-block__title">带图标</text>
  37. <view class="u-page__swipe-action-item">
  38. <u-swipe-action>
  39. <u-swipe-action-item :options="options3">
  40. <view class="swipe-action u-border-top u-border-bottom">
  41. <view class="swipe-action__content">
  42. <text class="swipe-action__content__text">自定义图标</text>
  43. </view>
  44. </view>
  45. </u-swipe-action-item>
  46. </u-swipe-action>
  47. </view>
  48. </view>
  49. <view class="u-demo-block">
  50. <text class="u-demo-block__title">组合使用</text>
  51. <view class="u-page__swipe-action-item">
  52. <u-swipe-action>
  53. <u-swipe-action-item
  54. :options="item.options"
  55. v-for="(item, index) in options4"
  56. :disabled="item.disabled"
  57. :key="index"
  58. >
  59. <view
  60. class="swipe-action u-border-top"
  61. :class="[index === options4.length - 1 && 'u-border-bottom']"
  62. >
  63. <view class="swipe-action__content">
  64. <text class="swipe-action__content__text">{{ item.text }}</text>
  65. </view>
  66. </view>
  67. </u-swipe-action-item>
  68. </u-swipe-action>
  69. </view>
  70. </view>
  71. <view class="u-demo-block">
  72. <text class="u-demo-block__title">自定义按钮形状</text>
  73. <view class="u-page__swipe-action-item">
  74. <u-swipe-action>
  75. <u-swipe-action-item :options="options5">
  76. <view class="swipe-action u-border-top u-border-bottom">
  77. <view class="swipe-action__content">
  78. <text class="swipe-action__content__text">圆形按钮</text>
  79. </view>
  80. </view>
  81. </u-swipe-action-item>
  82. </u-swipe-action>
  83. </view>
  84. </view>
  85. </view>
  86. </template>
  87. <script>
  88. export default {
  89. data() {
  90. return {
  91. show1: true,
  92. moveX: 0,
  93. showText: '当前状态:关',
  94. showStatus: false,
  95. options1: [{
  96. text: '删除',
  97. style: {
  98. backgroundColor: '#f56c6c'
  99. }
  100. }],
  101. options2: [{
  102. text: '收藏',
  103. style: {
  104. backgroundColor: '#3c9cff'
  105. }
  106. }, {
  107. text: '删除',
  108. style: {
  109. backgroundColor: '#f56c6c'
  110. }
  111. }],
  112. options3: [{
  113. text: '收藏',
  114. icon: 'star-fill',
  115. iconSize: '20',
  116. style: {
  117. backgroundColor: '#f9ae3d'
  118. }
  119. }],
  120. options4: [{
  121. text: '禁用状态',
  122. disabled: true,
  123. options: [{
  124. text: '置顶',
  125. style: {
  126. backgroundColor: '#3c9cff',
  127. }
  128. },
  129. {
  130. text: '取消',
  131. style: {
  132. backgroundColor: '#f9ae3d',
  133. }
  134. },
  135. ],
  136. }, {
  137. text: '正常状态',
  138. disabled: false,
  139. options: [{
  140. text: '置顶',
  141. style: {
  142. backgroundColor: '#3c9cff',
  143. }
  144. },
  145. {
  146. text: '取消',
  147. style: {
  148. backgroundColor: '#f9ae3d',
  149. }
  150. },
  151. ],
  152. }, {
  153. text: '自动关闭',
  154. disabled: false,
  155. options: [{
  156. text: '置顶',
  157. style: {
  158. backgroundColor: '#3c9cff',
  159. }
  160. },
  161. {
  162. text: '取消',
  163. style: {
  164. backgroundColor: '#f9ae3d',
  165. }
  166. },
  167. ],
  168. }],
  169. options5: [{
  170. icon: 'trash-fill',
  171. style: {
  172. backgroundColor: '#f56c6c',
  173. width: '40px',
  174. height: '40px',
  175. borderRadius: '100px',
  176. margin: '0 6px'
  177. }
  178. }, {
  179. icon: 'heart-fill',
  180. style: {
  181. backgroundColor: '#5ac725',
  182. width: '40px',
  183. height: '40px',
  184. borderRadius: '100px',
  185. margin: '0 6px'
  186. }
  187. }]
  188. }
  189. },
  190. methods: {
  191. click(index) {
  192. console.log('click', index);
  193. uni.showModal({
  194. title: '温馨提示',
  195. content: '确定要删除吗?',
  196. success: res => {
  197. if (res.confirm) {
  198. this.show1 = false
  199. }
  200. }
  201. })
  202. }
  203. }
  204. }
  205. </script>
  206. <style lang="scss">
  207. .u-page {
  208. padding: 0;
  209. }
  210. .u-demo-block__title {
  211. padding: 10px 0 2px 15px;
  212. }
  213. .swipe-action {
  214. &__content {
  215. padding: 25rpx 0;
  216. &__text {
  217. font-size: 15px;
  218. color: $u-main-color;
  219. padding-left: 30rpx;
  220. }
  221. }
  222. }
  223. </style>