u-swipe-action-item.vue 5.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191
  1. <template>
  2. <view class="u-swipe-action-item" ref="u-swipe-action-item">
  3. <view class="u-swipe-action-item__right">
  4. <slot name="button">
  5. <view v-for="(item,index) in options" :key="index" class="u-swipe-action-item__right__button"
  6. :ref="`u-swipe-action-item__right__button-${index}`" :style="[{
  7. alignItems: item.style && item.style.borderRadius ? 'center' : 'stretch'
  8. }]" @tap="buttonClickHandler(item, index)">
  9. <view class="u-swipe-action-item__right__button__wrapper" :style="[{
  10. backgroundColor: item.style && item.style.backgroundColor ? item.style.backgroundColor : '#C7C6CD',
  11. borderRadius: item.style && item.style.borderRadius ? item.style.borderRadius : '0',
  12. padding: item.style && item.style.borderRadius ? '0' : '0 15px',
  13. }, item.style]">
  14. <u-icon v-if="item.icon" :name="item.icon"
  15. :color="item.style && item.style.color ? item.style.color : '#ffffff'"
  16. :size="item.iconSize ? $u.addUnit(item.iconSize) : item.style && item.style.fontSize ? $u.getPx(item.style.fontSize) * 1.2 : 17"
  17. :customStyle="{
  18. marginRight: item.text ? '2px' : 0
  19. }"></u-icon>
  20. <text v-if="item.text" class="u-swipe-action-item__right__button__wrapper__text u-line-1"
  21. :style="[{
  22. color: item.style && item.style.color ? item.style.color : '#ffffff',
  23. fontSize: item.style && item.style.fontSize ? item.style.fontSize : '16px',
  24. lineHeight: item.style && item.style.fontSize ? item.style.fontSize : '16px',
  25. }]">{{ item.text }}</text>
  26. </view>
  27. </view>
  28. </slot>
  29. </view>
  30. <!-- #ifdef APP-VUE || MP-WEIXIN || H5 || MP-QQ -->
  31. <view class="u-swipe-action-item__content" @touchstart="wxs.touchstart" @touchmove="wxs.touchmove"
  32. @touchend="wxs.touchend" :status="status" :change:status="wxs.statusChange" :size="size"
  33. :change:size="wxs.sizeChange">
  34. <!-- #endif -->
  35. <!-- #ifdef APP-NVUE -->
  36. <view class="u-swipe-action-item__content" ref="u-swipe-action-item__content" @panstart="onTouchstart"
  37. @tap="clickHandler">
  38. <!-- #endif -->
  39. <slot />
  40. </view>
  41. </view>
  42. </template>
  43. <!-- #ifdef APP-VUE || MP-WEIXIN || H5 || MP-QQ -->
  44. <script src="./index.wxs" module="wxs" lang="wxs"></script>
  45. <!-- #endif -->
  46. <script>
  47. import touch from '../../libs/mixin/touch.js'
  48. import props from './props.js';
  49. // #ifdef APP-NVUE
  50. import nvue from './nvue.js';
  51. // #endif
  52. // #ifdef APP-VUE || MP-WEIXIN || H5 || MP-QQ
  53. import wxs from './wxs.js';
  54. // #endif
  55. /**
  56. * SwipeActionItem 滑动单元格子组件
  57. * @description 该组件一般用于左滑唤出操作菜单的场景,用的最多的是左滑删除操作
  58. * @tutorial https://www.uviewui.com/components/swipeAction.html
  59. * @property {Boolean} show 控制打开或者关闭(默认 false )
  60. * @property {String | Number} index 标识符,如果是v-for,可用index索引
  61. * @property {Boolean} disabled 是否禁用(默认 false )
  62. * @property {Boolean} autoClose 是否自动关闭其他swipe按钮组(默认 true )
  63. * @property {Number} threshold 滑动距离阈值,只有大于此值,才被认为是要打开菜单(默认 30 )
  64. * @property {Array} options 右侧按钮内容
  65. * @property {String | Number} duration 动画过渡时间,单位ms(默认 350 )
  66. * @event {Function(index)} open 组件打开时触发
  67. * @event {Function(index)} close 组件关闭时触发
  68. * @example <u-swipe-action><u-swipe-action-item :options="options1" ></u-swipe-action-item></u-swipe-action>
  69. */
  70. export default {
  71. name: 'u-swipe-action-item',
  72. mixins: [uni.$u.mpMixin, uni.$u.mixin, props, touch],
  73. // #ifdef APP-NVUE
  74. mixins: [uni.$u.mpMixin, uni.$u.mixin, props, nvue, touch],
  75. // #endif
  76. // #ifdef APP-VUE || MP-WEIXIN || H5 || MP-QQ
  77. mixins: [uni.$u.mpMixin, uni.$u.mixin, props, touch, wxs],
  78. // #endif
  79. data() {
  80. return {
  81. // 按钮的尺寸信息
  82. size: {},
  83. // 父组件u-swipe-action的参数
  84. parentData: {
  85. autoClose: true,
  86. },
  87. // 当前状态,open-打开,close-关闭
  88. status: 'close',
  89. }
  90. },
  91. watch: {
  92. // 由于wxs无法直接读取外部的值,需要在外部值变化时,重新执行赋值逻辑
  93. wxsInit(newValue, oldValue) {
  94. this.queryRect()
  95. }
  96. },
  97. computed: {
  98. wxsInit() {
  99. return [this.disabled, this.autoClose, this.threshold, this.options, this.duration]
  100. }
  101. },
  102. mounted() {
  103. this.init()
  104. },
  105. methods: {
  106. init() {
  107. // 初始化父组件数据
  108. this.updateParentData()
  109. // #ifndef APP-NVUE
  110. uni.$u.sleep().then(() => {
  111. this.queryRect()
  112. })
  113. // #endif
  114. },
  115. updateParentData() {
  116. // 此方法在mixin中
  117. this.getParentData('u-swipe-action')
  118. },
  119. // #ifndef APP-NVUE
  120. // 查询节点
  121. queryRect() {
  122. this.$uGetRect('.u-swipe-action-item__right__button', true).then(buttons => {
  123. this.size = {
  124. buttons,
  125. show: this.show,
  126. disabled: this.disabled,
  127. threshold: this.threshold,
  128. duration: this.duration
  129. }
  130. })
  131. },
  132. // #endif
  133. // 按钮被点击
  134. buttonClickHandler(item, index) {
  135. this.$emit('click', {
  136. index,
  137. name: this.name
  138. })
  139. }
  140. },
  141. }
  142. </script>
  143. <style lang="scss" scoped>
  144. @import "../../libs/css/components.scss";
  145. .u-swipe-action-item {
  146. position: relative;
  147. overflow: hidden;
  148. /* #ifndef APP-NVUE || MP-WEIXIN */
  149. touch-action: pan-y;
  150. /* #endif */
  151. &__content {
  152. background-color: #FFFFFF;
  153. z-index: 10;
  154. }
  155. &__right {
  156. position: absolute;
  157. top: 0;
  158. bottom: 0;
  159. right: 0;
  160. @include flex;
  161. &__button {
  162. @include flex;
  163. justify-content: center;
  164. overflow: hidden;
  165. align-items: center;
  166. &__wrapper {
  167. @include flex;
  168. align-items: center;
  169. justify-content: center;
  170. padding: 0 15px;
  171. &__text {
  172. @include flex;
  173. align-items: center;
  174. color: #FFFFFF;
  175. font-size: 15px;
  176. text-align: center;
  177. justify-content: center;
  178. }
  179. }
  180. }
  181. }
  182. }
  183. </style>