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